Updated to Hugo 0.24.1, added about section, refactored SCSS

README.md

@@ -64,6 +64,7 @@ theme = "osprey"
 canonifyURLS = true
 googleAnalytics = ""
 disqusShortname = "tomanistor"
+disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies
 
 [Params]
     tagline = "Osprey Example Site"
@@ -87,25 +88,36 @@ disqusShortname = "tomanistor"
     ajaxFormspree = true
 
 [permalinks]
-    gallery = "/"
+    gallery = "/" # Redirect gallery index to home page
 
+[[menu.main]]
+    name = "About"
+    url  = "/#about"
+    weight = 1
 [[menu.main]]
     name = "Work"
     url  = "/#work"
-    weight = 1
+    weight = 2
 [[menu.main]]
     name = "Blog"
     url  = "/#blog"
-    weight = 2
+    weight = 3
 [[menu.main]]
     name = "Contact"
     url  = "/#contact"
-    weight = 3
+    weight = 4
 ```
 
 ## Using Osprey
 The two main content types are blog posts and gallery images.
 
+### About Section
+To create an about section that renders on the home page, run:
+
+```console
+$ hugo new about.md
+```
+
 ### Blog Posts
 To create a new blog post, run:
 
@@ -151,5 +163,8 @@ This will render inline CSS in the head of your site and without adding an extra
 ### Cache Busting
 To implement cache busting of CSS and JS static assets with something like Gulp.js and [gulp-hash](https://www.npmjs.com/package/gulp-hash), change the config.toml parameters `cacheBustCSS` and `cacheBustJS` from `false` to `true` and follow [this setup guide](http://danbahrami.io/articles/building-a-production-website-with-hugo-and-gulp-js/#building-a-gulp-pipeline:c9938300a3bdba2018b469c2485ca2b6).
 
+## Contributions
+If you'd like to help with the development of this theme, I encourage you to submit a pull request or create an issue if you find a bug. All help is appreciated.
+
 ## License
 This theme is released under the GNU 3.0 license. For more information read the [license](https://github.com/tomanistor/osprey/blob/master/LICENSE.md).

archetypes/blog.md

@@ -0,0 +1,6 @@
++++
+title = "{{ replace .TranslationBaseName "-" " " | title }}"
+date = {{ .Date }}
+description = ""
+draft = true
++++

archetypes/default.md

@@ -1,3 +1,5 @@
 +++
-description = ""
+title = "{{ replace .TranslationBaseName "-" " " | title }}"
+date = {{ .Date }}
+draft = true
 +++

archetypes/gallery.md

@@ -1,8 +1,10 @@
 +++
+title = "{{ replace .TranslationBaseName "-" " " | title }}"
+date = {{ .Date }}
 image = ""
 alt = ""
 color = ""
 link1 = ""
 link2 = ""
-
+draft = true
 +++

exampleSite/config.toml

@@ -7,6 +7,7 @@ theme = "osprey"
 canonifyURLS = true
 googleAnalytics = ""
 disqusShortname = "tomanistor"
+disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies
 
 [Params]
     tagline = "Osprey Example Site"
@@ -29,15 +30,22 @@ disqusShortname = "tomanistor"
     cacheBustJS = false
     ajaxFormspree = true
 
+[permalinks]
+    gallery = "/" # Redirect gallery index to home page
+
+[[menu.main]]
+    name = "About"
+    url  = "/#about"
+    weight = 1
 [[menu.main]]
     name = "Work"
     url  = "/#work"
-    weight = 1
+    weight = 2
 [[menu.main]]
     name = "Blog"
     url  = "/#blog"
-    weight = 2
+    weight = 3
 [[menu.main]]
     name = "Contact"
     url  = "/#contact"
-    weight = 3
+    weight = 4

exampleSite/content/about.md

@@ -0,0 +1,15 @@
++++
+title = "About"
+date = "2017-06-27T17:39:21-07:00"
+draft = false
++++
+
+## Welcome to the Osprey Theme
+
+To create an about section, generate an about.md file in your content folder by doing:
+
+```console
+$ hugo new about.md
+```
+
+Then add your own content to the markdown file. Everything in the file will be generated to show here on the home page.

layouts/index.html

@@ -1,4 +1,5 @@
 {{ partial "header.html" . }}
+{{ partial "about.html" . }}
 {{ partial "gallery.html" . }}
 {{ partial "blog.html" . }}
 {{ partial "contact.html" . }}

layouts/partials/about.html

@@ -0,0 +1,18 @@
+{{ $directory := "content/" }}
+{{ $filename := "about.md" }}
+{{ if (where (readDir $directory) "Name" $filename) }}
+<section class="about" id="about">
+    <div class="container middle-xs">
+        <div class="row center-xs">
+            <div class="col-xs-12"><h1>{{ with $.Site.GetPage "page" "about.md" }}{{ .Title }}{{ end }}</h1></div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 middle-xs">
+                {{ with $.Site.GetPage "page" "about.md" }}
+                    {{ .Content }}
+                {{ end }}
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}

layouts/partials/blog.html

@@ -5,7 +5,7 @@
         </div>
         <div class="row">
             <div class="col-xs-12 posts-list">
-                {{ range first 5 (where .Data.Pages "Type" "blog") }}
+                {{ range first 5 (where .Data.Pages "Section" "blog") }}
                     <article>
                         <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
                         <div class=sub-header>

layouts/partials/gallery.html

@@ -1,8 +1,8 @@
 <section class="gallery" id="work">
     <div class="row">
 
-        {{ range .Data.Pages.Reverse }}
-        {{ if eq .Type "gallery" }}
+        {{ range .Pages.Reverse }}
+        {{ if eq .Section "gallery" }}
         {{ $galleryTotal := sub (len (where .Site.Pages "Section" "gallery")) 1 }}
         <div class='col-xs-12{{ if gt $galleryTotal 1 }} col-md-6{{ if gt $galleryTotal 2 }}{{ if modBool $galleryTotal 2 }} col-lg-3{{ end }}{{ if modBool $galleryTotal 3 }} col-lg-4{{ end }}{{ end }}{{ end }}' {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
             <img src="/images/{{ .Params.image}}" {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>

layouts/partials/header.html

@@ -103,7 +103,7 @@
                 <a href="{{ .Site.BaseURL }}"><img src="{{ .Site.Params.logoSmall }}" alt="{{ .Site.Title }}"></a>
             </div>
             {{ range .Site.Menus.main }}
-            <div class="col-xs-3 col-md-2"><h3><a href="{{ .URL }}">{{ .Name }}</a></h3></div>
+            <div class="col-xs-3 col-sm-2"><h3><a href="{{ .URL }}">{{ .Name }}</a></h3></div>
             {{ end }}
             <div class="col-xs-6 col-sm-1 nav-toggle">
                 <a href="" class="nav-icon" onclick="return false"><img src="/images/icon-menu.png" alt="Open Menu"><img src="/images/icon-x.png" alt="Close Menu" style="display: none;"></a>

layouts/sitemap.xml

@@ -1,6 +1,6 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
-  {{ range where .Data.Pages "Type" "!=" "gallery" }}
+  {{ range (where .Data.Pages "Section" "!=" "gallery") }}
   <url>
     <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
     <lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}

static/styles/scss/main.scss

@@ -11,9 +11,9 @@ $smoke: #F7F7F7;
 $accent: #DA784D;
 
 // Fonts
-$font-header: "Bitter", "Roboto Slab", "serif";
-$font-body: "Rubik", "Poppins", "sans-serif";
-$font-code: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", "monospace";
+$font-header: "Bitter", "Roboto Slab", "Cambria", Georgia, serif;
+$font-body: "Rubik", "Poppins", "Hel­vetica", Arial, sans-serif;
+$font-code: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", monospace;
 
 // Modular font scale
 // Large: http://www.modularscale.com/?1.25&em&1.333&web&text
@@ -151,7 +151,7 @@ nav {
   height: 100%;
   background-color: $black;
   transform: translate(0px, 0px);
-  transition: 0.15s ease;
+  transition: 0.25s ease-out;
   a {
     color: #FFF;
     &:hover {
@@ -165,7 +165,7 @@ nav {
 main {
   background-color: #fff;
   transform: translate(0px, 0px);
-  transition: 0.15s ease;
+  transition: 0.25s ease-in;
 }
 main.active {
   transform: translate(-100vw, 0px);
@@ -212,6 +212,7 @@ q {
 }
 a {
   text-decoration: none;
+  transition: color .2s ease-out;
   img {
     border: none;
   }
@@ -223,7 +224,7 @@ img {
   display: block;
 }
 pre {
-  font: 12px "Consolas", "Liberation Mono", "Menlo", "Courier", "monospace";
+  font: 12px "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
   background-color: $smoke;
   margin-top: 0;
   margin-bottom: $vertical-rhythm;
@@ -232,7 +233,7 @@ pre {
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  font-family: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", "monospace";
+  font-family: $font-code;
   > code {
     padding: 0;
     margin: 0;
@@ -263,17 +264,17 @@ code {
   padding: 4px;
 }
 .sans {
-  font-family: "Open Sans", "Myriad Pro", "Myriad", "sans-serif";
+  font-family: "Open Sans", "Myriad Pro", "Myriad", sans-serif;
 }
 .mono, tt {
-  font-family: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", "monospace";
+  font-family: $font-code;
 }
 ul, ol {
   margin-bottom: $vertical-rhythm;
   li {
     margin-left: 1.25em;
     code {
-      font-family: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", "monospace";
+      font-family: $font-code;
     }
   }
 }
@@ -344,7 +345,6 @@ blockquote {
     background-repeat: repeat-x;
     background-position: 0 95%;
     text-decoration: none;
-    transition: color .2s ease-in-out;
     &:hover {
       color: $accent;
     }
@@ -364,6 +364,47 @@ blockquote {
   top: 0;
   bottom: 0;
 }
+.about {
+  width: 100%;
+  background-color: $smoke;
+  padding-bottom: $vertical-rhythm * 2;
+  p {
+    @include size(h3);
+    margin-top: $vertical-rhythm;
+  }
+  a {
+    text-shadow: 0.03em 0 #fff,
+    -0.03em 0 #fff,
+    0 0.03em #fff,
+    0 -0.03em #fff,
+    0.06em 0 #fff,
+    -0.06em 0 #fff,
+    0.09em 0 #fff,
+    -0.09em 0 #fff,
+    0.12em 0 #fff,
+    -0.12em 0 #fff,
+    0.15em 0 #fff,
+    -0.15em 0 #fff,
+    0.03em 0.075em #fff,
+    -0.03em 0.075em #fff,
+    0.06em 0.075em #fff,
+    -0.06em 0.075em #fff,
+    0.09em 0.075em #fff,
+    -0.09em 0.075em #fff,
+    0.12em 0.075em #fff,
+    -0.12em 0.075em #fff,
+    0.15em 0.075em #fff,
+    -0.15em 0.075em #fff;
+    background-image: linear-gradient($accent,$accent);
+    background-size: 2px 3px;
+    background-repeat: repeat-x;
+    background-position: 0 95%;
+    text-decoration: none;
+    &:hover {
+      color: $accent;
+    }
+  }
+}
 .gallery {
   div[class^="col-"], div[class*=" col-"] {
     padding: 0;
@@ -385,7 +426,7 @@ blockquote {
   height: 100%;
   width: 100%;
   opacity: 0;
-  transition: .2s ease;
+  transition: .2s ease-out;
   background-color: $black;
   a {
     color: #FFF;
@@ -432,11 +473,12 @@ input {
   &[type="submit"] {
     background-color: $storm;
     color: #FFF;
-  }
-  &[type="submit"]:hover {
-    background-color: $accent;
-    color: #FFF;
-    cursor: pointer;
+    transition: .2s ease-out;
+    &:hover {
+      background-color: $accent;
+      color: #FFF;
+      cursor: pointer;
+    }
   }
 }
 textarea {

theme.toml

@@ -5,7 +5,7 @@ description = "Clean, responsive one-page portfolio accompanied by a minimalist
 homepage = "https://github.com/tomanistor/osprey"
 tags = ["blog", "portfolio", "gallery", "minimalist", "responsive", "flexbox"]
 features = ["blog", "portfolio", "google analytics"]
-min_version = 0.19
+min_version = 0.24.1
 
 [author]
     name = "Toma Nistor"