ubdate

src/sass/_home.sass

@@ -0,0 +1,38 @@
+$timerPosition: -10px
+
+#kerzen
+    > img
+        width: 20%
+        display: none
+
+.TimeContainer
+    margin-top: $navtop
+    color: darkred
+    font-size: 20px
+    font-weight: bold
+    text-shadow: 1px 1px 1px darkgray
+
+#clockdiv
+
+    > div
+        display: inline-block
+        background-image: url("../inc/bg/christmas-shopping-card.png")
+        background-repeat: no-repeat
+        /*background-color: Lightgrey
+        background-size: 120%
+        background-position: -23px
+        border: 0px
+        /*border-radius: 100px
+        min-width: 150px
+        height: 133px
+        /*box-shadow: 5px 5px 10px #fff inset, 1px 1px 10px black
+        margin: 0px 0px -25px -10px
+
+        span
+            padding-top: 40px
+            display: inline-block
+            margin-left: $timerPosition
+
+.smalltext
+    font-size: 10px
+    margin-left: $timerPosition

src/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

src/sass/_nav.sass

@@ -0,0 +1,64 @@
+$navInPadding: 0.5rem
+$ulBorder: 2px ridge darkgreen
+$ulRadios: 0.5rem
+
+/* ******************
+
+nav
+  ul
+    list-style-type: none
+    margin: 0 auto
+    padding: 0
+    background-color: hsla(0, 0%, 100%, 0.8)
+    border-bottom: $ulBorder
+    border-left: $ulBorder
+    border-right: $ulBorder
+    border-radius: 0 0 $ulRadios $ulRadios
+    display: inline-block
+    transition: all 60ms
+    box-shadow: inset -2px -2px 10px lightblue, inset 2px 2px 10px lightblue
+    height: 1.5rem
+
+  li
+    float: left
+    width: auto
+    margin: 0px 0px
+    
+    &:first-child
+      padding-left: $navInPadding
+
+    a
+      display: block
+      color: darkred
+      text-align: center
+      padding: 0.3rem $navInPadding $navInPadding 0
+      text-decoration: none
+      font-weight: bold
+      font-size: 0.8rem 
+      
+      &:active, &:hover, &:focus, &.active
+        color: red
+        text-decoration: underline
+        transform: scale(1.1)
+
+  ul li ul li
+    display: inline-block
+
+  > ul > li > ul > li
+    margin: middle
+
+.submenu
+  visibility: hidden
+  position: relative
+  margin-top: -5px
+  margin-left: -10px
+  background-color: rgb(255, 255, 255)
+
+  li, a
+    display: block
+    float: none
+    border-bottom: 1px solid goldenrod
+    margin: 0 0 0 0
+
+.submenuActive
+  visibility: visible

src/sass/_other.sass

@@ -0,0 +1,118 @@
+.titel
+  display: inline-block
+  /*background: url("../inc/teet/red navigation.png") no-repeat
+   background-size: 100%
+   background-position: 0px -63px
+  
+  img
+    max-width: 210px 
+    margin-top: 10px
+  
+  h3
+    //text-decoration: underline
+    color: gold
+    margin-top: -54px
+    padding-bottom: 1.5rem 
+    
+/* *** */
+
+#kstart
+  display: inline-block
+  font-weight: bold
+  color: darkred
+  margin-top: -3rem
+  padding: 1.5rem
+  text-decoration: underline
+  background-color: #fff
+  background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e1e1e1)
+  border: 2px solid #C21514
+  
+/* *** */
+
+.euber
+  display: inline-block
+  color: black
+  font-size: 0.9rem
+  font-weight: normal
+  border: 0px solid red
+  max-width: 700px
+
+  span
+    text-decoration: underline
+    font-weight: bold
+    
+/* *** */
+    
+.radio
+  iframe 
+    padding: 0 0 1rem 1rem
+    
+/* *** */
+
+.select
+  font-size: 0.7rem
+  display: inline-block
+  background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e1e1e1)
+  border: 1px solid darkred
+  border-radius: 5px
+  padding: 0.5rem
+
+
+  select
+    -moz-appearance: none
+    -webkit-appearance: none
+    appearance: none
+    border: none
+    font-family: Times New Roman
+    background-color: transparent
+    font-size: 0.7rem
+    
+/* *** */
+
+button 
+    border: 2px solid darkgreen
+    border-radius: 5px
+    background: linear-gradient(to bottom, #fefffd,#e7e9ea)
+    font-weight: bold
+    padding: 5px 10px 5px 10px
+    color: black 
+    
+    
+    a
+        color: black
+        text-decoration: none
+        padding: 0 0.5rem 0 0
+        
+    img
+        max-width: 2rem
+        padding-right: 0.5rem
+        
+.pList
+    padding-bottom: 0.5rem
+
+    div
+        font-size: 0.9rem
+
+    img
+        max-width: 1.5rem
+
+    button
+        display: inline-flex
+        flex-direction: row
+        align-items: center // Vertical center alignment
+        margin-bottom: auto
+        margin-top: auto
+        padding: 0.5rem
+
+
+.üList
+    display: inline-block
+    padding: 0.5rem
+    margin: 1em
+    color: darkred
+    font-weight: bold
+    text-decoration: underline
+    background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e1e1e1)
+    border: 2px solid black
+    border-radius: 0.5rem 
+    text-shadow: 1px 1px 1px darkgray 

