kalnder erneuert

2020-12-10 18:30:51 +01:00
parent 6901b4231d
commit a7a0ba7c61
15 changed files with 342 additions and 68 deletions
--- a/sass/_kalender.sass
+++ b/sass/_kalender.sass
@@ -0,0 +1,85 @@
+$backgroundSize: 516px // Größe Bild im Kalender
+$bgPosition: -13px // Position Bg und Türen
+$kalenderWidth: 460px // breite des kalenders
+$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
+
+/* ********************************
+
+.kalender
+  display: inline-block
+  position: relative
+  text-align: center
+  width: $kalenderWidth
+  height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
+  border: 1px solid black 
+  background: #fff url("../inc/bg/baum2.jpg") no-repeat
+  /*background-size: $backgroundWidth
+  background-size: $backgroundSize
+  background-position: $bgPosition 
+
+  div
+    position: absolute
+    border: $doorBorderSize solid darkred
+    width: $doorWidth
+    height: $doorWidth
+    overflow: hidden
+    background: #fff
+
+  h3
+    padding-top: 1.5rem
+    font-weight: bold
+    padding: 1rem
+
+  span
+    position: absolute
+    display: inline-block
+    top: 1rem
+    left: 1rem
+    font-size: 1rem
+    width: 1.2rem
+    height: 1.2rem
+    color: #FFF
+    background: #CD0000
+
+  .left
+    position: absolute
+    left: 0
+    top: 0
+    width: #{$doorWidth+50}
+    height: $doorWidth
+    display: block 
+    border: none
+    background: #fff url("../inc/bg/baum2.jpg") no-repeat
+    /*background-size: $backgroundWidth
+    background-size: $backgroundSize
+    margin-left: $bgPosition
+  a
+    &:hover .left, &:focus .left
+      left: #{-($doorWidth+60)}
+
+    .left
+      display: block
+      position: absolute 
+      transition: left 0.5s
+      
+  .inactive a
+    pointer-events: none
+    cursor: default
+
+  @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
+      #ak#{$row*4+$col+1}
+        left: #{$leftCalc}
+        top: #{$topCalc}
+        .left
+          background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
+  
+#hiddenTuer
+  margin: 1rem
+  max-height: auto