From 6c6d81873ad7360e26c343a6cfbd40f487a66095 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Mon, 9 Oct 2017 13:24:07 +0200 Subject: [PATCH] fix(styling): adjust card heights and prepare header for new dropdowns --- assets/stylesheets/course/card.css | 6 +- assets/stylesheets/global/footer.css | 2 +- assets/stylesheets/global/header.css | 27 ++++++-- assets/stylesheets/layout/grid-list.css | 19 ++++-- public/stylesheets/style.css | 88 ++++++++++++++++++++----- 5 files changed, 112 insertions(+), 30 deletions(-) diff --git a/assets/stylesheets/course/card.css b/assets/stylesheets/course/card.css index baba3fb..fe3676d 100644 --- a/assets/stylesheets/course/card.css +++ b/assets/stylesheets/course/card.css @@ -35,7 +35,7 @@ } @element title { - flex: 0 1 12vh; + flex: 0 1 15vh; max-height: 120px; margin: 0; overflow: hidden; @@ -51,8 +51,8 @@ } @element description { - flex: 0 1 20vh; - max-height: 180px; + flex: 0 1 15vh; + max-height: 120px; overflow: hidden; margin: 0 0 var(--grid-gutter); diff --git a/assets/stylesheets/global/footer.css b/assets/stylesheets/global/footer.css index 724bc75..8904125 100644 --- a/assets/stylesheets/global/footer.css +++ b/assets/stylesheets/global/footer.css @@ -1,6 +1,6 @@ @block footer { margin-top: var(--grid-gutter) 0; - padding-top: var(--grid-gutter); + padding: var(--grid-gutter) 0; @element upper { display: flex; diff --git a/assets/stylesheets/global/header.css b/assets/stylesheets/global/header.css index aa771e1..83ff5f0 100644 --- a/assets/stylesheets/global/header.css +++ b/assets/stylesheets/global/header.css @@ -23,14 +23,24 @@ @element upper-first { flex: 1 1 auto; display: flex; + flex-direction: column; justify-content: space-between; + align-items: center; + margin-bottom: calc(var(--grid-gutter) / 2); @media (--breakpoint-desktop) { flex: 0 1 auto; + flex-direction: row; margin-bottom: 0; - & div + div { - margin-left: var(--grid-gutter); + } + + & div + div { + margin: calc(var(--grid-gutter) / 2) 0 0; + + + @media (--breakpoint-desktop) { + margin: 0 0 0 calc(var(--grid-gutter) / 2); } } } @@ -38,13 +48,20 @@ @element upper-second { flex: 1 1 auto; display: flex; + flex-direction: column; justify-content: space-between; - + align-items: center; @media (--breakpoint-desktop) { flex: 0 1 auto; - & div + div { - margin-left: var(--grid-gutter); + flex-direction: row; + } + + & div + div { + margin: calc(var(--grid-gutter) / 2) 0 0; + + @media (--breakpoint-desktop) { + margin: 0 0 0 calc(var(--grid-gutter) / 2); } } } diff --git a/assets/stylesheets/layout/grid-list.css b/assets/stylesheets/layout/grid-list.css index 9356de4..02cb275 100644 --- a/assets/stylesheets/layout/grid-list.css +++ b/assets/stylesheets/layout/grid-list.css @@ -1,12 +1,21 @@ @block grid-list { -display: flex; + display: flex; flex-wrap: wrap; justify-content: space-between; - margin: 0 calc(var(--grid-gutter) / 2 * -1); + + @media (--breakpoint-desktop) { + flex: 0 0 calc(50% - var(--grid-gutter)); + margin: 0 calc(var(--grid-gutter) / 2 * -1); + } @element item { - box-sizing: border-box; - margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter); - flex: 0 0 calc(50% - var(--grid-gutter)); + flex: 0 0 100%; + margin-bottom: var(--grid-gutter); + + @media (--breakpoint-desktop) { + box-sizing: border-box; + flex: 0 0 calc(50% - var(--grid-gutter)); + margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter); + } } } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index e5abd0c..77cd077 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -945,24 +945,43 @@ input[type="reset"]:focus, } .grid-list { -display: -webkit-box; -display: -ms-flexbox; -display: flex; + display: -webkit-box; + display: -ms-flexbox; + display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; - margin: 0 -11px; } -.grid-list__item { - -webkit-box-sizing: border-box; - box-sizing: border-box; - margin: 0 11px 22px; +@media (min-width: 700px) { + + .grid-list { -webkit-box-flex: 0; -ms-flex: 0 0 calc(50% - 22px); flex: 0 0 calc(50% - 22px); + margin: 0 -11px; + } +} + +.grid-list__item { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + margin-bottom: 22px; +} + +@media (min-width: 700px) { + + .grid-list__item { + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 calc(50% - 22px); + flex: 0 0 calc(50% - 22px); + margin: 0 11px 22px; + } } .header { @@ -1006,9 +1025,17 @@ display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-bottom: 11px; } @@ -1018,11 +1045,22 @@ display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; margin-bottom: 0; } +} + +.header__upper-first div + div { + margin: 11px 0 0; +} + +@media (min-width: 700px) { .header__upper-first div + div { - margin-left: 22px; + margin: 0 0 0 11px; } } @@ -1033,9 +1071,16 @@ display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } @media (min-width: 700px) { @@ -1044,10 +1089,21 @@ display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } +} + +.header__upper-second div + div { + margin: 11px 0 0; +} + +@media (min-width: 700px) { .header__upper-second div + div { - margin-left: 22px; + margin: 0 0 0 11px; } } @@ -1221,7 +1277,7 @@ display: flex; .footer { margin-top: 22px 0; - padding-top: 22px; + padding: 22px 0; } .footer__upper { @@ -1729,8 +1785,8 @@ github.com style (c) Vasily Polovnyov .course-card__title { -webkit-box-flex: 0; - -ms-flex: 0 1 12vh; - flex: 0 1 12vh; + -ms-flex: 0 1 15vh; + flex: 0 1 15vh; max-height: 120px; margin: 0; overflow: hidden; @@ -1747,9 +1803,9 @@ github.com style (c) Vasily Polovnyov .course-card__description { -webkit-box-flex: 0; - -ms-flex: 0 1 20vh; - flex: 0 1 20vh; - max-height: 180px; + -ms-flex: 0 1 15vh; + flex: 0 1 15vh; + max-height: 120px; overflow: hidden; margin: 0 0 22px;