2021 Bilde Hinzugeügt, Hambuger Butten Angelegt

src/sass/_kalender.sass

@@ -5,7 +5,7 @@ $marginLeftRight: 5px  // abstand linker und rechter rand
 $marginTop: 5px      
 $marginBetween: 5px     // abstand zwischen den Tueren
 $doorBorderSize: 1px    
-$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
+//$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
 
 /* ********************************
 
@@ -14,7 +14,7 @@ $doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
   position: relative
   text-align: center
   width: $kalenderWidth
-  height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
+  //height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
   border: 1px solid black 
   background: #fff url("../inc/bg/baum2.jpg") no-repeat
   /*background-size: $backgroundWidth
@@ -24,8 +24,8 @@ $doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
   div
     position: absolute
     border: $doorBorderSize solid darkred
-    width: $doorWidth
-    height: $doorWidth
+    //width: $doorWidth
+    //height: $doorWidth
     overflow: hidden
     background: #fff
 
@@ -49,8 +49,8 @@ $doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
     position: absolute
     left: 0
     top: 0
-    width: #{$doorWidth+50}
-    height: $doorWidth
+    //width: #{$doorWidth+50}
+    //height: $doorWidth
     display: block 
     border: none
     background: #fff url("../inc/bg/baum2.jpg") no-repeat
@@ -59,7 +59,7 @@ $doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
     margin-left: $bgPosition
   a
     &:hover .left, &:focus .left
-      left: #{-($doorWidth+60)}
+      //left: #{-($doorWidth+60)}
 
     .left
       display: block
@@ -72,13 +72,13 @@ $doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
 
   @for $row from 0 through 5
     @for $col from 0 through 3
-      $leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
-      $topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
+      //$leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
+      //s$topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
       #ak#{$row*4+$col+1}
-        left: #{$leftCalc}
-        top: #{$topCalc}
+        //left: #{$leftCalc}
+        //top: #{$topCalc}
         .left
-          background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
+          //background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
   
 #hiddenTuer
   margin: 1rem

src/sass/_mobil.sass

@@ -0,0 +1,97 @@
+.side-menu
+    display: none
+
+@media (max-width: 768px)
+    nav
+        width: 100%
+        height: 100%
+        position: fixed
+        background-color: #fff
+        overflow: hidden
+        max-height: 0
+        transition: max-height .5s ease-out
+
+        ul
+            top: 0
+            background: none
+            display: block
+            border: none
+            box-shadow: none
+
+            a:hover
+                background-color: #fff
+
+
+
+
+
+            
+    
+    header
+        height: 1.5rem
+        top: 1rem
+
+
+        h1
+            margin: -0.5rem 0rem 0 40px
+            display: inline-block
+
+
+        
+
+    .hamb
+        display: inline-block
+        cursor: pointer
+        float: right
+        padding: 30px 20px
+        margin-top: -2rem
+        
+
+
+    /* Style label tag
+
+    .hamb-line
+        background: black
+        display: inline-block
+        height: 2px
+        position: relative
+        width: 24px
+
+        &::before, &::after
+            background: black
+            content: ''
+            display: block
+            height: 100%
+            position: absolute
+            transition: all .2s ease-out
+            width: 100%
+
+        &::before
+            top: 5px
+
+        &::after
+            top: -5px
+
+    /* Style span tag
+
+    .side-menu
+        display: none
+
+    /* Hide checkbox
+
+    /* Toggle menu icon
+
+    .side-menu:checked ~
+        nav
+            max-height: 100%
+
+        .hamb .hamb-line
+            background: transparent
+
+            &::before
+                transform: rotate(-45deg)
+                top: 0
+
+            &::after
+                transform: rotate(45deg)
+                top: 0

src/sass/main.sass

@@ -1,7 +1,7 @@
 $navtop: 20px
 $headerRadios: 2rem
 
-@import 'nav', 'home', 'kalender', 'tueren', 'other'
+@import 'nav', 'home', 'kalender', 'tueren', 'other', 'mobil'
 
 /* **************************************
 
@@ -16,7 +16,7 @@ body
 header
     margin: auto
     /*background-color: Lightgrey
-    background: url("../inc/bg/christmas background.jpg") 0 90% no-repeat
+    background: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
     background-size: 100%
     border-bottom: 4px ridge darkgreen
     border-radius: 0 0 $headerRadios $headerRadios