Fit more content on small and medium screens

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.
 

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;
 }

assets/scss/06-objects/_container.scss

@@ -17,3 +17,7 @@
 .container--article {
     @include container-article();
 }
+
+.container--dense {
+    @include container-dense();
+}

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);
     }
 }

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;
     }
 }

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);
     }
 }

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";

author.hbs

@@ -104,6 +104,10 @@
             <div class="container">
 
                 <h2>Články</h2>
+
+            </div>
+            <div class="container container--dense">
+
                 <div class="post-feed">
                     {{#foreach ../posts}}
                         <div class="post-feed__item">

index.hbs

@@ -2,7 +2,7 @@
 
 <main class="site__content background-alternate">
     <section class="section">
-        <div class="container">
+        <div class="container container--dense">
 
             <div class="post-feed post-feed--articles">
                 {{#foreach posts visibility="public"}}

partials/related-posts.hbs

@@ -6,6 +6,9 @@
             {{^headline}}Poslední články{{/headline}}
         </h2>
 
+    </div>
+    <div class="container container--dense">
+
         <div class="post-row">
             {{#foreach posts visibility="public"}}
                 <div class="post-row__item">