update, text, response

2025-11-02 11:09:14 +01:00
parent 14776c86b0
commit eed8a4ddcf
2794 changed files with 156786 additions and 129204 deletions
--- a/src/sass/_base.sass
+++ b/src/sass/_base.sass
@@ -0,0 +1,88 @@
+
+// =============================
+// 🌍 Globale Variablen & Mixins
+// =============================
+
+
+// 🎨 Farben
+// ------------------------------
+$siteColor: #A0522D
+$backgroundTxt: hsla(0, 0%, 100%, 0.7) url("../inc/bg/1667917199713.png") -1px -5px no-repeat
+$galeryBackgraund: hsla(326, 78.8%, 59.2%, 0.2)
+$headerFontColor: #CD853F
+$txtColor: darkred
+$melly: #6959cd
+$bibi: $siteColor
+
+// 📐 Layout / Abstände
+// ------------------------------
+$navtop: 20px
+$headerRadios: 2rem
+$imageGweight: 8rem
+
+// Font-fluid
+// ------------------------------
+@mixin txt-base($size)
+  font-size: $size
+  //font-size: calc(#{$size} / 0.7) // kompensiert initial-scale=0.7
+  font-weight: bold
+  color: $txtColor
+  font-family: Verdana, Arial, Helvetica, sans-serif
+
+@mixin txt-Absatz
+  @include txt-base(clamp(1rem, 1.6vw, 1.4rem))
+
+@mixin txt-h3
+  @include txt-base(clamp(1.2rem, 2vw, 2.2rem))
+  text-decoration: underline
+
+@mixin txt-h2
+  @include txt-base(clamp(1.5rem, 2.4vw, 2.8rem))
+  text-decoration: underline
+
+@mixin txt-h1
+  @include txt-base(clamp(2rem, 3vw, 3.6rem))
+  text-decoration: underline
+  text-transform: uppercase
+
+
+// Personen-Textfarbe
+// ------------------------------
+@mixin personen-txt($color, $padding: 0.3rem)
+  @include txt-Absatz
+  color: $color
+  font-style: italic
+  u
+    color: $color
+  span
+    display: inline-block
+    padding: $padding 0 0 0
+
+
+
+
+
+
+//##### in Arbeit ######
+
+
+// 💻 Breakpoints (global)
+// ------------------------------
+//$breakpoints: ( small: 480px, medium: 768px, large: 1024px, xlarge: 1280px)
+
+// ==============================
+// 🧩 Mixins
+// ===========≈==================
+
+// 📱 Responsive Mixins
+// ------------------------------
+
+//@mixin respond-to($size)
+//  $value: if(map-has-key($breakpoints, $size), map-get($breakpoints, $size), $size)
+//  @media only screen and (max-width: $value)
+//    @content
+
+//@mixin respond-from($size)
+//  $value: if(map-has-key($breakpoints, $size), map-get($breakpoints, $size), $size)
+//  @media only screen and (min-width: $value)
+//    @content
--- a/src/sass/_home.sass
+++ b/src/sass/_home.sass
@@ -1,3 +1,5 @@
+@use './base' as *
+
 $timerPosition: -10px

 #kerzen
--- a/src/sass/_kalender.sass
+++ b/src/sass/_kalender.sass
@@ -1,9 +1,12 @@
+@use 'sass:math'
+@use './base' as *
+
 $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
+$marginBetween: 9px     // abstand zwischen den Tueren
 $doorBorderSize: 2px    
 $doorWidth: math.div($kalenderWidth - 3.5 * $marginLeftRight - 3 * $marginBetween, 4)

