Merge branch 'mikijov-css-override'

README.md

@@ -128,6 +128,8 @@ date: the date
 description: "This is the subtext above the main heading in small letters"
 ---
 ```
+#### Overriding CSS
+To override CSS, you should create file `project_root/assets/css/override.css` and place all your CSS inside it. This file will be merged with standard CSS when the site is generated.
 
 ## Helpful Links
 [Aether Blog Post](https://www.joehutch.com/post/aether-theme/) - See aether in action and learn more about the theme

exampleSite/content/post/aether-features/index.md

@@ -3,11 +3,13 @@ title: "Aether Features"
 date: 2018-12-19T10:35:35-05:00
 description: "Hugo combined with the Aether theme turns easy to write markdown into powerful web pages.  KaTeX, Highlight.js, and Hugo provides the ability to create mathmatical symobols, equations, highlighted code, tables, lists, and much more."
 categories: ["Features"]
-featuredImage: "img/mdd-iphone.jpg"
 dropCap: true
 displayInMenu: false
 displayInList: true
 draft: false
+resources:
+- name: featuredImage
+  src: "mdd-iphone.jpg"
 ---
 
 Hugo combined with the Aether theme turns easy to write markdown into powerful web pages.  KaTeX, Highlight.js, and Hugo provides the ability to create mathmatical symobols, equations, highlighted code, tables, lists, and much more.
@@ -109,18 +111,18 @@ Here is `var s = "Hello World"` inline code
 ## Images
 
 ```md
-![NYC Skyline](/img/nyc.jpg)
+![NYC Skyline](/post/aether-features/mdd-iphone.jpg)
 ```
 
-![NYC Skyline](/img/nyc.jpg)
+![NYC Skyline](/post/aether-features/mdd-iphone.jpg)
 
 ## Small Images
 
 ```md
-{{</* smallimg src="/img/nyc.jpg" alt="NYC Skyline" smartfloat="left" width="250px" */>}}
+{{</* smallimg src="featuredImage" alt="NYC Skyline" smartfloat="left" width="250px" */>}}
 ```
 
-{{<smallimg src="/img/nyc.jpg" alt="NYC Skyline" smartfloat="left" width="250px">}}
+{{<smallimg src="featuredImage" alt="aether theme displayed on an iPhone" smartfloat="left" width="250px">}}
 
 This image floats to the left of this paragraph and is 250px wide. Its aspect ratio is maintained so it will not stretch. The picture shows the New York skyline. You can see how the design is responsive and how the cards intelligently fit to the display. With flexbox and css grid, heavy frameworks such as bootstrap aren't necessary to create beautiful responsive designs. The cards in aether use flexbox to change the image from the right side on desktops to the top on mobile.
 

exampleSite/content/post/aether-theme/index.md

@@ -3,11 +3,15 @@ title: "Aether: A Clean Theme for Hugo"
 date: 2018-05-02T14:33:42-04:00
 description: " Aether is new theme for Hugo that emphasizes motion, material, and depth as design elements. Distracting styling and page elements are forgone to focus on the content."
 categories: ["Web"]
-featuredImage: "img/mdd-macbook.jpg"
 dropCap: true
 displayInMenu: false
 displayInList: true
 draft: false
+resources:
+- name: featuredImage
+  src: "mdd-macbook.jpg"
+  params:
+    description: "A MacBook showing a website using the aether theme"
 ---
 
 Today's web is a frustrating mess of pop-ups, intrusive banners, and ads obstructing the content. I designed aether to be free of all these distractions and simply highlight the content. The result feels more like a native application than a website. Interactions are intuitive, content is the focus, and distractions are omitted.

exampleSite/content/post/creating-a-new-theme/index.md

@@ -2,11 +2,13 @@
 author: "Michael Henderson"
 date: 2014-09-28
 title: Creating a New Theme
-featuredImage: "img/nyc.jpg"
 dropCap: true
 displayInMenu: false
 displayInList: true
 draft: false
+resources:
+- name: featuredImage
+  src: "nyc.jpg"
 ---
 
 

exampleSite/content/post/goisforlovers/index.md

@@ -1,6 +1,5 @@
 +++
 title = "(Hu)go Template Primer"
-featuredImage = "img/lucas-benjamin-565254-unsplash.jpg"
 displayInMenu = false
 displayInList = true
 draft = false
@@ -16,6 +15,11 @@ categories = [
     "Development",
     "golang",
 ]
+[[resources]]
+  name = "featuredImage"
+  src = "lucas-benjamin-565254-unsplash.jpg"
+  [resources.params]
+    description = "Alt description for the featured image"
 +++
 
 Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for

exampleSite/content/post/hugoisforlovers/index.md

@@ -15,6 +15,9 @@ categories = [
     "Development",
     "golang",
 ]
+[[resources]]
+  name = "featuredImage"
+  src = "andrew-neel-609846-unsplash.jpg"
 +++
 
 ## Step 1. Install Hugo

exampleSite/content/post/migrate-from-jekyll/index.md

@@ -1,10 +1,12 @@
 ---
 date: 2014-03-10
-featuredImage: "img/yan-ots-257617-unsplash.jpg"
 displayInMenu: false
 displayInList: true
 draft: false
 title: Migrate to Hugo from Jekyll
+resources:
+- name: featuredImage
+  src: "yan-ots-257617-unsplash.jpg"
 ---
 
 ## Move static content to `static`

layouts/_default/list.html

@@ -15,7 +15,11 @@
         {{ . }}
       </section>
       {{- end }}
-      {{ $paginator := .Paginate (where .Pages "Params.displayinlist" "!=" false) -}}
+      {{ $pages := .Pages }}
+      {{ if .IsHome }}
+      {{ $pages = .Site.RegularPages }}
+      {{ end }}
+      {{ $paginator := .Paginate (where $pages "Params.displayinlist" "!=" false) -}}
       {{- range $paginator.Pages -}}
         {{ .Render "li" }}
       {{- end }}

layouts/partials/head.html

@@ -24,7 +24,8 @@
   {{ $mainStyle := resources.Get "css/style.css" }}
   {{ $xcodeStyle := resources.Get "css/xcode.css" }}
   {{ $fontStyle := resources.Get "css/latolatinfonts.css" }}
-  {{ $style := slice $xcodeStyle $fontStyle $mainStyle | resources.Concat "css/concated.css" | minify }}
+  {{ $overrideStyle := resources.Get "css/override.css" }}
+  {{ $style := slice $xcodeStyle $fontStyle $mainStyle $overrideStyle | resources.Concat "css/concated.css" | minify }}
   <link href="{{ $style.Permalink }}" rel="stylesheet">
   {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}