Pre-review cleanup

kirbydesign · Nov 28, 2024 · cb3c5de · cb3c5de
1 parent f146dc9
commit cb3c5de
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 39 deletions.
diff --git a/apps/cookbook/src/app/home/home.component.scss b/apps/cookbook/src/app/home/home.component.scss
@@ -2,7 +2,7 @@
 
 /* stylelint-disable declaration-block-no-redundant-longhand-properties */
 
-$header-height-mobile: utils.size('xxxl') + 20px;
+$header-height-mobile: auto;
 $header-height-desktop: 2 * utils.size('xxl');
 $footer-height: 3 * utils.size('xxl');
 $sidebar-width: 5 * utils.size('xxl');
@@ -14,7 +14,7 @@ $desktop-gutter: minmax(utils.size('m'), 1fr);
   background-color: utils.get-color('background-color');
   display: grid;
   grid-template-columns: $mobile-gutter minmax(0, 1fr) $mobile-gutter;
-  grid-template-rows: auto minmax(0, 1fr) $footer-height;
+  grid-template-rows: $header-height-mobile minmax(0, 1fr) $footer-height;
   grid-template-areas:
     'header header header'
     '. main .'

diff --git a/apps/cookbook/src/app/page/header/header.component.scss b/apps/cookbook/src/app/page/header/header.component.scss
@@ -8,24 +8,25 @@ $medium-rect-delay: $large-rect-delay + 300ms;
 $small-rect-delay: $medium-rect-delay + 200ms;
 
 :host {
-  display: flex;
   grid-area: header;
+  z-index: utils.z('sticky-content') + 1; // above side-nav
+  position: sticky;
+  top: 0;
+  background-color: utils.get-color('light');
+  border-bottom: 1px solid utils.get-color('medium');
 
-  @include utils.media('<large') {
-    position: sticky;
-    top: 0;
-    z-index: utils.z('sticky-content') + 1; // above side-nav
-    background-color: utils.get-color('light');
-    border-bottom: 1px solid utils.get-color('medium');
+  @include utils.media('>=large') {
+    position: static;
+    background-color: transparent;
+    border-bottom: none;
   }
 }
 
 header {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   width: 100%;
-  padding-inline: var(--kirby-spacing-xxs);
-  padding-block: var(--kirby-spacing-xxs);
+  padding: var(--kirby-spacing-xxs);
 
   @include utils.media('>=large') {
     padding-block-start: var(--kirby-spacing-m);

diff --git a/apps/cookbook/src/app/page/side-nav/side-nav.component.html b/apps/cookbook/src/app/page/side-nav/side-nav.component.html
@@ -28,9 +28,9 @@ <h2 class="kirby-text-normal">Resources</h2>
   </kirby-card>
 
   <kirby-card
+    [hasPadding]="true"
     (keydown.ArrowUp)="onLinksArrowUpDown($event, 'components')"
     (keydown.ArrowDown)="onLinksArrowUpDown($event, 'components')"
-    [hasPadding]="true"
   >
     <h2 class="kirby-text-normal">Components</h2>
     <hr />

diff --git a/apps/cookbook/src/app/page/side-nav/side-nav.component.scss b/apps/cookbook/src/app/page/side-nav/side-nav.component.scss
@@ -13,30 +13,29 @@ $logo-size-mobile: var(--kirby-spacing-xl);
   display: none;
   z-index: utils.z('sticky-content');
   padding: $menu-padding-mobile;
+  position: absolute;
+  top: var(--kirby-spacing-xxxxl);
+  bottom: 0;
+  overflow: auto;
 
-  @include utils.media('<large') {
-    position: absolute;
-    top: var(--kirby-spacing-xxxxl);
-    bottom: 0;
-    overflow: auto;
-
-    &.is-open {
-      display: block;
-      background-color: utils.get-color('light');
-      box-shadow: utils.get-elevation(8);
-    }
+  &.is-open {
+    display: block;
+    background-color: utils.get-color('light');
+    box-shadow: utils.get-elevation(8);
   }
 
   @include utils.media('>=large') {
+    position: static;
     grid-area: sidebar;
-  }
-
-  @include utils.media('>=large') {
     box-shadow: none;
     display: block;
-    position: static;
     padding: 0;
     min-height: unset;
+
+    &.is-open {
+      background-color: transparent;
+      box-shadow: none;
+    }
   }
 }
 
@@ -53,18 +52,7 @@ nav {
   }
 }
 
-section {
-  overflow: auto;
-  @include utils.media('<large') {
-    display: none;
-
-    &.is-open {
-      display: block;
-    }
-  }
-}
-
-kirby-card:first-child {
+kirby-card:not(:last-child) {
   margin-bottom: var(--kirby-spacing-s);
 }