diff --git a/assets/stylesheets/footer.css b/assets/stylesheets/footer.css index 0cc2f43..b37e259 100644 --- a/assets/stylesheets/footer.css +++ b/assets/stylesheets/footer.css @@ -1,11 +1,13 @@ @block footer { - margin: var(--grid-gutter) 0; + margin-top: var(--grid-gutter) 0; padding-top: var(--grid-gutter); - border-top: 2px solid var(--color-bg-separator); - @element upper { display: flex; + flex-wrap: wrap; + min-height: 80px; + + border-bottom: 2px solid var(--color-bg-separator); & > * { display: flex; @@ -14,31 +16,20 @@ } @element 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); - } - } - } + flex: 1 1 auto; } @element apps { - flex: 0 0 auto; + flex: 1 0 auto; + justify-content: center; + + @media (--breakpoint-desktop) { + justify-content: flex-end; + } & a { display: inline-block; - width: 150px; + width: 138px; & + a { margin-left: var(--grid-gutter); @@ -53,16 +44,31 @@ @element lower { display: flex; + min-height: 80px; } @element disclaimer { - flex: 1 0 auto; + flex: 1 1 auto; + display: flex; + align-items: center; font-size: 0.7em; color: var(--color-text-grey); } @element social { flex: 0 0 auto; + display: flex; + align-items: center; + padding: 0 var(--grid-gutter); + + & a + a { + margin-left: var(--grid-gutter); + } + + & img { + width: 24px; + height: auto; + } } } diff --git a/assets/stylesheets/global.css b/assets/stylesheets/global.css index 3f07e1c..b0d899f 100644 --- a/assets/stylesheets/global.css +++ b/assets/stylesheets/global.css @@ -22,13 +22,9 @@ body { } .wrapper { - max-width: 1024px; + max-width: var(--content-max-width); margin: 0 auto; padding: 0 2vw; - - @media (--breakpoint-desktop) { - padding: 0; - } } @block wrapper-with-sidebar { @@ -151,3 +147,44 @@ body { } } } + +@block main-navigation { + & ul { + display: flex; + list-style: none; + flex-wrap: wrap; + justify-content: center; + margin: 0; + padding: 0; + + @media (--breakpoint-desktop) { + justify-content: flex-end; + } + + & li { + margin: 0; + + & + li { + margin-left: calc(var(--grid-gutter) / 4); + } + + & a { + display: block; + text-transform: uppercase; + font-weight: bold; + padding: 0.7em 1em; + color: var(--color-text-grey); + border-radius: var(--border-radius); + + &.active, + &:hover { + background: var(--color-bg-grey); + } + + &.active { + color: var(--color-text-default); + } + } + } + } + } diff --git a/assets/stylesheets/header.css b/assets/stylesheets/header.css index 1f0c27d..64cd15d 100644 --- a/assets/stylesheets/header.css +++ b/assets/stylesheets/header.css @@ -19,6 +19,12 @@ @media (--breakpoint-desktop) { flex: 0 0 200px; } + + & img { + width: 100%; + height: auto; + max-width: 169px; + } } @element navarea { @@ -33,46 +39,6 @@ } } - @element navigation { - & ul { - display: flex; - list-style: none; - flex-wrap: wrap; - margin: 0; - padding: 0; - - @media (--breakpoint-desktop) { - justify-content: flex-end; - } - - & li { - margin: 0; - - & + li { - margin-left: calc(var(--grid-gutter) / 4); - } - - & a { - display: block; - text-transform: uppercase; - font-weight: bold; - padding: 0.7em 1em; - color: var(--color-text-grey); - border-radius: var(--border-radius); - - &.active, - &:hover { - background: var(--color-bg-grey); - } - - &.active { - color: var(--color-text-default); - } - } - } - } - } - @element navarea { & form { display: flex; diff --git a/assets/stylesheets/module-landing.css b/assets/stylesheets/module-landing.css index 58d45f5..a2f36ec 100644 --- a/assets/stylesheets/module-landing.css +++ b/assets/stylesheets/module-landing.css @@ -1,12 +1,8 @@ .module { - max-width: 1024px; + max-width: var(--content-max-width); margin: 0 auto; padding: 0 2vw; - @media (--breakpoint-desktop) { - padding: 0; - } - & img { width: 100%; height: auto; diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css index 980c828..9d5492f 100644 --- a/assets/stylesheets/variables.css +++ b/assets/stylesheets/variables.css @@ -1,6 +1,7 @@ @custom-media --breakpoint-desktop (min-width: 700px); :root { + --content-max-width: 980px; --grid-gutter: 22px; --border-radius: 3px; @@ -15,7 +16,7 @@ --color-bg-default: #fff; --color-bg-grey: #f7f9fa; - --color-bg-separator: #f2f5f7; + --color-bg-separator: #e5ebed; --color-sidebar-bg: #f7f9fa; diff --git a/public/images/app-store-badge.png b/public/images/app-store-badge.png deleted file mode 100644 index 468918a..0000000 Binary files a/public/images/app-store-badge.png and /dev/null differ diff --git a/public/images/badge-app-store.svg b/public/images/badge-app-store.svg new file mode 100644 index 0000000..9f35016 --- /dev/null +++ b/public/images/badge-app-store.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/images/badge-google-play.svg b/public/images/badge-google-play.svg new file mode 100644 index 0000000..c10a543 --- /dev/null +++ b/public/images/badge-google-play.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/google-play-badge.png b/public/images/google-play-badge.png deleted file mode 100644 index 21efe64..0000000 Binary files a/public/images/google-play-badge.png and /dev/null differ diff --git a/public/images/icon-facebook.svg b/public/images/icon-facebook.svg new file mode 100644 index 0000000..7ca4776 --- /dev/null +++ b/public/images/icon-facebook.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/icon-info.svg b/public/images/icon-info.svg new file mode 100644 index 0000000..bd6c3dc --- /dev/null +++ b/public/images/icon-info.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/icon-twitter.svg b/public/images/icon-twitter.svg new file mode 100644 index 0000000..bc826a4 --- /dev/null +++ b/public/images/icon-twitter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/logo.png b/public/images/logo.png deleted file mode 100644 index 0b3607e..0000000 Binary files a/public/images/logo.png and /dev/null differ diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 0000000..b37440f --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + example app + + + The + + + + diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 866dfbe..781a5c8 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -846,18 +846,11 @@ body { } .wrapper { - max-width: 1024px; + max-width: 980px; margin: 0 auto; padding: 0 2vw; } -@media (min-width: 700px) { - - .wrapper { - padding: 0; - } -} - @media (min-width: 700px) { .wrapper-with-sidebar { @@ -1012,6 +1005,55 @@ body { font-weight: bold; } +.main-navigation ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + list-style: none; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin: 0; + padding: 0; +} + +@media (min-width: 700px) { + + .main-navigation ul { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } +} + +.main-navigation ul li { + margin: 0; +} + +.main-navigation ul li + li { + margin-left: 5.5px; +} + +.main-navigation ul li a { + display: block; + text-transform: uppercase; + font-weight: bold; + padding: 0.7em 1em; + color: #8091a5; + border-radius: 3px; +} + +.main-navigation ul li a.active, + .main-navigation ul li a:hover { + background: #f7f9fa; +} + +.main-navigation ul li a.active { + color: #2a303a; +} + .header { display: -webkit-box; display: -ms-flexbox; @@ -1022,7 +1064,7 @@ body { margin: 22px 0; padding-bottom: 22px; - border-bottom: 2px solid #f2f5f7; + border-bottom: 2px solid #e5ebed; } @media (min-width: 700px) { @@ -1054,6 +1096,12 @@ body { } } +.header__logo img { + width: 100%; + height: auto; + max-width: 169px; +} + .header__navarea { display: -webkit-box; display: -ms-flexbox; @@ -1079,52 +1127,6 @@ body { } } -.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: 5.5px; -} - -.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; @@ -1174,16 +1176,19 @@ body { } .footer { - margin: 22px 0; + margin-top: 22px 0; padding-top: 22px; - - border-top: 2px solid #f2f5f7; } .footer__upper { display: -webkit-box; display: -ms-flexbox; display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + min-height: 80px; + + border-bottom: 2px solid #e5ebed; } .footer__upper > * { @@ -1197,37 +1202,31 @@ body { .footer__navigation { -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - font-size: 0.9em; -} - -.footer__navigation ul { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - list-style: none; - margin: 0; - padding: 0; -} - -.footer__navigation ul li { - margin: 0; -} - -.footer__navigation ul li + li { - margin-left: 44px; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } .footer__apps { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +@media (min-width: 700px) { + + .footer__apps { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } } .footer__apps a { display: inline-block; - width: 150px; + width: 138px; } .footer__apps a + a { @@ -1243,12 +1242,19 @@ body { display: -webkit-box; display: -ms-flexbox; display: flex; + min-height: 80px; } .footer__disclaimer { -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; font-size: 0.7em; color: #8091a5; } @@ -1257,6 +1263,22 @@ body { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 22px; +} + +.footer__social a + a { + margin-left: 22px; +} + +.footer__social img { + width: 24px; + height: auto; } .course-card { @@ -1323,16 +1345,9 @@ body { } .module { - max-width: 1024px; + max-width: 980px; margin: 0 auto; - padding: 0 2vw; -} - -@media (min-width: 700px) { - - .module { - padding: 0; - } + padding: 0 2vw } .module img { diff --git a/views/layout.pug b/views/layout.pug index fc3c18d..8243127 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -10,7 +10,7 @@ html header.header section.header__logo a.header__logo-link(href='#') - img(src='/images/logo.png' alt='Contentful University') + img(src='/images/logo.svg' alt='Contentful Example App') section.header__navarea section.header__controls form(action="" method="get") @@ -24,7 +24,7 @@ html select(name='locale' onChange='this.form.submit()') option(value='en-US' selected=query.locale === 'en-US') English option(value='de-DE' selected=query.locale === 'de-DE') German - nav.header__navigation + nav.header__navigation.main-navigation ul li a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home @@ -42,7 +42,7 @@ html .wrapper footer.footer .footer__upper - nav.footer__navigation + nav.footer__navigation.main-navigation ul li a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home @@ -54,15 +54,19 @@ html a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings .footer__apps a(href='#') - img(src='/images/app-store-badge.png') + img(src='/images/badge-app-store.svg') a(href='#') - img(src='/images/google-play-badge.png') + img(src='/images/badge-google-play.svg') .footer__lower .footer__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. + p + span This website and the materials found on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account. + a(href='#todo') View details. .footer__social p - a(href='#') FB - a(href='#') TW + a(href='https://www.facebook.com/contentful/' target='_blank') + img(src='/images/icon-facebook.svg' alt='Our Facebook profile') + a(href='https://twitter.com/contentful' target='_blank') + img(src='/images/icon-twitter.svg' alt='Our Twitter profile') script(src='/scripts/highlight.pack.js') script hljs.initHighlightingOnLoad();