refactor complete footer

assets/less/ascribe.less

@@ -16,6 +16,8 @@
 
 @import 'ascribe/_branding.less';
 @import 'ascribe/_helpers.less';
+@import 'ascribe/_grid.less';
+@import 'ascribe/_footer.less';
 @import 'vendor/print.less';
 
 // HEADER
@@ -1759,150 +1761,6 @@ article.post {
     }
 }
 
-
-// FOOTER
-footer {
-    .footerText;
-
-    a {
-        .footerText;
-        width: 100%;
-        &:hover {
-            .fontRegular;
-            color: @white;
-        }
-    }
-    .top-footer {
-        background-color: @greyFooter;
-        padding: 50px 0 40px;
-
-        ul {
-            columns: 3;
-            width: 75%;
-            float: left;
-        }
-    }
-    ul {
-        list-style: none;
-    }
-    .contact {
-        width: 25%;
-        float:right;
-    }
-    .bottom-footer {
-        .subfooterText;
-        padding: 20px 0 10px;
-
-        a {
-            .subfooterText;
-        }
-
-        .menu {
-            float: left;
-            margin-left: 15px;
-
-            li {
-                display: inline-block;
-                border-left: 1px solid @blueDeep;
-                padding: 0 15px;
-
-                &:nth-of-type(1) {
-                    width: 60px;
-                }
-                &:nth-of-type(2) {
-                    width: 130px;
-                }
-            }
-        }
-        .social {
-                        float: right;
-                        margin-top: -10px;
-            li {
-                display: inline-block;
-            }
-        }
-    }
-    .eu-fund {
-        float: left;
-                width: 150px;
-                margin: -15px 10px 0 0;
-    }
-    .copyright {
-        float: left;
-    }
-    .button {
-        margin-bottom: 10px;
-
-        &:hover {
-            text-decoration: none;
-        }
-    }
-
-        // FIXME
-    @media screen and (max-width: 850px) {
-                .eu-fund {
-                    float: none;
-                    margin: -15px auto 10px auto;
-                    text-align: center;
-                }
-        .copyright {
-            float: none;
-            margin-bottom: 10px;
-                        text-align: center;
-        }
-                .bottom-footer {
-                    .menu {
-                        float: none;
-                        margin-bottom: 15px;
-                        text-align: center;
-
-                        li:first-of-type {
-                            border-left:0;
-                        }
-                    }
-                    .social {
-                            margin-bottom: 15px;
-                            float: none;
-                            text-align: center;
-                    }
-                }
-        }
-
-    @media screen and (max-width: @middleWidth) {
-        .top-footer {
-            ul {
-                display: none;
-            }
-        }
-        .button {
-            display: inline-block;
-            width: auto;
-        }
-        .contact {
-            width:100%;
-            text-align:center;
-        }
-        .bottom-footer {
-            text-align:center;
-
-            .menu {
-                float: none;
-                margin-bottom: 15px;
-
-                li:first-of-type {
-                    border-left:0;
-                }
-            }
-            .social {
-                float: none;
-            }
-        }
-    }
-}
-
-
-
-
 // ASCRIBE CHANGES
 .page-template-template-tour header .sticky.stuck {
     top: 0;
@@ -1939,27 +1797,10 @@ footer {
     margin: 20px 0;
 }
 
-.centered-footer {
-    max-width: 900px;
-}
-
-footer .bottom-footer .menu li:nth-of-type(2) {
-    width: 150px;
-}
-
 .blog-column {
     width: auto;
 }
 
-footer .top-footer ul {
-    width: 60%;
-}
-
-footer .bottom-footer .menu li {
-    text-align: center;
-    width: auto !important;
-}
-
 h1 > a,
 .press-articles .press-article h1 a {
     color: #d8127d;

assets/less/ascribe/_branding.less

@@ -335,15 +335,5 @@ hr {
 
 .blueGradient {
     background-color: @blueBright;
-    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#519cad+0,67c4da+100 */
-    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUxOWNhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2N2M0ZGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
-    background: -moz-linear-gradient(top,  rgba(81,156,173,1) 0%, rgba(103,196,218,1) 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,156,173,1)), color-stop(100%,rgba(103,196,218,1))); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  rgba(81,156,173,1) 0%,rgba(103,196,218,1) 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  rgba(81,156,173,1) 0%,rgba(103,196,218,1) 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  rgba(81,156,173,1) 0%,rgba(103,196,218,1) 100%); /* IE10+ */
     background: linear-gradient(to bottom,  rgba(81,156,173,1) 0%,rgba(103,196,218,1) 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#519cad', endColorstr='#67c4da',GradientType=0 ); /* IE6-8 */
-
 }

assets/less/ascribe/_footer.less

@@ -0,0 +1,137 @@
+//
+// FOOTER
+//
+.footer {
+    .footerText;
+    text-align: center;
+
+    @media (@screen-sm) {
+        text-align: left;
+    }
+
+    .menu {
+        list-style: none;
+    }
+
+    .menu-item {
+        display: inline;
+
+        a {
+            .footerText;
+            display: inline-block;
+            padding: 3px 15px;
+            opacity: .85;
+
+            &:hover,
+            &:focus {
+                opacity: 1;
+            }
+        }
+    }
+
+    .button {
+        margin-bottom: (@spacer / 4);
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+}
+
+
+//
+// Top footer
+//
+.footer__top {
+    background: @greyFooter;
+    padding: @spacer 0;
+
+    .menu {
+        margin-bottom: @spacer;
+
+        @media (@screen-sm) {
+            display: flex;
+            flex-flow: row wrap;
+            width: 70%;
+            float: left;
+        }
+    }
+
+    .menu-item {
+        @media (@screen-sm) {
+            flex: 0 0 33%;
+
+            a { display: block; }
+        }
+    }
+}
+
+
+//
+// Bottom footer
+//
+.footer__bottom {
+    .subfooterText;
+    padding: @spacer 0;
+
+    .menu {
+        margin-bottom: (@spacer/2);
+
+        @media (@screen-sm) {
+            float: left;
+            margin-bottom: 0;
+            margin-left: (@spacer/2);
+        }
+    }
+
+    .menu-item a {
+        .subfooterText;
+    }
+}
+
+
+//
+// Contact
+//
+.footer__contact {
+    @media (@screen-sm) {
+        width: 25%;
+        float: right;
+    }
+}
+
+
+//
+// Social links
+//
+.footer__social {
+    margin-top: (@spacer/2);
+
+    @media (@screen-sm) {
+        float: right;
+        margin-top: 0;
+    }
+
+    li { display: inline-block; }
+}
+
+
+.footer__eu {
+    width: 150px;
+    margin: 0 auto (@spacer/2) auto;
+
+    @media (@screen-sm) {
+        float: left;
+        margin: -15px 10px 0 0;
+    }
+}
+
+.footer__copyright {
+    margin-bottom: (@spacer/2);
+
+    @media (@screen-sm) {
+        margin-bottom: 0;
+        float: left;
+        padding: 3px 15px;
+    }
+}

assets/less/ascribe/_grid.less

@@ -0,0 +1,246 @@
+//
+// Grid
+// --------------
+// bigchain.io
+//
+// 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 {
+    .clearfix; // for legacy float usage reasons
+    max-width: @screen-lg-min;
+    margin: auto;
+    padding-left: @gutter-space;
+    padding-right: @gutter-space;
+}
+
+
+//
+// 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
+//
+.grid--gutters{
+    margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space));
+
+    > .grid__col {
+        padding: @gutter-space 0 0 @gutter-space;;
+    }
+}
+
+@media (@screen-sm) {
+    .grid-small--gutters {
+        margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space));
+
+        > .grid__col {
+            padding: @gutter-space 0 0 @gutter-space;
+        }
+    }
+}
+
+@media (@screen-md) {
+    .grid-medium--gutters {
+        margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space));
+
+        > .grid__col {
+            padding: @gutter-space 0 0 @gutter-space;
+        }
+    }
+}
+
+@media (@screen-lg) {
+    .grid-large--gutters {
+        margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space));
+
+        > .grid__col {
+            padding: @gutter-space 0 0 @gutter-space;
+        }
+    }
+}
+
+
+//
+// Columns
+//
+.grid--fit {
+    > .grid__col { flex: 1; }
+}
+
+.grid--full {
+    > .grid__col { flex: 0 0 100%; }
+}
+
+.grid--1of6 {
+    > .grid__col { flex: 0 0 16.5%; }
+}
+
+.grid--2of6,
+.grid--third {
+    > .grid__col { flex: 0 0 33%; }
+}
+
+.grid--3of6,
+.grid--half {
+    > .grid__col { flex: 0 0 50%; }
+}
+
+.grid--4of6 {
+    > .grid__col { flex: 0 0 66%; }
+}
+
+.grid--5of6 {
+    > .grid__col { flex: 0 0 82.5%; }
+}
+
+@media (@screen-sm) {
+    .grid-small--fit {
+        > .grid__col { flex: 1; }
+    }
+    .grid-small--full{
+        > .grid__col { flex: 0 0 100%; }
+    }
+    .grid-small--1of6 {
+        > .grid__col { flex: 0 0 16.5%; }
+    }
+    .grid-small--2of6,
+    .grid-small--third {
+        > .grid__col { flex: 0 0 33%; }
+    }
+    .grid-small--3of6,
+    .grid-small--half {
+        > .grid__col { flex: 0 0 50%; }
+    }
+    .grid-small--4of6 {
+        > .grid__col { flex: 0 0 66%; }
+    }
+    .grid-small--5of6 {
+        > .grid__col { flex: 0 0 82.5%; }
+    }
+}
+
+@media (@screen-md) {
+    .grid-medium--fit {
+        > .grid__col { flex: 1 }
+    }
+
+    .grid-medium--full {
+        > .grid__col { flex: 0 0 100%; }
+    }
+
+    .grid-medium--1of6 {
+        > .grid__col { flex: 0 0 16.5%; }
+    }
+
+    .grid-medium--2of6,
+    .grid-medium--third {
+        > .grid__col { flex: 0 0 33%; }
+    }
+
+    .grid-medium--3of6,
+    .grid-medium--half {
+        > .grid__col { flex: 0 0 50%; }
+    }
+
+    .grid-medium--4of6 {
+        > .grid__col { flex: 0 0 66%; }
+    }
+
+    .grid-medium--5of6 {
+        > .grid__col { flex: 0 0 82.5%; }
+    }
+}
+
+@media (@screen-lg) {
+    .grid-large--fit {
+        > .grid__col { flex: 1; }
+    }
+
+    .grid-large--full {
+        > .grid__col { flex: 0 0 100%; }
+    }
+
+    .grid-large--1of6 {
+        > .grid__col { flex: 0 0 16.5%; }
+    }
+
+    .grid-large--2of6,
+    .grid-large--third {
+        > .grid__col { flex: 0 0 33%; }
+    }
+
+    .grid-large--3of6,
+    .grid-large--half {
+        > .grid__col { flex: 0 0 50%; }
+    }
+
+    .grid-large--4of6 {
+        > .grid__col { flex: 0 0 66%; }
+    }
+
+    .grid-large--5of6 {
+        > .grid__col { flex: 0 0 82.5%; }
+    }
+}

