Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add and style footer, keep footer always on bottom of the viewport

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-09-26 17:59:56 +02:00
committed by Benedikt Rötsch
parent 500b103c03
commit ceca213bfe
8 changed files with 339 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
assets/stylesheets/footer.css Normal file
View File

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

15
assets/stylesheets/global.css
View File

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

79
assets/stylesheets/header.css
View File

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

1
assets/stylesheets/style.css
View File

@@ -5,6 +5,7 @@
@import './typography';
@import './global';
@import './header';
@import './footer';
@import './homepage';
@import './course';

BIN
public/images/app-store-badge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
public/images/google-play-badge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

202
public/stylesheets/style.css
View File

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

93
views/layout.pug
View File

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