page layout, typography & grid system setup

_config.yml

@@ -1,7 +1,7 @@
 # The Basics
 # --------------------
 title:          "IPDB"
-description:    "The Interplanetary database."
+description:    "The Interplanetary Database."
 url:            "https://ipdb.io"
 email:          "contact@ipdb.io"
 
@@ -10,6 +10,7 @@ github:
     repo:       "site"
 
 analyticsID:    ""
+typekitID:      "rnq6byg"
 
 
 # Urls

_src/_assets/scss/_grid.scss

@@ -0,0 +1,242 @@
+//
+// Grid
+// --------------
+// bigchaindb.com
+//
+// adapted from github.com/kremalicious/kremalicious3/blob/master/_src/_assets/styl/grid.styl
+//
+
+
+//
+// More sane box model
+//
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+
+//
+// Base
+//
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.grid__col {
+    flex: 1;
+    // Firefox grid fix for whatever reason
+    min-height: 0;
+    min-width: 0;
+}
+
+.row {
+    max-width: 55em;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: ($spacer / 2);
+    padding-right: ($spacer / 2);
+
+    @media ($screen-sm) {
+        padding-left: $spacer;
+        padding-right: $spacer;
+    }
+}
+
+.row--wide {
+    max-width: 70rem;
+}
+
+.row--narrow {
+    max-width: ($screen-md-min / 1.5);
+}
+
+
+//
+// Alignment per row
+//
+.grid--top {
+    align-items: flex-start;
+}
+
+.grid--bottom {
+    align-items: flex-end;
+}
+
+.grid--center {
+    align-items: center;
+}
+
+.grid--justifycenter {
+    justify-content: center;
+}
+
+
+//
+// Alignment per cell
+//
+.grid__col--top {
+    align-self: flex-start;
+}
+
+.grid__col--bottom {
+    align-self: flex-end;
+}
+
+.grid__col--center {
+    align-self: center;
+}
+
+
+//
+// Gutters
+//
+@mixin grid-gutters() {
+    margin: -($spacer) 0 $spacer (-($spacer));
+
+    > .grid__col {
+        padding: $spacer 0 0 $spacer;
+    }
+}
+
+.grid--gutters {
+    @include grid-gutters();
+}
+
+@media ($screen-sm) {
+    .grid-small--gutters {
+        @include grid-gutters();
+    }
+}
+
+@media ($screen-md) {
+    .grid-medium--gutters {
+        @include grid-gutters();
+    }
+}
+
+@media ($screen-lg) {
+    .grid-large--gutters {
+        @include grid-gutters();
+    }
+}
+
+
+//
+// Columns
+//
+@mixin grid-columns() {
+    > .grid__col {
+        max-width: none;
+
+        &.grid__col--1 { flex: 0 0 16%; }
+        &.grid__col--2 { flex: 0 0 33.3%; }
+        &.grid__col--3 { flex: 0 0 50%; }
+        &.grid__col--4 { flex: 0 0 66.6%; }
+        &.grid__col--5 { flex: 0 0 84%; }
+        &.grid__col--6 { flex: 0 0 100%; }
+    }
+}
+
+.grid--fit {
+    > .grid__col { flex: 1; }
+}
+
+.grid--full {
+    > .grid__col { flex: 0 0 100%; }
+}
+
+.grid--third {
+    > .grid__col { flex: 0 0 33.3%; }
+}
+
+.grid--half {
+    > .grid__col {
+        flex: 0 0 50%;
+        max-width: 50%; // IE 11 workaround for bug (flex-basis doesn't account for box-sizing:border-box)
+    }
+}
+
+.grid--columns {
+    @include grid-columns();
+}
+
+@media ($screen-sm) {
+    .grid-small--columns {
+        @include grid-columns();
+    }
+
+    .grid-small--fit {
+        > .grid__col { flex: 1; }
+    }
+
+    .grid-small--full {
+        > .grid__col { flex: 0 0 100%; }
+    }
+
+    .grid-small--third {
+        > .grid__col { flex: 0 0 33.3%; }
+    }
+
+    .grid-small--half {
+        > .grid__col {
+            flex: 0 0 50%;
+            max-width: 50%; // IE 11 workaround for bug (flex-basis doesn't account for box-sizing:border-box)
+        }
+    }
+}
+
+@media ($screen-md) {
+    .grid-medium--columns {
+        @include grid-columns();
+    }
+
+    .grid-medium--fit {
+        > .grid__col { flex: 1; }
+    }
+
+    .grid-medium--full {
+        > .grid__col { flex: 0 0 100%; }
+    }
+
+    .grid-medium--third {
+        > .grid__col { flex: 0 0 33.3%; }
+    }
+
+    .grid-medium--half {
+        > .grid__col {
+            flex: 0 0 50%;
+            max-width: 50%; // IE 11 workaround for bug (flex-basis doesn't account for box-sizing:border-box)
+        }
+    }
+}
+
+@media ($screen-lg) {
+    .grid-large--columns {
+        @include grid-columns();
+    }
+
+    .grid-large--fit {
+        > .grid__col { flex: 1; }
+    }
+
+    .grid-large--full {
+        > .grid__col { flex: 0 0 100%; }
+    }
+
+    .grid-large--third {
+        > .grid__col { flex: 0 0 33.3%; }
+    }
+
+    .grid-large--half {
+        > .grid__col {
+            flex: 0 0 50%;
+            max-width: 50%; // IE 11 workaround for bug (flex-basis doesn't account for box-sizing:border-box)
+        }
+    }
+}

