main footer style

_src/_assets/scss/_footer.scss

@@ -0,0 +1,44 @@
+.footer {
+    color: $brand-05;
+    position: relative;
+    background: $brand-04;
+    padding-top: $spacer * 2;
+    margin-top: $edge-height-sm;
+
+    @media ($screen-sm) {
+        margin-top: $edge-height;
+    }
+
+    &:before {
+        content: '';
+        width: 100%;
+        height: $edge-height-sm;
+        display: block;
+        position: absolute;
+        left: 0;
+        background: $brand-04;
+        top: -($edge-height-sm);
+        clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+
+        @media ($screen-sm) {
+            height: $edge-height;
+            top: -($edge-height);
+        }
+    }
+}
+
+.footer__copyright {
+    font-size: $font-size-mini;
+    width: 100%;
+    opacity: .8;
+
+    .row {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+.footer__title {
+    font-size: $font-size-base;
+    color: $brand-02;
+}

_src/_assets/scss/_grid.scss

@@ -36,7 +36,7 @@
 }
 
 .row {
-    max-width: 55em;
+    max-width: 55rem;
     margin-left: auto;
     margin-right: auto;
     padding-left: $spacer;

_src/_assets/scss/_header.scss

@@ -1,5 +1,3 @@
-$edge-height: $spacer * 4;
-
 .header {
     background: $brand-05;
     padding-top: $spacer * 2;

_src/_assets/scss/_menus.scss

@@ -133,7 +133,52 @@
 
 .menu--footer {
     padding-top: $spacer * 2;
+
+    .logo {
+        fill: $brand-05;
+    }
+
+    .menu__link {
+        color: $brand-05;
+        display: block;
+        padding-top: $spacer / 4;
+        padding-bottom: $spacer / 4;
+
+        &:after { display: none; }
+    }
+
+    .social {
+        display: flex;
+        justify-content: space-between;
+        margin-top: $spacer;
+    }
+
+    .social-link {
+        display: block;
+        border: 1.5px solid $brand-02;
+        border-radius: $border-radius;
+        padding: $spacer / 2;
+        width: 2rem;
+        height: 2rem;
+        line-height: 1;
+
+        svg {
+            fill: $brand-05;
+
+        }
+    }
+}
+
+
+.menu--legal {
     padding-bottom: $spacer * 2;
+
+    .menu__link {
+        color: $brand-05;
+        font-size: $font-size-mini;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
 }
 
 .menu--sub {

_src/_assets/scss/_sections.scss

@@ -60,9 +60,6 @@
 //
 // Section modifiers
 //
-$edge-height-sm: $spacer * 2;
-$edge-height:    $spacer * 4;
-
 .section--background {
     background: $brand-05;
     position: relative;

_src/_assets/scss/_variables.scss

@@ -66,25 +66,21 @@ $screen-lg:                 'min-width: #{$screen-lg-min}';
 //
 $btn-font-family:                inherit;
 $btn-font-weight:                $font-weight-bold !default;
-
 $btn-padding-x:                  2rem !default;
 $btn-padding-y:                  .5rem !default;
-
 $btn-padding-x-sm:               1.5rem !default;
 $btn-padding-y-sm:               .3rem !default;
-
 $btn-padding-x-lg:               3rem !default;
 $btn-padding-y-lg:               .7rem !default;
-
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-01 !default;
-
 $btn-secondary-color:            #fff !default;
 $btn-secondary-bg:               $brand-04 !default;
-
-$btn-dark-color:                #fff !default;
-$btn-dark-bg:                   $brand-03 !default;
-
+$btn-dark-color:                 #fff !default;
+$btn-dark-bg:                    $brand-03 !default;
 $btn-link-disabled-color:        $brand-05 !default;
-
 $btn-border-radius:              10rem !default;
+
+
+$edge-height-sm:                 $spacer * 2 !default;
+$edge-height:                    $spacer * 4 !default;

_src/_assets/scss/ipdb.scss

@@ -10,8 +10,9 @@
 @import 'media';
 @import 'icons';
 @import 'sections';
-@import 'header';
 @import 'menus';
+@import 'header';
+@import 'footer';
 @import 'logo';
 @import 'caretakers';
 @import 'board';

_src/_data/contact.yml

@@ -1,4 +1,4 @@
-name: "IPDB Foundation e.V."
+company: "IPDB Foundation e.V."
 address:
     street: "Wichertstraße 14a"
     zip: "10439"

_src/_data/content-front.yml

@@ -71,4 +71,3 @@ connect:
     blog_title: "From the blog"
     newsletter_title: "Newsletter"
     newsletter_text: "Our email newsletter will keep you informed of major developments."
-    social_title: "Follow us"

_src/_data/menus.yml

@@ -3,5 +3,15 @@ main:
       url: /foundation/
     - title: Contact
       url: /contact/
+
+footer:
     - title: Style guide
       url: /styleguide/
+
+legal:
+    - title: Terms
+      url: /terms/
+    - title: Privacy
+      url: /privacy/
+    - title: Imprint
+      url: /imprint/

_src/_includes/footer.html

@@ -1,10 +1,26 @@
 <footer class="footer">
     <div class="row">
 
-        <nav class="menu menu--footer">
-            {% for page in site.pages %}
-                <a class="menu__link" href="{{ page.url }}">{{ page.title }}</a>
-            {% endfor %}
-        </nav>
+        {% include menu-footer.html %}
+
+    </div>
+
+    <div class="footer__copyright">
+        <div class="row">
+            <div class="copyright">&copy; {{ site.time | date: "%Y" }} {{ site.data.contact.company }}</div>
+
+            <nav class="menu--legal">
+                {% 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 }}" href="{{ link.url }}">{{ link.title }}</a>
+
+                {% endfor %}
+            </nav>
+        </div>
     </div>
 </footer>

_src/_includes/form-contact.html

@@ -29,7 +29,7 @@
         {% assign contact = site.data.contact %}
 
         <div class="company">
-            <h4 class="company__name">{{ contact.name }}</h4>
+            <h4 class="company__name">{{ contact.company }}</h4>
             <p>
                 <a href="mailto:{{ contact.email }}">{{ contact.email }}</a>
             </p>

_src/_includes/menu-footer.html

@@ -0,0 +1,49 @@
+<nav class="menu menu--footer">
+    <div class="grid grid--full grid-small--fit grid--gutters">
+
+        <div class="grid__col">
+            <a class="menu__logo" href="/">
+                <svg class="logo" 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 %}
+                {% assign active = nil %}
+                {% if page.url contains link.url %}
+                    {% assign active = 'active' %}
+                {% endif %}
+
+                <a class="menu__link {{ active }}" href="{{ link.url }}">{{ link.title }}</a>
+            {% endfor %}
+        </div>
+
+        <div class="grid__col">
+            {% for link in site.data.menus.footer %}
+                {% assign active = nil %}
+                {% if page.url contains link.url %}
+                    {% assign active = 'active' %}
+                {% endif %}
+
+                <a class="menu__link {{ active }}" href="{{ link.url }}">{{ link.title }}</a>
+            {% endfor %}
+        </div>
+
+        <div class="grid__col">
+            <h2 class="footer__title">Follow us</h2>
+            <div class="social">
+                {% for item in site.data.contact.social %}
+                    <a class="social-link" href="{{ item.link }}" title="{{ item.name }}">
+                        <svg class="icon" aria-labelledby="title">
+                            <title>{{ item.name }}</title>
+                            <use xlink:href="/assets/img/sprite.svg#icon-{{ item.name | downcase }}"></use>
+                        </svg>
+                    </a>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</nav>

_src/index.html

@@ -179,10 +179,22 @@ css: page-front
 
 <section class="section section--connect">
     <div class="row">
-        <header class="section__header">
-            <h1 class="section__title">{{ content.connect.title }}</h1>
-            <p class="section__description">{{ content.connect.description }}</p>
-        </header>
+        <div class="grid grid--full grid-small--half grid--gutters">
+            <div class="grid__col">
+                <header class="section__header">
+                    <h1 class="section__title">{{ content.connect.title }}</h1>
+                    <p class="section__description">{{ content.connect.description }}</p>
+                </header>
+            </div>
+            <div class="grid__col">
+                <div class="connect connect--newsletter">
+                    <h2 class="connect__title">{{ content.connect.newsletter_title }}</h2>
+                    <p>{{ content.connect.newsletter_text }}</p>
+
+                    {% include form-newsletter.html %}
+                </div>
+            </div>
+        </div>
 
         <div class="connect connect--blog">
             <h2 class="connect__title">{{ content.connect.blog_title }}</h2>
@@ -205,34 +217,5 @@ css: page-front
             </div>
         </div>
 
-        <div class="grid grid--full grid-small--half grid--gutters">
-            <div class="grid__col">
-                <div class="connect connect--newsletter">
-                    <h2 class="connect__title">{{ content.connect.newsletter_title }}</h2>
-                    <p>{{ content.connect.newsletter_text }}</p>
-
-                    {% include form-newsletter.html %}
-                </div>
-            </div>
-            <div class="grid__col">
-                <div class="connect connect--social">
-                    <h2 class="connect__title">{{ content.connect.social_title }}</h2>
-
-                    <ul class="social-list">
-                        {% for item in site.data.contact.social %}
-                            <li>
-                                <a href="{{ item.link }}" title="{{ item.name }}">
-                                    <svg class="icon" aria-labelledby="title">
-                                        <title>{{ item.name }}</title>
-                                        <use xlink:href="/assets/img/sprite.svg#icon-{{ item.name | downcase }}"></use>
-                                    </svg>
-                                </a>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </div>
-            </div>
-        </div>
-
     </div>
 </section>