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:
parent
f22be5802d
commit
1331c0b595
44
_src/_assets/scss/_footer.scss
Normal file
44
_src/_assets/scss/_footer.scss
Normal 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;
|
||||
}
|
@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 55em;
|
||||
max-width: 55rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: $spacer;
|
||||
|
@ -1,5 +1,3 @@
|
||||
$edge-height: $spacer * 4;
|
||||
|
||||
.header {
|
||||
background: $brand-05;
|
||||
padding-top: $spacer * 2;
|
||||
|
@ -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 {
|
||||
|
@ -60,9 +60,6 @@
|
||||
//
|
||||
// Section modifiers
|
||||
//
|
||||
$edge-height-sm: $spacer * 2;
|
||||
$edge-height: $spacer * 4;
|
||||
|
||||
.section--background {
|
||||
background: $brand-05;
|
||||
position: relative;
|
||||
|
@ -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;
|
||||
|
@ -10,8 +10,9 @@
|
||||
@import 'media';
|
||||
@import 'icons';
|
||||
@import 'sections';
|
||||
@import 'header';
|
||||
@import 'menus';
|
||||
@import 'header';
|
||||
@import 'footer';
|
||||
@import 'logo';
|
||||
@import 'caretakers';
|
||||
@import 'board';
|
||||
|
@ -1,4 +1,4 @@
|
||||
name: "IPDB Foundation e.V."
|
||||
company: "IPDB Foundation e.V."
|
||||
address:
|
||||
street: "Wichertstraße 14a"
|
||||
zip: "10439"
|
||||
|
@ -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"
|
||||
|
@ -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/
|
||||
|
@ -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">© {{ 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>
|
||||
|
@ -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>
|
||||
|
49
_src/_includes/menu-footer.html
Normal file
49
_src/_includes/menu-footer.html
Normal 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>
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user