_src/_assets/scss/_hero.scss

@@ -0,0 +1,10 @@
+.hero {
+    background: $brand-02;
+    padding: 2rem;
+
+    &,
+    .hero__title,
+    .hero__action {
+        color: #fff;
+    }
+}

_src/_assets/scss/_typography.scss

@@ -12,9 +12,10 @@ html {
 body {
     font-family: $font-family-base;
     font-size: $font-size-base;
+    font-weight: $font-weight-normal;
     line-height: $line-height;
     color: $text-color;
-    background: $brand-04;
+    background: #fff;
     margin: 0;
 
     // Controversial! But prevents text flickering in
@@ -23,9 +24,39 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
+
+//
+// Quickly fade in all content after
+// fonts have loaded. Not quite useful,
+// but beautiful.
+//
+.hero,
+.header,
+.section,
+.content {
+    .row {
+        transition: .15s ease-out;
+
+        .wf-loading & {
+            opacity: 0;
+        }
+
+        .wf-active &,
+        .wf-inactive & {
+            opacity: 1;
+        }
+    }
+}
+
+
+//
+// Headings
+//
 h1, h2, h3, h4, h5 { // stylelint-disable-line selector-list-comma-newline-after
-    color: $brand-03;
+    color: $headings-color;
-    font-family: $font-family-silkscreen;
+    font-family: $headings-font-family;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
     margin-top: $spacer;
     margin-bottom: $spacer;
 
@@ -41,6 +72,19 @@ ol {
 }
 
 
+//
+// Links
+//
+a {
+    color: $link-color;
+
+    &:hover,
+    &:focus {
+        color: lighten($link-color, 10%);
+    }
+}
+
+
 //
 // Lists
 //
@@ -50,14 +94,6 @@ ol {
     padding-left: $spacer;
 }
 
-a {
-    color: $brand-03;
-
-    &:hover,
-    &:focus {
-        color: darken($brand-03, 20%);
-    }
-}
 
 .lead {
     color: $brand-03;

_src/_assets/scss/_variables.scss

@@ -1,32 +1,47 @@
 //
 // Colors
 //
-$brand-01:                  # !default;
+$brand-01:                  #cd2d2d !default;
-$brand-02:                  # !default;
+$brand-02:                  #779bc3 !default;
-$brand-03:                  # !default;
+$brand-03:                  #444 !default;
-$brand-04:                  # !default;
+$brand-04:                  #444 !default;
-$brand-05:                  # !default;
+$brand-05:                  #636363 !default;
-$brand-06:                  # !default;
+$brand-06:                  #444 !default;
 
 //
 // Typography
 //
-$font-family-base:           !default;
+$font-family-base:          'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
-$font-family-silkscreen:     !default;
+$font-family-monospace:     Menlo, Monaco, Consolas, 'Courier New', monospace !default;
+
 $font-size-root:            16px !default;
 $font-size-root-lg:         18px !default;
-$line-height:               1.4 !default;
+$line-height:               1.5 !default;
-$spacer:                    1.5rem !default;
+$spacer:                    2rem !default;
+
+$font-weight-light:         300 !default;
+$font-weight-normal:        400 !default;
+$font-weight-bold:          600 !default;
 
 $font-size-base:            1rem !default;
 $font-size-large:           1.3rem !default;
 $font-size-small:           .8rem !default;
 $font-size-mini:            .7rem !default;
 
-$font-weight-normal:        400 !default;
+$font-size-h1:              2.7rem !default;
-$font-weight-bold:          700 !default;
+$font-size-h2:              2.3rem !default;
+$font-size-h3:              1.8rem !default;
+$font-size-h4:              1.45rem !default;
+$font-size-h5:              $font-size-large !default;
+$font-size-h6:              $font-size-base !default;
+
+$headings-font-family:      inherit !default;
+$headings-font-weight:      $font-weight-light !default;
+$headings-line-height:      1.3 !default;
+$headings-color:            $brand-03 !default;
 
 $text-color:                $brand-05 !default;
+$link-color:                $brand-01 !default;
 
 //
 // Responsive breakpoints

_src/_assets/scss/ipdb.scss

@@ -0,0 +1,6 @@
+@import 'variables';
+@import 'typography';
+
+// Components
+@import 'grid';
+@import 'hero';

_src/_includes/head.html

@@ -26,6 +26,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="cleartype" content="on">
 
+    <!-- Typekit advanced async snippet -->
+    <script>
+        (function(d) {
+            var config = {
+            kitId: '{{ site.typekitID }}',
+            scriptTimeout: 3000,
+            async: true
+        },
+        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
+        })(document)
+    </script>
+
     <!-- CSS -->
     <link rel="stylesheet" href="/assets/css/ipdb.min.css">
 

_src/_layouts/base.html

@@ -5,7 +5,7 @@
 
     {% capture id %}{% if page.front_page %}front{% else %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endif %}{% endcapture %}
 
-    <body class="page-{{ id | remove:'-' }}" role="document">
+    <body class="page--{{ id | remove:'-' }}" role="document">
 
         <!--[if lt IE 9]>
         <div class="browsehappy alert alert-warning">

_src/_layouts/page.html

@@ -0,0 +1,20 @@
+---
+layout: base
+---
+
+<header class="header header--page">
+    <div class="row">
+        <h1 class="header__title">{{ page.title }}</h1>
+        {% if page.subtitle %}
+            <h2 class="header__subtitle">{{ page.subtitle }}</h2>
+        {% endif %}
+    </div>
+</header>
+
+<main role="main" class="section content content--page {% if page.path contains '.md' %}content--page--markdown{% endif %}">
+
+    <div class="row">
+        {{ content }}
+    </div>
+
+</main>

_src/imprint.md

@@ -0,0 +1,5 @@
+---
+layout: page
+
+title: Imprint
+---

_src/index.html

@@ -1,14 +1,12 @@
 ---
 layout: base
 front_page: true
-
-js: page-front.min.js
 ---
 
 <header class="hero">
     <div class="hero__content row">
         <hgroup>
-            <h1 class="section-title">IPDB</h1>
+            <h1 class="hero__title">IPDB</h1>
             <a href="/getstarted/" class="hero__action btn btn-primary">Sign up for free (testnet)</a>
         </hgroup>
     </div>

gulpfile.babel.js

@@ -268,10 +268,10 @@ export const server = (done) => {
 // Watch for file changes
 //
 export const watchSrc = () => {
-    watch(SRC + '_assets/styles/**/*.scss').on('all', series(css))
+    watch(SRC + '_assets/scss/**/*.scss').on('all', series(css))
-    watch(SRC + '_assets/scripts/**/*.js').on('all', series(js, browser.reload))
+    watch(SRC + '_assets/js/**/*.js').on('all', series(js, browser.reload))
-    watch(SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}').on('all', series(images, browser.reload))
+    watch(SRC + '_assets/img/**/*.{png,jpg,jpeg,gif,webp}').on('all', series(images, browser.reload))
-    watch(SRC + '_assets/images/**/*.{svg}').on('all', series(svg, browser.reload))
+    watch(SRC + '_assets/img/**/*.{svg}').on('all', series(svg, browser.reload))
     watch([SRC + '**/*.{html,xml,json,txt,md,yml}', './*.yml', SRC + '_includes/svg/*']).on('all', series('build', browser.reload))
 }