assets/less/ascribe/_helpers.less

@@ -1,9 +1,3 @@
-// TERRITORIAL CSS HELPERS
-@tabletWidth: 768px;
-@middleWidth: 570px;
-@phoneWidth: 600px;
-@smallWidth: 400px;
-
 // CLEARFIX
 // Apply .clearfix to a non-floated container element with floated elements in it
 // to ensure the container has a height. Use .no-clearfix to reset a clearfix

assets/less/ascribe/_variables.less

@@ -5,21 +5,47 @@
 //
 
 // COLORS
-@blueDeep: #121417;
-@blueMedium: #003C69;
-@blueBright: #67C4DA;
-@blueLight: #d7e9ef;
-@pink: #D8127D;
+@blueDeep:             #121417;
+@blueMedium:           #003C69;
+@blueBright:           #67C4DA;
+@blueLight:            #d7e9ef;
+@pink:                 #D8127D;
 
-@white: #fff;
-@greyBg: #fbfbfb;
-@greySocial: #b8b8b8;
-@greyHr: #979797;
-@greyFooter: #8c8c8c;
-@greyText: #595959;
-@blackish: #1e1e1e;
-@black: #000;
+@white:                #fff;
+@greyBg:               #fbfbfb;
+@greySocial:           #b8b8b8;
+@greyHr:               #979797;
+@greyFooter:           #8c8c8c;
+@greyText:             #595959;
+@blackish:             #1e1e1e;
+@black:                #000;
 
 
 // SPACING
