From ceca213bfe8b1d7a5141d74f90f66a92f16bb1ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Tue, 26 Sep 2017 17:59:56 +0200 Subject: [PATCH] add and style footer, keep footer always on bottom of the viewport --- assets/stylesheets/footer.css | 66 +++++++++ assets/stylesheets/global.css | 15 +++ assets/stylesheets/header.css | 79 ++++++----- assets/stylesheets/style.css | 1 + public/images/app-store-badge.png | Bin 0 -> 5739 bytes public/images/google-play-badge.png | Bin 0 -> 7496 bytes public/stylesheets/style.css | 202 ++++++++++++++++++++++------ views/layout.pug | 93 ++++++++----- 8 files changed, 339 insertions(+), 117 deletions(-) create mode 100644 assets/stylesheets/footer.css create mode 100644 public/images/app-store-badge.png create mode 100644 public/images/google-play-badge.png diff --git a/assets/stylesheets/footer.css b/assets/stylesheets/footer.css new file mode 100644 index 0000000..a1696b6 --- /dev/null +++ b/assets/stylesheets/footer.css @@ -0,0 +1,66 @@ +#footer { + margin: var(--grid-gutter) 0; + padding-top: var(--grid-gutter); + + border-top: 2px solid var(--color-bg-separator); + + & .upper { + display: flex; + + & > * { + display: flex; + align-items: center; + } + + & .navigation { + flex: 1 0 auto; + font-size: 0.9em; + + & ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; + + & li { + margin: 0; + + & + li { + margin-left: calc(var(--grid-gutter) * 2); + } + } + } + } + + & .apps { + flex: 0 0 auto; + + & a { + display: inline-block; + width: 150px; + + & + a { + margin-left: var(--grid-gutter); + } + + & img { + width: 100%; + height: auto; + } + } + } + } + & .lower { + display: flex; + + & .disclaimer { + flex: 1 0 auto; + font-size: 0.7em; + color: var(--color-text-grey); + } + & .social { + flex: 0 0 auto; + } + } +} + diff --git a/assets/stylesheets/global.css b/assets/stylesheets/global.css index 8f42fd5..05880d8 100644 --- a/assets/stylesheets/global.css +++ b/assets/stylesheets/global.css @@ -6,6 +6,21 @@ body { line-height: var(--line-height); } +#main { + display: flex; + flex-direction: column; + min-height: 100vh; +} +#main__header { + flex: 0 0 auto; +} +#main__content { + flex: 1 0 auto; +} +#main__footer { + flex: 0 0 auto; +} + .wrapper { max-width: 1024px; margin: 0 auto; diff --git a/assets/stylesheets/header.css b/assets/stylesheets/header.css index b411ee2..85066c7 100644 --- a/assets/stylesheets/header.css +++ b/assets/stylesheets/header.css @@ -1,10 +1,9 @@ -.header { +#header { display: flex; flex-wrap: wrap; - - margin-top: var(--grid-gutter); + + margin: var(--grid-gutter) 0; padding-bottom: var(--grid-gutter); - margin-bottom: var(--grid-gutter); border-bottom: 2px solid var(--color-bg-separator); @@ -20,7 +19,7 @@ & .header__logo { align-items: center; - + @media (--breakpoint-desktop) { flex: 0 0 200px; } @@ -34,43 +33,8 @@ flex: 1 0 auto; } } -} -.header__navarea { - & form { - display: flex; - flex-wrap: wrap; - - @media (--breakpoint-desktop) { - justify-content: flex-end; - } - - & > * { - flex: 0 0 auto; - } - - & fieldset { - padding: 0.2em 1em; - margin: 0; - border: none; - background: var(--color-bg-grey); - color: var(--color-text-grey); - border-radius: var(--border-radius); - font-size: 0.8em; - - & + fieldset { - margin-left: var(--grid-gutter) - } - - & label + select { - margin-left: 0.5em; - } - } - } -} - -.navigation { - & nav { + & .navigation { & ul { display: flex; list-style: none; @@ -111,3 +75,36 @@ } } +.header__navarea { + & form { + display: flex; + flex-wrap: wrap; + + @media (--breakpoint-desktop) { + justify-content: flex-end; + } + + & > * { + flex: 0 0 auto; + } + + & fieldset { + padding: 0.2em 1em; + margin: 0; + border: none; + background: var(--color-bg-grey); + color: var(--color-text-grey); + border-radius: var(--border-radius); + font-size: 0.8em; + + & + fieldset { + margin-left: var(--grid-gutter) + } + + & label + select { + margin-left: 0.5em; + } + } + } +} + diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css index 5d8dafb..1a5b669 100644 --- a/assets/stylesheets/style.css +++ b/assets/stylesheets/style.css @@ -5,6 +5,7 @@ @import './typography'; @import './global'; @import './header'; +@import './footer'; @import './homepage'; @import './course'; diff --git a/public/images/app-store-badge.png b/public/images/app-store-badge.png new file mode 100644 index 0000000000000000000000000000000000000000..468918a4e7faf3fa7e5ec7e0e6407fc313ffb151 GIT binary patch literal 5739 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 literal 0 HcmV?d00001 diff --git a/public/images/google-play-badge.png b/public/images/google-play-badge.png new file mode 100644 index 0000000000000000000000000000000000000000..21efe64154ae9e68ab2b9712432790840f97ecae GIT binary patch literal 7496 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 literal 0 HcmV?d00001 diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 95b07f4..c99ca37 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -468,6 +468,35 @@ body { line-height: 1.5em; } +#main { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100vh; +} + +#main__header { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +#main__content { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} + +#main__footer { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + .wrapper { max-width: 1024px; margin: 0 auto; @@ -643,34 +672,31 @@ body { font-weight: bold; } -.header { +#header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; - - margin-top: 16px; - - margin-top: 1rem; + + margin: 16px 0; + margin: 1rem 0; padding-bottom: 16px; padding-bottom: 1rem; - margin-bottom: 16px; - margin-bottom: 1rem; border-bottom: 2px solid #f2f5f7; } @media (min-width: 700px) { - .header { + #header { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } -.header .header__logo, - .header .header__navarea { +#header .header__logo, + #header .header__navarea { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -679,7 +705,7 @@ body { flex: 0 0 100%; } -.header .header__logo { +#header .header__logo { -webkit-box-align: center; -ms-flex-align: center; align-items: center; @@ -687,14 +713,14 @@ body { @media (min-width: 700px) { - .header .header__logo { + #header .header__logo { -webkit-box-flex: 0; -ms-flex: 0 0 200px; flex: 0 0 200px; } } -.header .header__navarea { +#header .header__navarea { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; @@ -705,13 +731,60 @@ body { @media (min-width: 700px) { - .header .header__navarea { + #header .header__navarea { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } } +#header .navigation ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + list-style: none; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0; + padding: 0; +} + +@media (min-width: 700px) { + + #header .navigation ul { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } +} + +#header .navigation ul li { + margin: 0; +} + +#header .navigation ul li + li { + margin-left: 4px; + margin-left: 0.25rem; +} + +#header .navigation ul li a { + display: block; + text-transform: uppercase; + font-weight: bold; + padding: 0.7em 1em; + color: #8091a5; + border-radius: 3px; +} + +#header .navigation ul li a.active, + #header .navigation ul li a:hover { + background: #f7f9fa; +} + +#header .navigation ul li a.active { + color: #2a303a; +} + .header__navarea form { display: -webkit-box; display: -ms-flexbox; @@ -754,51 +827,94 @@ body { margin-left: 0.5em; } -.navigation nav ul { +#footer { + margin: 16px 0; + margin: 1rem 0; + padding-top: 16px; + padding-top: 1rem; + + border-top: 2px solid #f2f5f7 +} + +#footer .upper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#footer .upper > * { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#footer .upper .navigation { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + font-size: 0.9em; +} + +#footer .upper .navigation ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; - -ms-flex-wrap: wrap; - flex-wrap: wrap; margin: 0; padding: 0; } -@media (min-width: 700px) { - - .navigation nav ul { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - } -} - -.navigation nav ul li { +#footer .upper .navigation ul li { margin: 0; } -.navigation nav ul li + li { - margin-left: 4px; - margin-left: 0.25rem; +#footer .upper .navigation ul li + li { + margin-left: 32px; + margin-left: 2rem; } -.navigation nav ul li a { - display: block; - text-transform: uppercase; - font-weight: bold; - padding: 0.7em 1em; +#footer .upper .apps { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +#footer .upper .apps a { + display: inline-block; + width: 150px; +} + +#footer .upper .apps a + a { + margin-left: 16px; + margin-left: 1rem; +} + +#footer .upper .apps a img { + width: 100%; + height: auto; +} + +#footer .lower { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#footer .lower .disclaimer { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + font-size: 0.7em; color: #8091a5; - border-radius: 3px; } -.navigation nav ul li a.active, - .navigation nav ul li a:hover { - background: #f7f9fa; -} - -.navigation nav ul li a.active { - color: #2a303a; +#footer .lower .social { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } .hero { diff --git a/views/layout.pug b/views/layout.pug index 7b58bff..80e9acc 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -4,36 +4,63 @@ html title= title link(rel='stylesheet', href='/stylesheets/style.css') body - header.header.wrapper - section.header__logo - a.logo--link(href='#') - img(src='/images/logo.png' alt='Contentful University') - section.header__navarea - section.controls - form(action="." method="get") - fieldset - label(for='api') API type: - select(name='api' onChange='this.form.submit()') - option(value='CDA') Delivery API - option(value='CPA') Preview API - fieldset - label(for='locale') Language: - select(name='locale' onChange='this.form.submit()') - option(value='en-US') English - option(value='de-DE') German - section.navigation - nav - ul - li - a.active(href='/') Home - li - a(href='/courses') Courses - li - a(href='/categories') Categories - li - a(href='/about') About - li - a(href='/settings') Settings - li - a(href='/sitemap') Sitemap - block content + #main + #main__header + .wrapper + header#header + section.header__logo + a.logo--link(href='#') + img(src='/images/logo.png' alt='Contentful University') + section.header__navarea + section.controls + form(action="." method="get") + fieldset + label(for='api') API type: + select(name='api' onChange='this.form.submit()') + option(value='CDA') Delivery API + option(value='CPA') Preview API + fieldset + label(for='locale') Language: + select(name='locale' onChange='this.form.submit()') + option(value='en-US') English + option(value='de-DE') German + nav.navigation + ul + li + a.active(href='/') Home + li + a(href='/courses') Courses + li + a(href='/about') About + li + a(href='/settings') Settings + + #main__content + block content + + #main__footer + .wrapper + footer#footer + .upper + nav.navigation + ul + li + a.active(href='/') Home + li + a(href='/courses') Courses + li + a(href='/about') About + li + a(href='/settings') Settings + .apps + a(href='#') + img(src='/images/app-store-badge.png') + a(href='#') + img(src='/images/google-play-badge.png') + .lower + .disclaimer + p This website and the materials fond on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account. + .social + p + a(href='#') FB + a(href='#') TW