--- a/src/sass/_mixins.sass
+++ b/src/sass/_mixins.sass
@@ -1,20 +0,0 @@
-// Personen Farbe txt
-@mixin personen-txt($color)
-      color: $color
-      font-weight: bold
-      u
-        color: $color
-      span
-        display: inline-block
-        padding: 0.3rem 0 0 0
-        
-        
-      
-    #bibi
-      @include personen-txt($bibi)
-
-    #melly
-      @include personen-txt($melly)
-  
-    #packa
-      @include personen-txt(darkgreen)
--- a/src/sass/_nav2.sass
+++ b/src/sass/_nav2.sass
@@ -1,3 +1,5 @@
+@use './base' as *
+
 // Navigation Variables
 $content-width: 1000px
 $breakpoint: 799px
--- a/src/sass/_other.sass
+++ b/src/sass/_other.sass
@@ -1,3 +1,5 @@
+@use './base' as *
+
 .titel
  //display: inline-block
  //margin: 0 25%
--- a/src/sass/_tueren.sass
+++ b/src/sass/_tueren.sass
@@ -1,58 +1,59 @@
-$bibi: $siteColor
-$melly: #6959cd
-
+@use './base' as *

 .tueren
  margin-top: $navtop
    
  h3
-    color: darkred 
-    text-decoration: underline
-    margin-top: 3.8rem
+    @include txt-h3
+    margin-top: clamp(3.8rem, 5vh, 10rem)
    padding-bottom: 1rem

  #txt
    display: inline-block
-    color: darkred
-    font-family: Verdana, Arial, Helvetica, sans-serif
+    @include txt-Absatz
    border: 4px ridge $siteColor
-    background: hsla(0, 0%, 100%, 0.5) url("../inc/bg/1667917199713.png") -1px -5px no-repeat
+    background: $backgroundTxt
    background-size: 100%
    //background: hsla(0, 0%, 100%, 0.5)
    padding: 0 1.5rem 0 1.5rem
-    width: 75%
+    width: clamp(25rem, 40vw, 50rem)
+    font-weight: 500
    
    u
+      @include txt-Absatz
      margin-top: 1rem
      color: $headerFontColor
-      font-weight: bold
+      
+  img
+    display: inline-block
+    margin: 0rem 0 10px 0
+    width: 30%
+      
+  #false
+    @include txt-Absatz
+    
+  #falseImg
+    display: inline-block
+    margin: 1rem 0 -5px 0 
+    width: clamp(100px, 18vw, 150px)
+      
+  #bibi
+    @include personen-txt(darkgreen)