-@spacer:    40px;
+@spacer:              40px;
+
+
+//
+// Responsive breakpoints
+//
+@screen-xs-min:       400px;
+@screen-sm-min:       768px;
+@screen-md-min:       900px;
+@screen-lg-min:       1100px;
+
+@screen-sm:           ~'min-width: @{screen-sm-min}';
+@screen-md:           ~'min-width: @{screen-md-min}';
+@screen-lg:           ~'min-width: @{screen-lg-min}';
+
+// LEGACY
+// mostly used in conjunction with max-width media queries
+@smallWidth:          @screen-xs-min;
+@middleWidth:         570px;
+@phoneWidth:          600px;
+@tabletWidth:         @screen-sm-min;
+
+
+//
+// Grid
+//
+@gutter-space:              (@spacer * 2);

footer.php

@@ -160,24 +160,40 @@ if ($twitter) {
 
 
 ?>
+
+
 <div class="chevron-divider"></div>
-<footer>
-    <section class="top-footer">
-        <div class="centered-footer">
+
+
+<footer class="footer">
+
+    <section class="footer__top">
+        <div class="row">
+
+
             <?php wp_nav_menu( array( 'theme_location' => 'main-footer-menu', 'container' => false ) ); ?>
-            <div class="contact">
+
+            <div class="footer__contact">
                 <a href="<?php echo $consultLink; ?>" class="button small">Request information</a>
                 <div><?php echo $address; ?></div>
                 <div><a href="mailto:<?php echo $email; ?>"><?php echo $email; ?></a></div>
             </div>
+
         </div>
     </section>
-    <section class="bottom-footer">
-        <div class="centered-footer">
-            <div class="eu-fund"><img src="https://www.ascribe.io/wp-content/uploads/2015/11/eu-dev-fund.png" /></div>
-            <div class="copyright"><?php echo $year; ?> © ascribe GmbH</div>
+
+    <section class="footer__bottom">
+        <div class="row">
+
+            <div class="footer__eu">
+                <img width="150" src="https://www.ascribe.io/wp-content/uploads/2015/11/eu-dev-fund.png" />
+            </div>
+
+            <div class="footer__copyright"><?php echo $year; ?> © ascribe GmbH</div>
+
             <?php wp_nav_menu( array( 'theme_location' => 'lower-footer-menu', 'container' => false ) ); ?>
-            <ul class="social">
+
+            <ul class="footer__social">
                 <?php echo $facebook; ?>
                 <?php echo $github; ?>
                 <?php echo $instagram; ?>
@@ -187,9 +203,13 @@ if ($twitter) {
                 <?php echo $tumblr; ?>
                 <?php echo $twitter; ?>
             </ul>
+
         </div>
     </section>
-</footer>
+
+<footer>
+
+
 </div>
 <?php wp_footer(); ?>
 </body>

gulpfile.js

@@ -104,9 +104,9 @@ gulp.task('serve', function() {
     browser.init({
         proxy: PROXY
     });
-    gulp.watch([SRC + 'assets/less/**/*'], ['css']);
+    gulp.watch([SRC + 'assets/less/**/*'], ['css']).on('change', browser.reload);
     gulp.watch([SRC + 'assets/js/src/**/*'], ['js']);
-    gulp.watch(SRC + '**/*').on('change', browser.reload);
+    //gulp.watch(SRC + '**/*').on('change', browser.reload);
 });