Fix small viewports

1 files changed, 7 insertions, 7 deletions

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