@kth/style 0.18.12 → 0.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.18.12",
+  "version": "0.19.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {

package/scss/components/content.scss

@@ -5,6 +5,11 @@
   .kth-content {
     @include mixins.container;
   }
+
+  .kth-main-content {
+    @include mixins.container;
+    flex: 1;
+  }
 }
 
 // TODO: investigate the possibility to expand this `.kth-content` class:

package/scss/components/kpm.scss

@@ -1,6 +1,7 @@
 @use "../utils/mixins.scss";
 @use "../tokens/spacing.scss";
 @use "../tokens/colors.scss";
+@use "../tokens/sizing.scss";
 
 @layer kth-style {
   .kth-kpm {
@@ -13,7 +14,7 @@
     }
   }
 
-  nav.kth-entrances {
+  .kth-entrances {
     > ul {
       @include mixins.horizontal-list();
       gap: spacing.$space-4;
@@ -48,4 +49,20 @@
       @include colors.theme-intranet;
     }
   }
+
+  // When logged out, show "mobile" version only in small screens
+  // Styling for kpm and entrances when logged in is handled by KPM
+  .kth-entrances {
+    display: none;
+  }
+
+  @media screen and (min-width: sizing.$breakpoint-30) {
+    .kth-entrances {
+      display: block;
+    }
+
+    .kth-entrances-expandable {
+      display: none;
+    }
+  }
 }

package/scss/components/logotype.scss

@@ -9,8 +9,12 @@
     inline-size: 4rem;
     border: none;
     margin: 0;
-    margin-inline-end: spacing.$space-32;
     padding: 0;
+    margin-inline-end: spacing.$space-8;
+
+    @media (min-width: sizing.$breakpoint-40) {
+      margin-inline-end: spacing.$space-32;
+    }
 
     // Defensive measurement:
     // - We prevent logo from shrinking

package/scss/tokens/sizing.scss

@@ -1,4 +1,5 @@
 /// DO NOT USE IT OUTSIDE OF KTH STYLE. THOSE NAMES MAY CHANGE
+$breakpoint-30: 30rem;
 $breakpoint-40: 40rem;
 $breakpoint-48: 48rem;
 $breakpoint-64: 64rem;

package/scss/utils/mixins.scss

@@ -15,5 +15,6 @@
 @mixin container {
   margin-inline: auto;
   max-width: 82rem;
+  width: 100%;
   padding-inline: clamp(spacing.$space-16, calc(100vw / 30), spacing.$space-32);
 }

package/scss/utils/reset.scss

@@ -96,9 +96,11 @@ $kpm-height: 2.5rem !default;
       @include typography.font-default;
       color: var(--color-text);
       background: var(--color-background);
-      min-height: 100vh;
+      min-height: calc(100vh - $kpm-height);
       margin: 0;
       margin-top: $kpm-height;
+      display: flex;
+      flex-direction: column;
     }
 
     @include reset;