From 19cf4d1c5616de321d17b4471eeba8245ecd06ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Fri, 29 Sep 2017 13:21:23 +0200 Subject: [PATCH] replace screenshoted images with real ones plus style footer --- assets/stylesheets/footer.css | 52 ++++--- assets/stylesheets/global.css | 47 +++++- assets/stylesheets/header.css | 46 +----- assets/stylesheets/module-landing.css | 6 +- assets/stylesheets/variables.css | 3 +- public/images/app-store-badge.png | Bin 5739 -> 0 bytes public/images/badge-app-store.svg | 14 ++ public/images/badge-google-play.svg | 41 ++++++ public/images/google-play-badge.png | Bin 7496 -> 0 bytes public/images/icon-facebook.svg | 6 + public/images/icon-info.svg | 6 + public/images/icon-twitter.svg | 6 + public/images/logo.png | Bin 2444 -> 0 bytes public/images/logo.svg | 17 +++ public/stylesheets/style.css | 201 ++++++++++++++------------ views/layout.pug | 20 ++- 16 files changed, 290 insertions(+), 175 deletions(-) delete mode 100644 public/images/app-store-badge.png create mode 100644 public/images/badge-app-store.svg create mode 100644 public/images/badge-google-play.svg delete mode 100644 public/images/google-play-badge.png create mode 100644 public/images/icon-facebook.svg create mode 100644 public/images/icon-info.svg create mode 100644 public/images/icon-twitter.svg delete mode 100644 public/images/logo.png create mode 100644 public/images/logo.svg 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 468918a4e7faf3fa7e5ec7e0e6407fc313ffb151..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5739 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 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 21efe64154ae9e68ab2b9712432790840f97ecae..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7496 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 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 0b3607e0af39c27659d99e8df21f5e03aa3e6751..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2444 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 KMNUMnLSTZ|Mswl- 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();