feat(styles): brand-new headings

BREAKING CHANGE: I've redesigned the site headings this time, and also introduces some new variables for you to customize them, you can use your favorite color site-wide or specific post in post front-matter field: ```yaml scheme-hero-text: "#00ebff" scheme-hero-link: "#00ebff" scheme-hero-bg: "#0029ff" ```
sparanoid · Mar 30, 2016 · 442d46f · 442d46f
1 parent 5cb16c9
commit 442d46f
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 55 deletions.
diff --git a/_app/_includes/themes/curtana/includes/css-variables.html b/_app/_includes/themes/curtana/includes/css-variables.html
@@ -59,24 +59,32 @@
   }
   {% endif %}
 
-  {% if page.scheme-text %}
-  body:before, .logo {
-    background: {{ page.scheme-text }};
-  }
-  {% endif %}
-    {% if page.scheme-link %}
-    .logo:hover {
-      background: {{ page.scheme-link }};
-    }
-    {% endif %}
-
   {% if page.scheme-hover %}
   .navigation li a:hover,
   .navigation li a:focus {
     color: {{ page.scheme-hover }};
   }
   {% endif %}
 
+  {% if page.scheme-hero-bg %}
+  .content header {
+    background: {{ page.scheme-hero-bg }};
+  }
+  {% endif %}
+  {% if page.scheme-hero-text %}
+  .content header {
+    color: {{ page.scheme-hero-text }};
+  }
+  {% endif %}
+    {% if page.scheme-hero-link %}
+    .content header a {
+      color: {{ page.scheme-hero-link }};
+    }
+    .content header .external .dot {
+      background: {{ page.scheme-hero-link }};
+    }
+    {% endif %}
+
   {% if page.scheme-link %}
   .current a {
     color: {{ page.scheme-link }};

diff --git a/_app/_includes/themes/curtana/includes/header.html b/_app/_includes/themes/curtana/includes/header.html
@@ -1,18 +1,15 @@
-<!-- Header, just a logo at the moment -->
-<header>
-  <a href="{{ site.base }}/" class=logo accesskey=x>
-    <h1>{{ site.name }}</h1>
-  </a>
-</header>
-
 <!-- Main navigation with current page / categoriy highlighted -->
 <nav class="navigation">
   <ul>
     {% for item in site.data.nav %}
       {% assign lowercased_title = item.title | downcase %}
       <li {% if page.permalink == item.url or page.category == lowercased_title %}class=current{% endif %}>
         <a href="{{ item.url | prepend: site.base }}">
-          {{ item.title }}
+          {% if item.title == "Home" %}
+            {{ site.name }}
+          {% else %}
+            {{ item.title }}
+          {% endif %}
         </a>
       </li>
     {% endfor %}

diff --git a/_app/_posts/note/2014-05-01-custom-color-scheme.md b/_app/_posts/note/2014-05-01-custom-color-scheme.md
@@ -8,6 +8,9 @@ scheme-link: "#ff00b4"
 scheme-hover: "#ff00b4"
 scheme-code: "#ad00ff"
 scheme-bg: "#00ebff"
+scheme-hero-text: "#00ebff"
+scheme-hero-link: "#00ebff"
+scheme-hero-bg: "#0029ff"
 ---
 
 This is an example how to change your post color scheme for specific posts. You can simply add the following variables to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/):
@@ -18,6 +21,9 @@ scheme-link: "#ff00b4"
 scheme-hover: "#ff00b4"
 scheme-code: "#ad00ff"
 scheme-bg: "#00ebff"
+scheme-hero-text: "#00ebff"
+scheme-hero-link: "#00ebff"
+scheme-hero-bg: "#0029ff"
 ```
 
 You can also ignore other variables if you only want to change the background:

diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less
@@ -2,30 +2,11 @@
 // Common
 // --------------------------------------------------
 
-// Site logo
-.logo {
-  display: block;
-  height: 1vmax;
-  margin: 0 0 1.4vmax;
-  background: @link-color;
-  opacity: 0;
-
-  &:hover,
-  &:focus {
-    border-bottom: none !important;
-    background: @text-color;
-    opacity: 1;
-  }
-
-  h1 {
-    height: 0;
-    text-indent: -99999em;
-  }
-}
-
 // Main navigation
+@nav-padding: 1.4vmax;
 .navigation {
-  margin: 0 0 16vmin;
+  padding-top: @nav-padding;
+  padding-bottom: @nav-padding;
   margin-right: -1.1em;
   margin-left: -1.1em;
   font-size: 60%;
@@ -157,7 +138,31 @@ body:hover .latest {
   }
 
   header {
+    display: flex;
+    min-height: calc(100vh - (@nav-padding * 2) - 30px);
+    padding-top: 16vmin;
     padding-bottom: 16vmin;
+    margin-bottom: 16vmin;
+    flex-direction: column;
+    justify-content: center;
+    background: fade(@text-color, 2%);
+    .padding-offset(@space-lg, @space-lg);
+    .margin-offset(-@space-lg, -@space-lg);
+
+    @media (max-width: @breakpoint-md) {
+      .padding-offset(@space-md, @space-md);
+      .margin-offset(-@space-md, -@space-md);
+    }
+
+    @media (max-width: @breakpoint-sm) {
+      .padding-offset(@space-sm, @space-sm);
+      .margin-offset(-@space-sm, -@space-sm);
+    }
+
+    // Reset min height for smaller screens
+    @media (max-height: @breakpoint-xs) {
+      min-height: @breakpoint-xs;
+    }
 
     h1 {
       margin: 0 0 .1em;
@@ -190,6 +195,11 @@ body:hover .latest {
       }
     }
 
+    // Reset subheading in page title (used by AMSF atm)
+    h2 {
+      margin: 0;
+    }
+
     // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode.
     .image-title {
       text-indent: -999999px;

diff --git a/_app/assets/themes/curtana/_less/mixins.less b/_app/assets/themes/curtana/_less/mixins.less
@@ -16,7 +16,7 @@
 }
 
 .heading() {
-  font-size: 330%;
+  font-size: 360%;
   -webkit-font-smoothing: antialiased;
   font-weight: bold;
   letter-spacing: @heading-letter-spacing;

diff --git a/_app/assets/themes/curtana/_less/print.less b/_app/assets/themes/curtana/_less/print.less
@@ -25,6 +25,11 @@
     text-decoration: none;
   }
 
+  .content header {
+    min-height: 0;
+    padding-bottom: 0;
+  }
+
   .content .post-content,
   .content .page-content {
     max-width: 100% !important;

diff --git a/_app/assets/themes/curtana/_less/reset.less b/_app/assets/themes/curtana/_less/reset.less
@@ -44,19 +44,6 @@ body {
   @media (max-width: @breakpoint-xs) {
     font-size: (@font-size * 3.2);
   }
-
-  // A semitranslucent bar at the top of the page
-  &:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 1vmax;
-    pointer-events: none;
-    background: @link-color;
-    content: "";
-    opacity: .2;
-  }
 }
 
 // Reset fonts for relevant elements