From f3a36ea3dcb8851cd43691e5b4ba925fb83c5434 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Sun, 15 Nov 2020 22:38:00 +0100 Subject: [PATCH] Fit more content on small and medium screens --- assets/scss/02-settings/_container.scss | 1 + assets/scss/02-settings/_header.scss | 2 - assets/scss/03-tools/_container.scss | 10 ++++ assets/scss/06-objects/_container.scss | 4 ++ assets/scss/06-objects/_section.scss | 26 ++++++++-- assets/scss/07-components/_header.scss | 56 +++++++++++----------- assets/scss/07-components/_navigation.scss | 6 ++- assets/scss/main.scss | 1 - author.hbs | 4 ++ index.hbs | 2 +- partials/related-posts.hbs | 3 ++ 11 files changed, 77 insertions(+), 38 deletions(-) delete mode 100644 assets/scss/02-settings/_header.scss diff --git a/assets/scss/02-settings/_container.scss b/assets/scss/02-settings/_container.scss index 7e1eac2..657f242 100644 --- a/assets/scss/02-settings/_container.scss +++ b/assets/scss/02-settings/_container.scss @@ -6,6 +6,7 @@ // growing (like it would with `vw` for example). $container-width: 78em; // 1. +$container-padding-dense: 0.625rem; // 2. $container-padding: 1.25rem; // 2. $container-padding-sm: 2.25em; // 2. diff --git a/assets/scss/02-settings/_header.scss b/assets/scss/02-settings/_header.scss deleted file mode 100644 index 6b4babe..0000000 --- a/assets/scss/02-settings/_header.scss +++ /dev/null @@ -1,2 +0,0 @@ -$header-linear-breakpoint-without-navigation: sm; -$header-linear-breakpoint-with-navigation: md; diff --git a/assets/scss/03-tools/_container.scss b/assets/scss/03-tools/_container.scss index bd75d14..273f62c 100644 --- a/assets/scss/03-tools/_container.scss +++ b/assets/scss/03-tools/_container.scss @@ -13,6 +13,16 @@ } } +@mixin container-dense() { + padding-right: $container-padding-dense; + padding-left: $container-padding-dense; + + @include breakpoint-up(sm) { + padding-right: $container-padding-sm; + padding-left: $container-padding-sm; + } +} + @mixin container-fluid() { max-width: none; } diff --git a/assets/scss/06-objects/_container.scss b/assets/scss/06-objects/_container.scss index 671bd81..29f7be1 100644 --- a/assets/scss/06-objects/_container.scss +++ b/assets/scss/06-objects/_container.scss @@ -17,3 +17,7 @@ .container--article { @include container-article(); } + +.container--dense { + @include container-dense(); +} diff --git a/assets/scss/06-objects/_section.scss b/assets/scss/06-objects/_section.scss index 93f4392..f23229d 100644 --- a/assets/scss/06-objects/_section.scss +++ b/assets/scss/06-objects/_section.scss @@ -1,13 +1,27 @@ .section { - padding-top: spacing(2); - padding-bottom: spacing(2); + padding-top: spacing(1); + padding-bottom: spacing(1); + + @include breakpoint-up(lg) { + padding-top: spacing(1.5); + padding-bottom: spacing(1.5); + } + + @include breakpoint-up(xl) { + padding-top: spacing(2); + padding-bottom: spacing(2); + } } .section--dense { padding-top: spacing(1); padding-bottom: spacing(2); - @include breakpoint-up(sm) { + @include breakpoint-up(lg) { + padding-top: spacing(1.5); + } + + @include breakpoint-up(xl) { padding-top: spacing(2); } } @@ -16,7 +30,11 @@ padding-top: spacing(1); padding-bottom: 0; - @include breakpoint-up(sm) { + @include breakpoint-up(lg) { + padding-top: spacing(1.5); + } + + @include breakpoint-up(xl) { padding-top: spacing(2); } } diff --git a/assets/scss/07-components/_header.scss b/assets/scss/07-components/_header.scss index 0cc4d82..521f699 100644 --- a/assets/scss/07-components/_header.scss +++ b/assets/scss/07-components/_header.scss @@ -1,15 +1,18 @@ // 1. Optically align logo with other content. .header { - padding-top: spacing(1); - padding-bottom: spacing(1); + padding-top: spacing(0.5); + padding-bottom: spacing(0.5); + + @include breakpoint-up(lg) { + padding-top: spacing(1); + padding-bottom: spacing(1); + } } .header__layout { - @include breakpoint-up($header-linear-breakpoint-with-navigation) { - display: flex; - align-items: center; - } + display: flex; + align-items: center; } .header__logotype { @@ -19,45 +22,40 @@ left: -0.15em; // 1. display: inline-flex; align-items: flex-start; + margin-right: 1em; } .header__logo { width: 2em; height: 2em; - margin-right: 1em; + + @include breakpoint-up(lg) { + margin-right: 1em; + } } .header__title { @include typography(header-title); -} -.header__navigation { - &:not(:empty) { - padding-top: 1rem; - } + display: none; - @include breakpoint-up($header-linear-breakpoint-with-navigation) { - margin-left: auto; - - &:not(:empty) { - padding-top: 0; - } + @include breakpoint-up(lg) { + display: block; } } -.header--without-navigation .header__layout { - @include breakpoint-up($header-linear-breakpoint-without-navigation) { - display: flex; - align-items: center; - } +.header__navigation { + margin-left: auto; } -.header--without-navigation .header__navigation { - @include breakpoint-up($header-linear-breakpoint-without-navigation) { - margin-left: auto; +.header--without-navigation .header__logo { + @include breakpoint-up(sm) { + margin-right: 1em; + } +} - &:not(:empty) { - padding-top: 0; - } +.header--without-navigation .header__title { + @include breakpoint-up(sm) { + display: block; } } diff --git a/assets/scss/07-components/_navigation.scss b/assets/scss/07-components/_navigation.scss index 80fa90b..2cc30b2 100644 --- a/assets/scss/07-components/_navigation.scss +++ b/assets/scss/07-components/_navigation.scss @@ -8,7 +8,7 @@ $_navigation-icon-padding: 0.5em; justify-content: space-between; margin: -1 * $_navigation-item-padding; - @include breakpoint-up($header-linear-breakpoint-with-navigation) { + @include breakpoint-up(lg) { margin: -1 * $_navigation-item-padding-big -1 * $_navigation-icon-padding @@ -108,6 +108,10 @@ $_navigation-icon-padding: 0.5em; .navigation__list + .navigation__list { @include breakpoint-up(sm) { + margin-left: spacing(0.5); + } + + @include breakpoint-up(xl) { margin-left: spacing(1); } } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 35f0455..9057219 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -10,7 +10,6 @@ @import "02-settings/colors"; @import "02-settings/container"; @import "02-settings/grid"; -@import "02-settings/header"; @import "02-settings/modularscale"; @import "02-settings/tables"; @import "02-settings/typography"; diff --git a/author.hbs b/author.hbs index 238fb61..eaa83cc 100644 --- a/author.hbs +++ b/author.hbs @@ -104,6 +104,10 @@

Články

+ +
+
+
{{#foreach ../posts}}
diff --git a/index.hbs b/index.hbs index 8f1af54..7f2e7e9 100644 --- a/index.hbs +++ b/index.hbs @@ -2,7 +2,7 @@
-
+
{{#foreach posts visibility="public"}} diff --git a/partials/related-posts.hbs b/partials/related-posts.hbs index 7b17dc3..560eff5 100644 --- a/partials/related-posts.hbs +++ b/partials/related-posts.hbs @@ -6,6 +6,9 @@ {{^headline}}Poslední články{{/headline}} +
+
+
{{#foreach posts visibility="public"}}