Merge pull request #51 from ascribe/thisandthat

Small fixes & features

_src/404.md

@@ -6,4 +6,7 @@ sitemap: false
 title: Oops, that didn't work
 ---
 
-[Back to site](/)
+Pardon us, the page you requested isn't here. Please check the url for typos or [let us know](/contact/) if you expected a resource to be here.
+
+
+[Back to home](/)

_src/_assets/styles/_page-404.scss

@@ -1,14 +1,57 @@
 
 .page-404 {
-    .header {
+    position: relative;
     background-image: url('/assets/img/fail-cat.gif');
-        min-height: 420px;
+    background-size: cover;
+    background-position: center center;
+    @extend .color-overlay;
 
-        @media ($screen-md) {
+    &:before {
-            min-height: 100vh;
+        z-index: -1;
+    }
+
+    .header {
+        background: none;
+
+        &:before { display: none; }
+    }
+
+    .header__title {
+        margin-bottom: ($spacer * 2);
+        padding-bottom: 0;
+
+        // the bottom line
+        &:after {
+            content: "";
+            height: 1px;
+            width: 5rem;
+            display: block;
+            margin: ($spacer * 2) auto 0 auto;
+            background: $gray-lighter;
         }
     }
-    .content--page {
+
+    .content--page--markdown {
         text-align: center;
+        padding-top: 0;
+        //margin-bottom: ($spacer * 6);
+
+        p { color: #fff; }
+    }
+
+    .footer {
+        background: none;
+        border-color: rgba(#fff, .2);
+    }
+
+    .footer__copyright {
+        border-color: rgba(#fff, .1);
+
+        &,
+        .menu__link { color: rgba(#fff, .6); }
+    }
+
+    .menu--footer {
+        a { color: #fff }
     }
 }

_src/_assets/styles/bigchain/_footer.scss

@@ -1,16 +1,19 @@
 
 .footer {
-    padding-top: $spacer;
+    @extend .background--darker;
-    padding-bottom: $spacer;
     border-top: 1px solid $gray;
     color: $gray-light;
+    padding-bottom: 0;
 }
 
-.footer__copyright {
-    text-align: center;
 
-    &,
+//
-    small {
+// Nice, clean sticky footer with flexbox
-        @extend .mini;
+//
-    }
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+
+    > .content { flex: 1; }
 }

_src/_assets/styles/bigchain/_forms.scss

@@ -73,6 +73,7 @@
     font-size: $font-size-base;
     line-height: $line-height;
     color: $input-color-placeholder;
+    transform-origin: left;
 
     .background--photo & {
         color: rgba(#fff, .5);
@@ -87,7 +88,6 @@
     //&.parsley-error ~ .form-label,
     &.parsley-success ~ .form-label {
         transform: translate3d(0, -(($spacer / 1.5) + $input-padding-x), 0) scale(.7);
-        transform-origin: left;
         color: $input-border-focus;
     }
 }

_src/_assets/styles/bigchain/_grid.scss

@@ -51,6 +51,10 @@
     max-width: 60rem;
 }
 
+.row--narrow {
+    max-width: ($screen-md-min / 1.75);
+}
+
 
 //
 // Alignment per row

_src/_assets/styles/bigchain/_header.scss

@@ -7,5 +7,5 @@
     z-index: 1;
     text-align: center;
     margin: 0;
-    padding: ($spacer * 4) 0;
+    padding: ($spacer * 4) 0 ($spacer * 6) 0;
 }

_src/_assets/styles/bigchain/_hero.scss

@@ -28,11 +28,29 @@ $menu-height-md: 73px;
     .logo--full {
         fill-opacity: .8;
         margin: 0 auto;
+        max-width: 10em;
+
+        @media ($screen-sm) {
+            max-width: 13em;
+        }
+
+        @media ($screen-md) {
             max-width: 20em;
+            margin-top: ($spacer * 2);
+        }
     }
 
     .section-title {
         color: #fff;
+        font-size: $font-size-h3;
+
+        @media ($screen-sm) {
+            font-size: $font-size-h2;
+        }
+
+        @media ($screen-md) {
+            font-size: $font-size-h1;
+        }
 
         &:after { display: none }
     }
@@ -41,7 +59,7 @@ $menu-height-md: 73px;
         color: #fff;
         opacity: .8;
         position: absolute;
-        bottom: ($spacer * 2);
+        bottom: -($spacer * 2);
         left: 0;
         right: 0;
         width: 100%;
@@ -96,6 +114,7 @@ $menu-height-md: 73px;
 .hero__content {
     position: relative;
     z-index: 1;
+    margin-bottom: ($spacer * 4);
 }
 
 

_src/_assets/styles/bigchain/_menus.scss

@@ -2,6 +2,7 @@
 .menu {
     position: relative;
     z-index: 10;
+    flex: 1;
 
     .grid__col {
         text-align: center;
@@ -17,7 +18,7 @@
 .menu__link {
     @extend .small;
     display: inline-block;
-    padding: $spacer ($spacer / 2);
+    padding: ($spacer / 2);
     text-transform: uppercase;
     box-shadow: none;
 
@@ -50,7 +51,8 @@
 
 .menu__logo {
     display: block;
-    margin-top: $spacer;
+    margin-top: ($spacer * 2);
+    margin-bottom: $spacer;
     box-shadow: none;
 
     @media ($screen-md) {
@@ -78,7 +80,7 @@
 .menu--main {
     .menu__logo {
         @media ($screen-md) {
-            padding: ($spacer/1.2) 0 ($spacer * 1.5) 0;
+            padding: ($spacer * 1.2) 0 ($spacer * 1.5) 0;
         }
     }
 
@@ -99,37 +101,62 @@
 // Footer Menu
 //
 .menu--footer {
+    .grid__col {
+        &:nth-child(2) {
+            margin-top: $spacer;
+
+            @media ($screen-sm) {
+                margin-top: 0;
+            }
+        }
+    }
 
     .menu__logo {
-        margin-bottom: $spacer;
+        margin-top: ($spacer / 3);
-
+        margin-bottom: 0;
-        &:hover,
-        &:focus {
-            .logo { fill: $brand-primary }
-        }
-    }
-
-    .logo {
-        fill: $gray-light;
-        opacity: 1;
-        height: 9px;
     }
 
     .menu__link {
-        @extend .mini;
+        padding: ($spacer/3);
-        padding: ($spacer/2);
         color: $gray-light;
 
-        // link line
+        @media ($screen-sm) {
-        &:after {
+            display: block;
-            background: $brand-primary;
+            text-align: left;
         }
 
-        &:first-child { padding-left: 0; }
+        // hide link line
-        &:last-child { padding-right: 0; }
+        &:after { display: none; }
 
         &:hover,
         &:focus,
         &.active { color: $brand-primary; }
     }
 }
+
+
+.footer__copyright {
+    border-top: 1px solid $gray-dark;
+    text-align: center;
+    display: block;
+    margin-top: ($spacer * 4);
+
+    @media ($screen-sm) {
+        text-align: left;
+    }
+
+    .menu__link {
+        display: inline-block;
+        text-transform: none;
+        padding: ($spacer * 2) ($spacer/2);
+
+        &:first-child { margin-left: ($spacer/2); }
+        &:last-child { padding-right: 0; }
+    }
+
+    &,
+    .menu__link {
+        @extend .mini;
+        color: $gray;
+    }
+}

_src/_assets/styles/bigchain/_typography.scss

@@ -61,9 +61,10 @@ a {
     &:focus {
         color: $link-hover-color;
         background: $link-hover-bg;
+        outline: 0;
     }
 
-    &:active {}
+    &:active { }
 }
 
 

_src/_data/menus.yml

@@ -9,11 +9,23 @@ main:
     - title: Docs
       url: https://bigchaindb.readthedocs.org/
 
-footer:
+secondary:
     - title: About
       url: /about/
     - title: Contact
       url: /contact/
+    - title: Blog
+      url: https://medium.com/{{ site.medium }}
+
+community:
+    - title: GitHub
+      url: https://github.com/{{ site.github.org }}
+    - title: Twitter
+      url: https://twitter.com/{{ site.twitter }}
+    - title: Google Group
+      url: https://groups.google.com/forum/#!forum/{{ site.googlegroup }}
+
+legal:
     - title: Terms
       url: /terms/
     - title: Privacy

_src/_includes/footer.html

@@ -1,10 +1,8 @@
 
-<footer class="footer" role="contentinfo">
+<footer class="footer section" role="contentinfo">
     <div class="row row--wide">
 
         {% include menu-footer.html %}
 
-        <p><small>&copy; {{ site.time | date: "%Y" }} ascribe GmbH</small></p>
-
     </div>
 </footer>

_src/_includes/hero-video.html

@@ -18,7 +18,7 @@
     </div>
 
     <div class="hero-video__background">
-        <video class="hero-video__video" preload="none" loop>
+        <video class="hero-video__video" poster="/assets/img/northern-lights-poster.jpg" preload="none" loop>
             <source src="/assets/videos/{{ page.hero_video_name }}.mp4" type="video/mp4">
             <source src="/assets/videos/{{ page.hero_video_name }}.webm" type="video/webm">
         </video>

_src/_includes/menu-footer.html

@@ -1,6 +1,16 @@
 <nav class="menu menu--footer">
 
-    <div class="grid grid--full grid-medium--half">
+    <div class="grid grid--full grid-small--fit">
+
+        <div class="grid__col">
+            <a class="menu__logo" href="/">
+                <svg class="logo logo--sm logo--white--green" aria-labelledby="title">
+                    <title>Logo</title>
+                    <use xlink:href="/assets/img/sprite.svg#logo"></use>
+                </svg>
+            </a>
+        </div>
+
         <div class="grid__col">
             {% for link in site.data.menus.main %}
 
@@ -15,7 +25,7 @@
         </div>
 
         <div class="grid__col">
-            {% for link in site.data.menus.footer %}
+            {% for link in site.data.menus.secondary %}
 
                 {% assign active = nil %}
                 {% if page.url contains link.url %}
@@ -26,6 +36,35 @@
 
             {% endfor %}
         </div>
+
+        <div class="list-unstyled grid__col">
+            {% for link in site.data.menus.community %}
+
+                {% assign active = nil %}
+                {% if page.url contains link.url %}
+                    {% assign active = 'active' %}
+                {% endif %}
+
+                <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
+
+            {% endfor %}
         </div>
 
+    </div>
+
+    <small class="footer__copyright">
+        &copy; {{ site.time | date: "%Y" }} ascribe GmbH
+
+        {% for link in site.data.menus.legal %}
+
+            {% assign active = nil %}
+            {% if page.url contains link.url %}
+                {% assign active = 'active' %}
+            {% endif %}
+
+            <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
+
+        {% endfor %}
+    </small>
+
 </nav>

_src/_includes/menu-main.html

@@ -1,7 +1,7 @@
 <nav class="menu menu--main">
     <div class="row row--wide">
 
-        <div class="grid grid--full grid-medium--columns grid--center">
+        <div class="grid grid--full grid-medium--columns grid--top">
             <div class="grid__col grid__col--1">
                 <a class="menu__logo" href="/">
                     <svg class="logo logo--sm logo--white--green" aria-labelledby="title">

_src/_layouts/page.html

@@ -43,7 +43,7 @@ layout: base
     </section>
 
     <section class="section section-contact">
-        <div class="row">
+        <div class="row row--narrow">
             <header class="section-header">
                 <h1 class="section-title">Get In Touch</h1>
             </header>