-    #bibi
-      color: $bibi
-      u
-        color: $bibi
-        font-weight: bold 
-      span
-        color: grey
-        margin: 1rem 0 0 0
-        
-    #melly
-      color: $melly
-      u
-        color: $melly
-        font-weight: bold 
-      span
-        color: grey
-        margin: 1rem 0 0 0
-        
-    #packa
-      color: darkgreen
-      font-weight: bold
-      u
-        color: darkgreen 
-      span
-        display: inline-block
-        padding: 0.3rem 0 0 0
+  #melly
+    @include personen-txt($melly)
+  
+  #packa
+    @include personen-txt(darkgreen)
+    
+  #tina
+    @include personen-txt(#8b7500)
+    
+  #alex
+    @include personen-txt(#36648b)
+    
+  #otherPerson
+    @include personen-txt(black)
    
    
  .schneei
@@ -73,32 +74,14 @@ $melly: #6959cd
      margin-top: -140px
      z-index: 0

-
-  img
-    display: inline-block
-    margin: 0rem 0 10px 0
-    width: 30%
-
  #schneiiW
    display: inline-block
    margin: 0rem 0 -4.5px 0
    width: 40%
-    
+ 
  #packaW
    display: inline-block
    margin: 0rem 0 -4.5px 0
-    width: 25%  
+    width: 25% 

    
-  #falseDay
-    display: inline-block
-    margin: 1rem 0 -5px 0 
-    width: 40%
-
-  p
-    font-weight: 500
-
-  #false
-    color: red
-    font-weight: 500
-    
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -1,81 +1,105 @@
-/*   https://www.colorhexa.com/e945bd
+//cwebp <Datei> -q 80 -o <name>.webp
+//Import 
+//####################
+@use 'base' as *
+@use 'nav2'
+@use 'home'
+@use 'kalender'
+@use 'tueren'
+@use 'other'

-//'mixins'
-
-
-// ### System Modul
-@use 'sass:math'
-// ################
-
-$navtop: 20px
-$headerRadios: 2rem
-$siteColor: #A0522D
-$galeryBackgraund: hsla(326, 78.8%, 59.2%, 0.2)
-$headerFontColor: 	#CD853F
-$imageGweight: 8rem
-
-
-@import 'nav2', 'home', 'kalender', 'tueren', 'other'

 /* **************************************
-
+  
+// =============================
+// 🩶 BODY + HINTERGRUND
+// =============================
 body
-    text-align: center
-    margin: 0 
+  text-align: center
+  margin: 0
+  min-height: 100vh
+  overflow-x: hidden
+  background-color: #fefefe
+  background-image: url("../inc/bg/hufeisen_pattern_1024.webp")
+  background-repeat: repeat
+  background-size: 60%
+  background-attachment: scroll
+  background-position: top center
+  position: relative

-    
-    &:before
-        height: 100%
-        content: ""
-        background-size: 60%
-        background-image: url("../inc/bg/hufeisen_pattern_1024.png")
-        //filter: hue-rotate(-50deg)
-        //background-repeat: no-repeat
-        inset: 0
-        position: fixed
-        z-index: -1
-    &:after
-        content: ""
-        position: fixed
-        top: 150px
-        left: 50%
-        transform: translateX(-50%)
-        width: 800px
-        height: 800px
-        background-image: url("../inc/bg/golden_christmas_tree.png")
-        background-repeat: no-repeat
-        background-size: contain
-        z-index: -1
-        pointer-events: none
-        
-footer
-    position: fixed
-    bottom: -0rem
-    height: 2rem
+article
+  position: relative
+  z-index: 1
+  padding-bottom: 10rem    // Platz für Schneemann + Footer-Inhalte
+
+// ✨ Deko – goldener Weihnachtsbaum in der Mitte
+body::after
+  content: ""
+  position: fixed
+  top: 150px
+  left: 50%
+  transform: translateX(-50%)
+  width: 800px
+  height: 800px
+  background-image: url("../inc/bg/golden_christmas_tree.webp")
+  background-repeat: no-repeat
+  background-size: contain
+  z-index: -1
+  opacity: 0.9
+  pointer-events: none
+  
+#debug-overlay 
+  backdrop-filter: blur(3px)
+  box-shadow: 0 0 8px rgba(0,0,0,0.3)
+
+
+
+
+// =============================
+// ☃️ SCHNEEMANN (über dem Footer)
+// =============================
+#snowman
+  position: fixed
+  bottom: clamp(0.1rem, 0.9vh, 3rem)  // reagiert auf Bildschirmhöhe
+  left: 50%
+  transform: translateX(-50%)
+  width: clamp(10rem, 40vw, 16rem)               // dynamisch skalierend
+  z-index: 15
+  pointer-events: none
+  transition: all 0.3s ease-out
+
+  img
+    display: block
    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 
-    
+    height: auto
+
+
+// =============================
+// 📄 FOOTER (unter Schneemann)
+// =============================
+footer
+  position: fixed
+  bottom: 0
+  left: 0
+  width: 100%
+  min-height: clamp(2rem, 2vw, 5rem)
+  background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e7e9ea)
+  box-shadow: -2px -2px 5px rgba(0,0,0,0.2)
+  z-index: 10
+  display: flex
+  justify-content: center
+  align-items: center
+  gap: 1rem
+
+  a
+    text-decoration: none
+    color: darkgray
+    font-size: 0.8rem
+    transition: color 0.3s
+    &:hover
+      color: #555
+
+#footer2
+  color: darkgray
+

-