Fix small viewports

2 files changed, 12 insertions, 11 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 4d4ecc6..c332ff7 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -19,26 +19,27 @@ code {
 }
 
 html {
+    height:           100%;
     background-color: prop(--colors --bg);
     color:            prop(--colors --fg);
     font-family:      $font-fam--text;
     font-size:        1em / 16px * $font-size;
     line-height:      $line-height;
-    height:           100%;
 }
 
 body {
     display:        flex;
+    box-sizing:     border-box;
     flex-direction: column;
     min-height:     100%;
     margin:         0;
     padding:        2px;
-    box-sizing:     border-box;
 }
 
 main {
-    width: 100%;
-    
+    box-sizing: border-box;
+    width:      100%;
+
     @include iro-responsive-env(('sm', 'md')) {
         font-size: iro-responsive-set((1rem, 1 / 16 * 18rem));
     }
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index a59c039..c1095b3 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -14,7 +14,7 @@
         --dims: (
             --height: 4rem,
             --icon:   1.5rem,
-            --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))),
+            --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
         )
     ));
 
@@ -31,11 +31,11 @@
 
         @include element('item') {
             padding:          0 prop(--dims --pad-x);
-            line-height:      prop(--dims --height);
-            color:            prop(--colors --fg);
+            transition:       background-color .2s, color .2s, border-left-color .2s;
             background-color: prop(--colors --bg);
+            color:            prop(--colors --fg);
+            line-height:      prop(--dims --height);
             text-decoration:  none;
-            transition:       background-color .2s, color .2s, border-left-color .2s;
 
             @include next-twin-element {
                 margin-left: 2px;
@@ -43,9 +43,9 @@
 
             &:hover,
             &:focus {
-                color:             prop(--colors --hover --fg);
-                background-color:  prop(--colors --hover --bg);
                 border-left-color: prop(--colors --hover --bg);
+                background-color:  prop(--colors --hover --bg);
+                color:             prop(--colors --hover --fg);
             }
 
             @include modifier('icon') {
@@ -55,8 +55,8 @@
             }
 
             @include modifier('active') {
-                font-weight: bold;
                 color:       prop(--colors --active --fg);
+                font-weight: bold;
             }
         }