Support for more complex layouts

2 files changed, 5 insertions, 6 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index f2b2624..9619862 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -31,7 +31,7 @@ body {
     box-sizing: border-box;
     min-height: 100%;
     margin:     0;
-    padding:    2px;
+    padding:    0;
 }
 
 main {
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 15fa5a1..56d09cd 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -15,6 +15,7 @@
             --height: 4rem,
             --icon:   1.5rem,
             --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
+            --gap:    2px,
         )
     ));
 
@@ -33,6 +34,8 @@
     @include component(namespace()) {
         display: flex;
         height:  prop(--dims --height);
+        padding: prop(--dims --gap);
+        gap:     prop(--dims --gap);
         filter:  drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
         @include element('item') {
@@ -43,10 +46,6 @@
             line-height:      prop(--dims --height);
             text-decoration:  none;
 
-            @include next-twin-element {
-                margin-left: 2px;
-            }
-
             &:hover,
             &:focus {
                 border-left-color: prop(--colors --hover --bg);
@@ -73,7 +72,7 @@
 
         @include media('>=lg') {
             position:      sticky;
-            top:           2px;
+            top:           0;
             margin-bottom: calc(-.75 * #{prop(--dims --height)});
         }