src/sass/_tueren.sass

@@ -0,0 +1,24 @@
+.tueren
+  margin-top: $navtop
+    
+  h3
+    color: darkred 
+    text-decoration: underline
+    margin-top: 3rem
+
+  #txt
+    display: inline-block
+    color: darkred
+    font-family: Verdana, Arial, Helvetica, sans-serif
+    border: 4px ridge red
+    background: hsla(0, 0%, 100%, 0.4) url("../inc/bg/20201222_065407.png") -1px -5px no-repeat
+    background-size: 101%
+    padding: 0 1.5rem 1.5rem 1.5rem
+    width: 75%
+
+  p
+    font-weight: 500
+
+  #false
+    color: red
+    font-weight: 500

src/sass/main.sass

@@ -0,0 +1,61 @@
+$navtop: 20px
+$headerRadios: 2rem
+
+@import 'nav', 'home', 'kalender', 'tueren', 'other'
+
+/* **************************************
+
+body
+    text-align: center
+    margin: 0
+    background-image: url("../inc/bg/snow3.png")
+    background-size: 90%
+    /*background-color: #e2e4e6
+    background-color: hsla(190, 50%, 80%, 0.7) 
+
+header
+    margin: auto
+    /*background-color: Lightgrey
+    background: url("../inc/bg/christmas background.jpg") 0 90% no-repeat
+    background-size: 100%
+    border-bottom: 4px ridge darkgreen
+    border-radius: 0 0 $headerRadios $headerRadios
+    text-align: center
+    padding: 20px
+    box-shadow: -1px -1px 5px silver, 1px 1px 5px black 
+
+    h1
+        color: red
+        text-decoration: underline
+        font-size: 1.5rem
+        font-weight: bold
+        text-shadow: 1px 1px 1px black 
+        
+footer
+    position: fixed
+    bottom: -0rem
+    height: 2rem
+    width: 100%
+    background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e7e9ea)
+    box-shadow: -2px -2px 5px gray
+    
+    img
+        position: absolute 
+        max-width: 15rem
+        /*border: 3px solid red 
+        margin-top: -124px
+    
+    a
+        display: inline-block
+        position: relative 
+        text-decoration: none
+        color: darkgray 
+        font-size: 0.8rem
+        padding-top: 0.7rem
+        /*padding-right: 0.5rem
+        
+#footer2
+    color: darkgray 
+        
+article 
+    padding-bottom: 12rem