1
0
mirror of https://github.com/ipdb/website.git synced 2024-11-22 01:26:52 +01:00

main footer style

This commit is contained in:
Matthias Kretschmann 2017-08-30 19:52:14 +02:00
parent f22be5802d
commit 1331c0b595
Signed by: m
GPG Key ID: 606EEEF3C479A91F
14 changed files with 196 additions and 58 deletions

View File

@ -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;
}

View File

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

View File

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

View File

@ -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 {

View File

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

View File

@ -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;

View File

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

View File

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

View File

@ -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"

View File

@ -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/

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>