From bf1e00c1e9edf16bd2a3dc8328fe8dbebef16227 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Mon, 2 Oct 2017 15:10:24 +0200 Subject: [PATCH] split up layout and global file and clean up markup --- assets/stylesheets/course/index.css | 2 +- assets/stylesheets/global/fonts.css | 48 +++++ assets/stylesheets/global/index.css | 107 +--------- assets/stylesheets/global/layout.css | 65 ------- assets/stylesheets/global/main-navigation.css | 40 ++++ assets/stylesheets/global/sidebar-menu.css | 20 ++ .../stylesheets/global/table-of-contents.css | 39 ++++ assets/stylesheets/layout/grid-lists.css | 29 +++ assets/stylesheets/layout/index.css | 3 + assets/stylesheets/layout/layout-centered.css | 5 + assets/stylesheets/layout/layout-sidebar.css | 43 +++++ assets/stylesheets/style.css | 2 + assets/stylesheets/variables.css | 3 +- public/stylesheets/style.css | 182 +++++++++++++----- views/about.pug | 2 +- views/categories.pug | 2 +- views/course.pug | 9 +- views/courses.pug | 25 +-- views/error.pug | 2 +- views/layout.pug | 6 +- views/settings.pug | 2 +- views/sitemap.pug | 2 +- 22 files changed, 395 insertions(+), 243 deletions(-) create mode 100755 assets/stylesheets/global/fonts.css delete mode 100644 assets/stylesheets/global/layout.css create mode 100644 assets/stylesheets/global/main-navigation.css create mode 100644 assets/stylesheets/global/sidebar-menu.css create mode 100644 assets/stylesheets/global/table-of-contents.css create mode 100644 assets/stylesheets/layout/grid-lists.css create mode 100644 assets/stylesheets/layout/index.css create mode 100644 assets/stylesheets/layout/layout-centered.css create mode 100644 assets/stylesheets/layout/layout-sidebar.css diff --git a/assets/stylesheets/course/index.css b/assets/stylesheets/course/index.css index b1e29fe..473a258 100644 --- a/assets/stylesheets/course/index.css +++ b/assets/stylesheets/course/index.css @@ -1 +1 @@ -@include './card' +@import './card'; diff --git a/assets/stylesheets/global/fonts.css b/assets/stylesheets/global/fonts.css new file mode 100755 index 0000000..83de58f --- /dev/null +++ b/assets/stylesheets/global/fonts.css @@ -0,0 +1,48 @@ +@font-face { + font-family: 'roboto'; + src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'), + url('/fonts/roboto-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + + +@font-face { + font-family: 'roboto'; + src: url('/fonts/roboto-italic-webfont.woff2') format('woff2'), + url('/fonts/roboto-italic-webfont.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'roboto'; + src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'), + url('/fonts/roboto-bold-webfont.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'roboto'; + src: url('/fonts/roboto-bolditalic-webfont.woff2') format('woff2'), + url('/fonts/roboto-bolditalic-webfont.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'robotomedium'; + src: url('/fonts/roboto-medium-webfont.woff2') format('woff2'), + url('/fonts/roboto-medium-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'robotomedium'; + src: url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'), + url('/fonts/roboto-mediumitalic-webfont.woff') format('woff'); + font-weight: normal; + font-style: italic; +} diff --git a/assets/stylesheets/global/index.css b/assets/stylesheets/global/index.css index ffc7809..1e3a86a 100644 --- a/assets/stylesheets/global/index.css +++ b/assets/stylesheets/global/index.css @@ -1,7 +1,10 @@ -@import './layout'; @import './header'; @import './footer'; +@import './table-of-contents'; +@import './sidebar-menu'; +@import './main-navigation'; + body { background-color: var(--color-bg-default); color: var(--color-text-default); @@ -24,105 +27,3 @@ body { #main__footer { flex: 0 0 auto; } - -.table-of-contents { - & ul { - list-style: none; - margin: var(--grid-gutter) 0; - padding: 0; - padding-left: calc(var(--grid-gutter) * 2); - - & li { - margin: 0 0 var(--grid-gutter); - padding: 0; - } - - & a { - display: block; - - &.active { - position: relative; - font-weight: bold; - - &:before, - &:after { - position: absolute; - top: 0; - } - &:before { - content: ''; - left: calc(var(--grid-gutter) * 3 * -1); - bottom: 0; - width: 3px; - background: var(--color-course-active); - } - &:after { - content: '👁'; - left: calc(var(--grid-gutter) * 2 * -1); - } - } - } - } -} - -.sidebar-menu { - & ul { - list-style: none; - margin: var(--grid-gutter) 0; - padding: 0; - - & li { - margin: 0 0 var(--grid-gutter); - padding: 0; - } - - & a { - display: block; - - &.active { - font-weight: bold; - } - } - } -} - -@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/global/layout.css b/assets/stylesheets/global/layout.css deleted file mode 100644 index be6ce0a..0000000 --- a/assets/stylesheets/global/layout.css +++ /dev/null @@ -1,65 +0,0 @@ -.wrapper { - max-width: var(--content-max-width); - margin: 0 auto; - padding: 0 2vw; -} - -@block wrapper-with-sidebar { - @media (--breakpoint-desktop) { - display: flex; - align-items: flex-start; - } - - @element sidebar { - @media (--breakpoint-desktop) { - flex: 0 0 220px; - padding: var(--grid-gutter); - border-radius: 7px; - box-shadow: var(--card-box-shadow); - - & > h2 { - margin-bottom: calc(var(--grid-gutter) * 3); - } - } - } - - @element content { - padding: var(--grid-gutter) 0; - - @media (--breakpoint-desktop) { - flex: 1 1 auto; - margin-left: var(--grid-gutter); - overflow: hidden; - } - } -} - -.grid-list { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin: 0 calc(var(--grid-gutter) / 2 * -1); - - & > * { - box-sizing: border-box; - margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter); - flex: 0 0 calc(50% - var(--grid-gutter)); - - @media (--breakpoint-desktop) { - flex: 0 0 calc(33% - var(--grid-gutter)); - } - } -} - -.grid-list-small { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin: 0 calc(var(--grid-gutter) / 2 * -1); - - & > * { - box-sizing: border-box; - margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter); - flex: 0 0 calc(50% - var(--grid-gutter)); - } -} diff --git a/assets/stylesheets/global/main-navigation.css b/assets/stylesheets/global/main-navigation.css new file mode 100644 index 0000000..5095169 --- /dev/null +++ b/assets/stylesheets/global/main-navigation.css @@ -0,0 +1,40 @@ +@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/global/sidebar-menu.css b/assets/stylesheets/global/sidebar-menu.css new file mode 100644 index 0000000..36dffd5 --- /dev/null +++ b/assets/stylesheets/global/sidebar-menu.css @@ -0,0 +1,20 @@ +.sidebar-menu { + & ul { + list-style: none; + margin: var(--grid-gutter) 0; + padding: 0; + + & li { + margin: 0 0 var(--grid-gutter); + padding: 0; + } + + & a { + display: block; + + &.active { + font-weight: bold; + } + } + } +} diff --git a/assets/stylesheets/global/table-of-contents.css b/assets/stylesheets/global/table-of-contents.css new file mode 100644 index 0000000..87822bd --- /dev/null +++ b/assets/stylesheets/global/table-of-contents.css @@ -0,0 +1,39 @@ +.table-of-contents { + & ul { + list-style: none; + margin: var(--grid-gutter) 0; + padding: 0; + padding-left: calc(var(--grid-gutter) * 2); + + & li { + margin: 0 0 var(--grid-gutter); + padding: 0; + } + + & a { + display: block; + + &.active { + position: relative; + font-weight: bold; + + &:before, + &:after { + position: absolute; + top: 0; + } + &:before { + content: ''; + left: calc(var(--grid-gutter) * 3 * -1); + bottom: 0; + width: 3px; + background: var(--color-course-active); + } + &:after { + content: '👁'; + left: calc(var(--grid-gutter) * 2 * -1); + } + } + } + } +} diff --git a/assets/stylesheets/layout/grid-lists.css b/assets/stylesheets/layout/grid-lists.css new file mode 100644 index 0000000..0f04eeb --- /dev/null +++ b/assets/stylesheets/layout/grid-lists.css @@ -0,0 +1,29 @@ +.grid-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 calc(var(--grid-gutter) / 2 * -1); + + & > * { + box-sizing: border-box; + margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter); + flex: 0 0 calc(50% - var(--grid-gutter)); + + @media (--breakpoint-desktop) { + flex: 0 0 calc(33% - var(--grid-gutter)); + } + } +} + +.grid-list-small { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 calc(var(--grid-gutter) / 2 * -1); + + & > * { + box-sizing: border-box; + margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter); + flex: 0 0 calc(50% - var(--grid-gutter)); + } +} diff --git a/assets/stylesheets/layout/index.css b/assets/stylesheets/layout/index.css new file mode 100644 index 0000000..4fdac98 --- /dev/null +++ b/assets/stylesheets/layout/index.css @@ -0,0 +1,3 @@ +@import 'layout-centered'; +@import 'layout-sidebar'; +@import 'grid-lists'; diff --git a/assets/stylesheets/layout/layout-centered.css b/assets/stylesheets/layout/layout-centered.css new file mode 100644 index 0000000..d8fc6a5 --- /dev/null +++ b/assets/stylesheets/layout/layout-centered.css @@ -0,0 +1,5 @@ +@block layout-centered { + max-width: var(--content-max-width); + margin: 0 auto; + padding: 0 2vw; +} diff --git a/assets/stylesheets/layout/layout-sidebar.css b/assets/stylesheets/layout/layout-sidebar.css new file mode 100644 index 0000000..a0362c7 --- /dev/null +++ b/assets/stylesheets/layout/layout-sidebar.css @@ -0,0 +1,43 @@ +@block layout-sidebar { + padding: 0 2vw; + max-width: var(--content-max-width); + margin: 0 auto; + + @media (--breakpoint-desktop) { + display: flex; + align-items: flex-start; + } + + @element sidebar { + @media (--breakpoint-desktop) { + flex: 0 0 220px; + border-radius: 7px; + box-shadow: var(--card-box-shadow); + } + } + + @element sidebar-header { + padding: var(--grid-gutter); + border-bottom: 1px solid var(--color-sidebar-seperator); + } + + @element sidebar-title { + font-size: 1.25em; + margin: 0; + } + + @element sidebar-content { + background: var(--color-sidebar-bg); + padding: var(--grid-gutter); + } + + @element content { + padding: var(--grid-gutter) 0; + + @media (--breakpoint-desktop) { + flex: 1 1 auto; + margin-left: var(--grid-gutter); + overflow: hidden; + } + } +} diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css index 737b56f..da185da 100644 --- a/assets/stylesheets/style.css +++ b/assets/stylesheets/style.css @@ -4,6 +4,8 @@ @import './base'; +@import './layout'; + @import './global'; @import './hljs-github'; diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css index 89ef427..cd5bb8c 100644 --- a/assets/stylesheets/variables.css +++ b/assets/stylesheets/variables.css @@ -14,7 +14,7 @@ --color-palette-blue-medium: #3c80cf; --color-palette-blue-dark: #3072be; - --color-text-default: #2a303a; + --color-text-default: #2a3039; --color-text-grey: #8091a5; --color-text-dark-bg: #fff; --color-text-dark-bg-grey: #a9b9c0; @@ -26,6 +26,7 @@ --color-bg-separator: #e5ebed; --color-sidebar-bg: #f7f9fa; + --color-sidebar-seperator: #eeeeee; --color-course-active: #536171; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 17d33e0..fa87a38 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -755,15 +755,21 @@ input[type="reset"]:focus, margin-top: -22px; } -.wrapper { +.layout-centered { max-width: 980px; margin: 0 auto; padding: 0 2vw; } +.layout-sidebar { + padding: 0 2vw; + max-width: 980px; + margin: 0 auto; +} + @media (min-width: 700px) { - .wrapper-with-sidebar { + .layout-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -775,28 +781,38 @@ input[type="reset"]:focus, @media (min-width: 700px) { - .wrapper-with-sidebar__sidebar { + .layout-sidebar__sidebar { -webkit-box-flex: 0; -ms-flex: 0 0 220px; flex: 0 0 220px; - padding: 22px; border-radius: 7px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); } - - .wrapper-with-sidebar__sidebar > h2 { - margin-bottom: 66px; - } } -.wrapper-with-sidebar__content { +.layout-sidebar__sidebar-header { + padding: 22px; + border-bottom: 1px solid #eeeeee; +} + +.layout-sidebar__sidebar-title { + font-size: 1.25em; + margin: 0; +} + +.layout-sidebar__sidebar-content { + background: #f7f9fa; + padding: 22px; +} + +.layout-sidebar__content { padding: 22px 0; } @media (min-width: 700px) { - .wrapper-with-sidebar__content { + .layout-sidebar__content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -1149,44 +1165,6 @@ input[type="reset"]:focus, height: auto; } -body { - background-color: #fff; - color: #2a303a; - font-family: 'roboto', Helvetica, sans-serif; - font-size: 16px; - font-size: 1rem; - 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; -} - .table-of-contents ul { list-style: none; margin: 22px 0; @@ -1292,7 +1270,45 @@ body { } .main-navigation ul li a.active { - color: #2a303a; + color: #2a3039; +} + +body { + background-color: #fff; + color: #2a3039; + font-family: 'roboto', Helvetica, sans-serif; + font-size: 16px; + font-size: 1rem; + 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; } /* @@ -1395,7 +1411,73 @@ github.com style (c) Vasily Polovnyov font-weight: bold; } -@include './card'; +.course-card { + 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: 30vh; + padding: 22px; + + border-radius: 3px; + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); +} + +.course-card > * + * { + margin-top: 22px; +} + +.course-card__categories { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.5em; + flex: 0 0 1.5em; +} + +.course-card__category { + display: inline-block; + margin-right: 22px; + color: #8091a5; + font-size: 0.75em; + letter-spacing: 2px; +} + +.course-card__title { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-bottom: 0; +} + +.course-card__description-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +.course-card__description-wrapper p { + margin: 0; +} + +.course-card__link-wrapper { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.course-card__link { + display: inline-block; + padding-bottom: 0.3em; + border-bottom: 1px solid #5c9fef; + text-transform: uppercase; + color: #5c9fef; + font-size: 0.75em; + line-height: 2.17; + letter-spacing: 2px; +} .module-hero-image {} diff --git a/views/about.pug b/views/about.pug index 208cbad..fe047a3 100644 --- a/views/about.pug +++ b/views/about.pug @@ -1,6 +1,6 @@ extends layout block content - .wrapper + .layout-centered h1= title p Welcome to #{title} diff --git a/views/categories.pug b/views/categories.pug index 208cbad..fe047a3 100644 --- a/views/categories.pug +++ b/views/categories.pug @@ -1,6 +1,6 @@ extends layout block content - .wrapper + .layout-centered h1= title p Welcome to #{title} diff --git a/views/course.pug b/views/course.pug index 11fca12..31e9bc7 100644 --- a/views/course.pug +++ b/views/course.pug @@ -3,9 +3,10 @@ extends layout include mixins/_lesson block content - .wrapper.wrapper-with-sidebar - section.wrapper-with-sidebar__sidebar - h2 Table of contents + .layout-sidebar + section.layout-sidebar__sidebar + .layout-sidebar__sidebar-header + h2.layout-sidebar__sidebar-title Table of contents .table-of-contents ul li @@ -14,7 +15,7 @@ block content if l.fields li a(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title} - section.wrapper-with-sidebar__content + section.layout-sidebar__content h1= course.fields.title if lesson diff --git a/views/courses.pug b/views/courses.pug index de31d6b..12e98b2 100644 --- a/views/courses.pug +++ b/views/courses.pug @@ -3,18 +3,21 @@ extends layout include mixins/_courseCard block content - .wrapper.wrapper-with-sidebar - section.wrapper-with-sidebar__sidebar - h2 Categories - .sidebar-menu - ul - li - a.active(href=`/courses`) All courses - each category in categories + .layout-sidebar + section.layout-sidebar__sidebar + .layout-sidebar__sidebar-header + h2.layout-sidebar__sidebar-title Categories + .layout-sidebar__sidebar-content + .sidebar-menu + ul li - a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} - section.wrapper-with-sidebar__content + a.active(href=`/courses`) All courses + each category in categories + li + a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} + section.layout-sidebar__content h1= title .courses.grid-list-small each course in courses - +courseCard(course) + .grid-list-small__item + +courseCard(course) diff --git a/views/error.pug b/views/error.pug index b5d8a8b..1c6e394 100644 --- a/views/error.pug +++ b/views/error.pug @@ -1,7 +1,7 @@ extends layout block content - .wrapper + .layout-centered h1= message h2= error.status pre #{error.stack} diff --git a/views/layout.pug b/views/layout.pug index dec0dfa..e88de6c 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -8,7 +8,7 @@ html #main__header header.header .header__upper-wrapper - .header__upper.wrapper + .header__upper.layout-centered .header__title img(src='/images/icon-info.svg') span Example Application @@ -26,7 +26,7 @@ html option(value='en-US' selected=query.locale === 'en-US') English option(value='de-DE' selected=query.locale === 'de-DE') German .header__lower-wrapper - .header__lower.wrapper + .header__lower.layout-centered .header__logo a.header__logo-link(href='/') img(src='/images/logo.svg' alt='Contentful Example App') @@ -46,7 +46,7 @@ html block content #main__footer - .wrapper + .layout-centered footer.footer .footer__upper nav.footer__navigation.main-navigation diff --git a/views/settings.pug b/views/settings.pug index 8f9940d..3cfd35e 100644 --- a/views/settings.pug +++ b/views/settings.pug @@ -1,7 +1,7 @@ extends layout block content - .wrapper + .layout-centered h1= title p To query and get content using the APIs, client apllications need to authenticate iwth both the Space ID and an access token. diff --git a/views/sitemap.pug b/views/sitemap.pug index 208cbad..fe047a3 100644 --- a/views/sitemap.pug +++ b/views/sitemap.pug @@ -1,6 +1,6 @@ extends layout block content - .wrapper + .layout-centered h1= title p Welcome to #{title}