replace deprecated lighten and darken

f001548c · Jonas Leder · e611551f · e611551f · f001548c · f001548c
Commit f001548c authored Jan 13, 2021 by Jonas Leder
--- a/_src/assets/scss/_lib/_burger.scss
+++ b/_src/assets/scss/_lib/_burger.scss
-.burger-icon {
-  @include burger(25px, 3px, 5px, #444);
-}
-
-.menu-button.is-active .burger-icon {
-  @include burger-to-cross;
-}
-
-#menu {
-  float: right;
-  margin: ($header-padding + 10px) 10px 0 0;
-}
\ No newline at end of file
--- a/_src/assets/scss/_lib/_menu.scss
+++ b/_src/assets/scss/_lib/_menu.scss
+@use "sass:color";
+
+.burger-icon {
+  @include burger(25px, 3px, 5px, #444);
+}
+
+#menu {
+  align-content: end;
+  cursor: pointer;
+  float: right;
+  margin: ($header-padding + 10px) 10px 0 0;
+
+  &.is-active .burger-icon {
+    float: right;
+    @include burger-to-cross;
+  }
+  &.is-active #menuContent {
+    display: block;
+  }
+}
+
+#menuContent {
+  background-color: color.adjust($color-primary, $lightness:-20%);
+  display: none;
+  margin: 10px 0 0;
+  ul {
+    list-style-type: none;
+    padding: 0;
+    li {
+      border-bottom: 2px solid color.adjust($color-primary, $lightness:-50%);
+      padding: 3px 15px;
+
+      &:hover{
+        background-color: color.adjust($color-primary, $lightness:-25%);
+      }
+
+      &:last-child{
+        border-bottom: 0;
+      }
+    }
+    a{
+      font-size: $font-size * 1.5;
+      color: $color-text;
+      text-decoration: none;
+    }
+  }
+}
\ No newline at end of file
--- a/_src/assets/scss/_lib/_mixins.scss
+++ b/_src/assets/scss/_lib/_mixins.scss
+@use "sass:color";
+
 @mixin font-sizer($size: $font-size){
  font-size: $size;
  line-height: round($size * 1.2);
@@ -36,7 +38,7 @@
 }

 @mixin darkBox($roundCorner: false, $padding: 15px){
-  background-color: darken($color-primary, 20%);
+  background-color: color.adjust($color-primary, $lightness:-20%);
  padding: $padding 0;

  @if $roundCorner{

--- a/_src/assets/scss/_lib/_typo.scss
+++ b/_src/assets/scss/_lib/_typo.scss
 @use "sass:color";

 body {
-  background-color: lighten($color-primary, 10%);
+  background-color: color.adjust($color-primary, $lightness: 10%);
  color: $color-text;
  font-family: $font-family;
  font-size: $font-size;

--- a/_src/assets/scss/style.scss
+++ b/_src/assets/scss/style.scss
@@ -7,4 +7,4 @@
 @import "_lib/header";
 @import "_lib/icons";
 @import "~sass-burger";
-@import "_lib/burger";
\ No newline at end of file
+@import "_lib/menu";
\ No newline at end of file
--- a/_src/assets/ts/burger.ts
+++ b/_src/assets/ts/burger.ts
-let menuButton:HTMLElement = document.getElementById('menuButton');
+let menuButton:HTMLElement = document.getElementById('menu');
 menuButton.addEventListener('click', function (e) {
    menuButton.classList.toggle('is-active');
    e.preventDefault();

--- a/_src/index.html
+++ b/_src/index.html
@@ -11,9 +11,14 @@
 <body>
 <header id="banner">
    <span id="menu">
-        <a href="#" class="menu-button" id="menuButton">
        <span class="burger-icon"></span>
-        </a>
+        <div id="menuContent">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Legal</a></li>
+                <li><a href="#">About</a></li>
+            </ul>
+        </div>
    </span>
    <h1>Seitenname</h1>
 </header>
@@ -37,7 +42,7 @@
 <footer id="copyright">
    Copyright 2021 Jonas Leder
 </footer>
-<script src="assets/ts/burger.ts"></script>
+<script src="assets/ts/menu.ts"></script>
 </body>

 </html>
\ No newline at end of file