From e62c3d8bfdc36625196448a8c30ffc9b68459692 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Wed, 4 Oct 2017 10:57:13 +0200 Subject: [PATCH] several small styling adjustments --- assets/stylesheets/global/footer.css | 24 +++++++- assets/stylesheets/global/index.css | 2 + assets/stylesheets/landing-page/index.css | 4 ++ .../landing-page/modules/hero-image.css | 5 ++ assets/stylesheets/layout/layout-sidebar.css | 2 +- assets/stylesheets/variables.css | 2 + public/images/contentful-logo.svg | 9 +++ public/stylesheets/style.css | 57 +++++++++++++++++-- views/courses.pug | 11 ++-- views/index.pug | 2 +- views/layout.pug | 8 ++- views/mixins/_courseCard.pug | 4 +- 12 files changed, 110 insertions(+), 20 deletions(-) create mode 100644 public/images/contentful-logo.svg diff --git a/assets/stylesheets/global/footer.css b/assets/stylesheets/global/footer.css index fc567ad..00e54ca 100644 --- a/assets/stylesheets/global/footer.css +++ b/assets/stylesheets/global/footer.css @@ -51,8 +51,28 @@ flex: 1 1 auto; display: flex; align-items: center; - font-size: 0.7em; - color: var(--color-text-grey); + } + + @element disclaimer-logo { + flex: 0 0 auto; + width: 24px; + height: 27px; + margin-right: var(--grid-gutter); + } + + @element disclaimer-text { + flex: 1 1 auto; + + color: var(--color-text-footer); + font-size: 0.75em; + line-height: 1.5; + + & a { + text-decoration: underline; + &:hover { + text-decoration: none; + } + } } @element social { diff --git a/assets/stylesheets/global/index.css b/assets/stylesheets/global/index.css index 1e3a86a..ff5b55e 100644 --- a/assets/stylesheets/global/index.css +++ b/assets/stylesheets/global/index.css @@ -23,6 +23,8 @@ body { } #main__content { flex: 1 0 auto; + display: flex; + align-items: stretch; } #main__footer { flex: 0 0 auto; diff --git a/assets/stylesheets/landing-page/index.css b/assets/stylesheets/landing-page/index.css index 58c0d95..79e17ef 100644 --- a/assets/stylesheets/landing-page/index.css +++ b/assets/stylesheets/landing-page/index.css @@ -1 +1,5 @@ @import './modules'; + +@block modules-container { + flex: 1 1 auto; +} diff --git a/assets/stylesheets/landing-page/modules/hero-image.css b/assets/stylesheets/landing-page/modules/hero-image.css index c9899d0..be7b613 100644 --- a/assets/stylesheets/landing-page/modules/hero-image.css +++ b/assets/stylesheets/landing-page/modules/hero-image.css @@ -24,9 +24,14 @@ color: #fff; text-align: center; font-size: 4.5vw; + line-height: 1; text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1); + + @media (--breakpoint-desktop) { + font-size: 4em; + } } } diff --git a/assets/stylesheets/layout/layout-sidebar.css b/assets/stylesheets/layout/layout-sidebar.css index 619a21a..83ff7ac 100644 --- a/assets/stylesheets/layout/layout-sidebar.css +++ b/assets/stylesheets/layout/layout-sidebar.css @@ -36,8 +36,8 @@ @element content { display: flex; - flex-direction: column; align-self: stretch; + align-items: stretch; padding-top: calc(var(--grid-gutter) / 2); @media (--breakpoint-desktop) { diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css index 790ce0a..da45035 100644 --- a/assets/stylesheets/variables.css +++ b/assets/stylesheets/variables.css @@ -25,6 +25,8 @@ --color-bg-grey: #f7f9fa; --color-bg-separator: #e5ebed; + --color-text-footer: #a9b9c0; + --color-sidebar-bg: #f7f9fa; --color-sidebar-seperator: #eeeeee; diff --git a/public/images/contentful-logo.svg b/public/images/contentful-logo.svg new file mode 100644 index 0000000..0c9203f --- /dev/null +++ b/public/images/contentful-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 288da96..8fbbee9 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -813,12 +813,12 @@ input[type="reset"]:focus, display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + // flex-direction: column; -ms-flex-item-align: stretch; align-self: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; padding-top: 11px; } @@ -1121,8 +1121,33 @@ display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-size: 0.7em; - color: #8091a5; +} + +.footer__disclaimer-logo { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 24px; + height: 27px; + margin-right: 22px; +} + +.footer__disclaimer-text { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + + color: #a9b9c0; + font-size: 0.75em; + line-height: 1.5; +} + +.footer__disclaimer-text a { + text-decoration: underline; +} + +.footer__disclaimer-text a:hover { + text-decoration: none; } .footer__social { @@ -1297,6 +1322,12 @@ body { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } #main__footer { @@ -1603,12 +1634,20 @@ github.com style (c) Vasily Polovnyov color: #fff; text-align: center; font-size: 4.5vw; + line-height: 1; text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0, 0, 0, .15), 0px 24px 2px rgba(0, 0, 0, .1), 0px 34px 30px rgba(0, 0, 0, .1); } +@media (min-width: 700px) { + + .module-hero-image__headline { + font-size: 4em; + } +} + .module-higlighted-course {} .module-higlighted-course__wrapper { @@ -1745,6 +1784,12 @@ github.com style (c) Vasily Polovnyov margin-top: 22px; } +.modules-container { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + .lesson-module { margin-top: 22px } diff --git a/views/courses.pug b/views/courses.pug index 09e964f..251bceb 100644 --- a/views/courses.pug +++ b/views/courses.pug @@ -16,8 +16,9 @@ block content li.sidebar-menu__item a.sidebar-menu__link(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} section.layout-sidebar__content - h1= title - .courses.grid-list - each course in courses - .grid-list__item - +courseCard(course) + .courses + h1= title + .grid-list + each course in courses + .grid-list__item + +courseCard(course) diff --git a/views/index.pug b/views/index.pug index 4eb1321..15f1616 100644 --- a/views/index.pug +++ b/views/index.pug @@ -5,7 +5,7 @@ include mixins/_moduleHeroImage include mixins/_moduleHighlightedCourse block content - .container + .modules-container each module in landingPage.fields.contentModules case module.sys.contentType.sys.id when 'landingPageModuleCopy' diff --git a/views/layout.pug b/views/layout.pug index e88de6c..2abd03c 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -66,9 +66,11 @@ html img(src='/images/badge-google-play.svg') .footer__lower .footer__disclaimer - 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. + img.footer__disclaimer-logo(src='/images/contentful-logo.svg') + p.footer__disclaimer-text + | 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 on Github + | . .footer__social p a(href='https://www.facebook.com/contentful/' target='_blank') diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug index 8ea4e85..cee3a9a 100644 --- a/views/mixins/_courseCard.pug +++ b/views/mixins/_courseCard.pug @@ -1,7 +1,7 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}}) .course-card - if(course.fields.categories) - .course-card__categories + .course-card__categories + if(course.fields.categories) each category in course.fields.categories a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} h2.course-card__title= course.fields.title