From 26fa97e36ad67b947ca6f7e39648e21806c06c85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Thu, 5 Oct 2017 13:32:29 +0200 Subject: [PATCH] restyle global layout and course cards --- assets/stylesheets/base/typography.css | 2 +- assets/stylesheets/course/card.css | 16 ++++++-- assets/stylesheets/global/index.css | 25 ++++++------ public/stylesheets/style.css | 56 +++++++++++++++----------- views/layout.pug | 8 ++-- views/mixins/_courseCard.pug | 3 +- 6 files changed, 66 insertions(+), 44 deletions(-) diff --git a/assets/stylesheets/base/typography.css b/assets/stylesheets/base/typography.css index ecb6ff6..492e192 100644 --- a/assets/stylesheets/base/typography.css +++ b/assets/stylesheets/base/typography.css @@ -1,5 +1,5 @@ h1, h2, h3, h4, h5, h6 { - font-family: 'robotomedium', 'Arial Black', sans-serif; + font-family: var(--font-medium); font-weight: normal; line-height: 1.31; color: var(--color-text-headlines); diff --git a/assets/stylesheets/course/card.css b/assets/stylesheets/course/card.css index 3af27a8..baba3fb 100644 --- a/assets/stylesheets/course/card.css +++ b/assets/stylesheets/course/card.css @@ -16,12 +16,12 @@ display: inline-block; color: var(--color-text-grey); font-size: 0.75em; - letter-spacing: 2px; + font-family: var(--font-medium); &:after { - content: '/'; + content: ' • '; display: inline-block; - padding: 0 0.3em; + padding: 0 0.5em; } &:last-child:after { @@ -29,6 +29,11 @@ } } + @element category-link { + display: inline-block; + letter-spacing: 2px; + } + @element title { flex: 0 1 12vh; max-height: 120px; @@ -68,5 +73,10 @@ font-size: 0.75em; line-height: 2.17; letter-spacing: 2px; + + &:hover { + color: var(--color-link-content-hover); + border-bottom-color: var(--color-link-content-hover); + } } } diff --git a/assets/stylesheets/global/index.css b/assets/stylesheets/global/index.css index ff5b55e..872650a 100644 --- a/assets/stylesheets/global/index.css +++ b/assets/stylesheets/global/index.css @@ -13,19 +13,20 @@ body { line-height: var(--line-height); } -#main { +@block main { display: flex; flex-direction: column; min-height: 100vh; -} -#main__header { - flex: 0 0 auto; -} -#main__content { - flex: 1 0 auto; - display: flex; - align-items: stretch; -} -#main__footer { - flex: 0 0 auto; + + @element header { + flex: 0 0 auto; + } + @element content { + flex: 1 0 auto; + display: flex; + align-items: stretch; + } + @element footer { + flex: 0 0 auto; + } } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 2d67830..52b147a 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -499,7 +499,7 @@ template { } h1, h2, h3, h4, h5, h6 { - font-family: 'robotomedium', 'Arial Black', sans-serif; + font-family: 'robotomedium', Helvetica, sans-serif; font-weight: normal; line-height: 1.31; color: #2a3039 @@ -1470,7 +1470,7 @@ body { line-height: 1.5em; } -#main { +.main { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -1481,28 +1481,28 @@ body { min-height: 100vh; } -#main__header { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.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; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; +.main__content { + -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 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.main__footer { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } /* @@ -1632,19 +1632,24 @@ github.com style (c) Vasily Polovnyov display: inline-block; color: #8091a5; font-size: 0.75em; - letter-spacing: 2px; + font-family: 'robotomedium', Helvetica, sans-serif; } .course-card__category:after { - content: '/'; + content: ' • '; display: inline-block; - padding: 0 0.3em; + padding: 0 0.5em; } .course-card__category:last-child:after { display: none; } +.course-card__category-link { + display: inline-block; + letter-spacing: 2px; +} + .course-card__title { -webkit-box-flex: 0; -ms-flex: 0 1 12vh; @@ -1692,6 +1697,11 @@ github.com style (c) Vasily Polovnyov letter-spacing: 2px; } +.course-card__link:hover { + color: #3c80cf; + border-bottom-color: #3c80cf; +} + .course { display: -webkit-box; display: -ms-flexbox; diff --git a/views/layout.pug b/views/layout.pug index 4db8c2c..9c0f49d 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -4,8 +4,8 @@ html title= title link(rel='stylesheet', href='/stylesheets/style.css') body - #main - #main__header + .main + .main__header header.header .header__upper-wrapper .header__upper.layout-centered @@ -50,10 +50,10 @@ html li a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings - #main__content + .main__content block content - #main__footer + .main__footer .layout-centered footer.footer .footer__upper diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug index 1cef302..90efb3f 100644 --- a/views/mixins/_courseCard.pug +++ b/views/mixins/_courseCard.pug @@ -3,7 +3,8 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [], .course-card__categories if(course.fields.categories) each category in course.fields.categories - a.course-card__category(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title} + .course-card__category + a.course-card__category-link(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title} h2.course-card__title= course.fields.title p.course-card__description= course.fields.shortDescription .course-card__link-wrapper