[Merged by Bors] - Improve header navigation

sass/_functions.scss

@@ -0,0 +1,4 @@
+/// Convert px size to rem size
+@function calc-rem($size) {
+    @return ($size / $size-body) * 1rem;
+}

sass/_mixins.scss

@@ -10,3 +10,46 @@
         @content;
     }
 }
+
+@mixin text-ellipsis($lines: 1) {
+    overflow: hidden;
+
+    @if ($lines == 1) {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    } @else {
+        // Ellipsis on second line
+        // See: https://css-tricks.com/almanac/properties/l/line-clamp/
+        display: -webkit-box;
+        -webkit-line-clamp: $lines;
+        -webkit-box-orient: vertical;
+    }
+}
+
+@mixin state-checked($id) {
+    ##{$id}-state:checked + [data-#{$id}-state-container] {
+        @content;
+    }
+}
+
+@mixin scrollbar-v {
+    $track-width: 4px;
+    $thumb-color: rgba($color-white, 0.2);
+
+    scrollbar-width: thin;
+    scrollbar-color: $thumb-color transparent;
+
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+        width: $track-width;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $thumb-color;
+        border-radius: $track-width;
+    }
+}

sass/_utils.scss

@@ -1,7 +1,5 @@
-.container {
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
+.hidden {
+    display: none;
 }
 
 a:focus {
@@ -15,17 +13,29 @@ a:focus {
 }
 
 .padded-content {
-    padding: $default-padding;
+    padding: 16px 0;
+
+    @media #{$bp-tablet-landscape-up} {
+        padding: 24px 0;
+    }
 }
 
 .warning {
     color: #c8c864;
 }
 
-.anchor-link {
-    &, &:focus, &:hover, &:active, &:link, &:visited {
-        color: #505050;
-        text-shadow: none;
-        font-weight: 500;
-    }
+// Anchor target that applies an offset to compesate for the header height
+// Thanks: https://stackoverflow.com/a/13184714/379923
+.anchor-target {
+    display: block;
+    position: relative;
+    top: calc(0px - var(--header-height) - 8px);
+    visibility: hidden;
+}
+
+.anchor-link, .anchor-link:focus, .anchor-link:hover, .anchor-link:active, .anchor-link:hover, .anchor-link:link, .anchor-link:visited {
+    margin-left: 0.3rem;
+    color: #505050;
+    text-shadow: none;
+    font-weight: 500;
 }

sass/_vars.scss

@@ -1,3 +1,7 @@
+// Typography
+$size-body: 16px; // Usual browser default size
+$size-body-mobile: 14px; // Size for mobile
+
 // Breakpoints
 $bp-phone-landscape: 480px; // Mobile-landscape (and larger)
 $bp-tablet-portrait: 768px; // Tablet-portrait (and larger)
@@ -14,7 +18,10 @@ $bp-tablet-landscape-down: '(max-width: #{$bp-desktop - 1})';
 $bp-desktop-up: '(min-width: #{$bp-desktop})';
 
 // Colors
+$color-black: #000;
 $color-white: #ececec;
+$color-grey-800: #232326;
+$color-grey-900: #1e1e22;
 
 $headerbar-color: #1e1e22;
 $hover-color: #ececec;
@@ -32,9 +39,23 @@ $card-hover-background: #2f3033;
 $duration-fast: 100ms;
 $duration: 250ms;
 
+// Z-Index
+$z-layout-header: 800;
+$z-main-menu-backdrop: 900;
+$z-main-menu: 1000;
+
 // General
+$max-width: 1200px;
+$mobile-menu-width: 300px;
 $content-top-margin: 30px;
-$default-padding: 15px;
-$media-max-width: 1000px;
 $border-radius: 10px;
 $card-list-gap: 15px;
+
+// CSS Vars
+:root {
+    --header-height: 60px;
+
+    @media #{$bp-tablet-landscape-up} {
+        --header-height: 72px;
+    }
+}

sass/components/_button-square.scss

@@ -0,0 +1,26 @@
+.button-square {
+    @include flex-center;
+
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+        &:before {
+            $padding: 8px;
+
+            content: '';
+            position: absolute;
+            top: $padding;
+            right: $padding;
+            bottom: $padding;
+            left: $padding;
+            background-color: rgba($color-white, 0.05);
+            border-radius: $border-radius;
+        }
+    }
+
+    &--header {
+        width: calc(var(--header-height) - 8px);
+        height: var(--header-height);
+    }
+}

sass/components/_button.scss

@@ -0,0 +1,43 @@
+.button {
+    $color-blue: #799bbb;
+    $color-pink: #bb799c;
+
+    display: inline-flex;
+    align-items: center;
+    background-color: $color-blue;
+    border: 3px solid #576f86;
+    padding: 6px 8px;
+    border-radius: $border-radius;
+    font-size: 1.2rem;
+    font-weight: 500;
+    transition: transform $duration-fast;
+
+    &:hover {
+        background-color: darken($color-blue, 3%);
+    }
+
+    &:active {
+        transform: translateY(2px);
+    }
+
+    &, &:hover, &:visited {
+        color: $color-white;
+        text-decoration: none;
+    }
+
+    &__icon {
+        height: 1.1em;
+        vertical-align: middle;
+        margin-left: 0.2em;
+        font-size: 0.9em;
+    }
+
+    &--pink {
+        background-color: $color-pink;
+        border-color: #865767;
+
+        &:hover {
+            background-color: darken($color-pink, 3%);
+        }
+    }
+}

sass/components/_card.scss

@@ -8,12 +8,12 @@
     margin-bottom: $card-list-gap;
     font-style: normal;
     text-decoration: none;
-    box-shadow: 0px 0px 5px #494949;
+    border: 2px solid #383838;
 }
 
 .card:hover {
     background-color: $card-hover-background;
-    box-shadow: 0px 0px 5px $default-color;
+    border: 2px solid #6b6b6b;
 }
 
 .card-image {
@@ -85,4 +85,4 @@
     margin-left: auto;
     margin-right: auto;
     align-items: center;
-}
+}

sass/components/_container.scss

@@ -0,0 +1,12 @@
+.container {
+    --container-padding: 8px;
+
+    width: 100%;
+    max-width: calc(#{$max-width} + var(--container-padding) * 2);
+    margin: 0 auto;
+    padding: 0 var(--container-padding);
+
+    @media #{$bp-tablet-landscape-up} {
+        --container-padding: 16px;
+    }
+}