PepperPig

src/sass/_home.sass

@@ -7,7 +7,7 @@ $timerPosition: -10px
 
 .TimeContainer
     margin-top: $navtop
-    color: $nav-font-color
+    color: $siteColor
     font-size: 20px
     font-weight: bold
     text-shadow: 1px 1px 1px darkgray

src/sass/_kalender.sass

@@ -25,7 +25,7 @@ $doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
 
   div
     position: absolute
-    border: $doorBorderSize solid $nav-font-color
+    border: $doorBorderSize solid $siteColor
     width: $doorWidth
     height: $doorWidth
     overflow: hidden

src/sass/_nav2.sass

@@ -3,7 +3,6 @@ $content-width: 1000px
 $breakpoint: 799px
 $nav-height: 70px
 $nav-background: hsl(0,0%,100%,0.5)
-$nav-font-color:  darkgreen 
 $link-hover-color: Lightgrey 
 $nav-background2: url("../inc/bg/christmas-banner-6739203.jpg") 0 86% no-repeat
 
@@ -24,23 +23,24 @@ $nav-background2: url("../inc/bg/christmas-banner-6739203.jpg") 0 86% no-repeat
   background: $nav-background2
   border-radius: 0 0 2rem 2rem
   background-size: 100%
-  border-bottom: 4px ridge darkgreen
+  border-bottom: 4px ridge $siteColor
   background-size: 100%
 
 // Logo and branding
-.brand 
+.brand
+  text-align: left
   position: absolute
   padding-left: 20px
   float: left
-  line-height: $nav-height
-  text-transform: uppercase
-  font-size: 1.4em
+  /*line-height: $nav-height
+  /*text-transform: uppercase
+  font-size: 1.2em
   font-weight: bold
   text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
-  margin-top: -0.5rem 
+  margin: 0.9rem 0 0 3rem 
   a,
   a:visited 
-    color: darkred 
+    color: $headerFontColor
     text-decoration: none
 
 
@@ -76,12 +76,12 @@ nav
         display: block
         padding: 0.5rem 0.5rem
         //line-height: $nav-height
-        color: $nav-font-color
+        color: $headerFontColor
         text-decoration: none
         
         &:hover, &:active, &.active
           //background: $link-hover-color
-          color: red
+          color: $siteColor
           //transform: scale(1.1)
     
         &:not(:only-child):after
@@ -122,7 +122,7 @@ nav
 @media only screen and (max-width: 798px) 
   // Hamburger nav visible on mobile only
   .brand
-    margin: auto 0
+    margin: 0.9rem 0 0 1rem
   .nav-mobile 
     display: block
   
@@ -134,7 +134,7 @@ nav
     background: none 
     ul 
       display: none
-      border: 4px ridge darkgreen
+      border: 4px ridge $siteColor
       border-radius: 2rem
       
       li 

src/sass/_other.sass

@@ -22,7 +22,7 @@
 #kstart
   display: inline-block
   font-weight: bold
-  color: $nav-font-color
+  color: $headerFontColor
   margin-top: -3rem
   padding: 1.5rem
   text-decoration: underline
@@ -37,7 +37,7 @@
   color: black
   font-size: 0.9rem
   font-weight: normal
-  border: 3px solid $nav-font-color
+  border: 3px solid $siteColor
   max-width: 460px
   padding: 0 1rem 0 1rem
   background-color: #fff
@@ -75,7 +75,7 @@
 /* *** */
 
 button 
-    border: 2px solid darkgreen
+    border: 2px solid $siteColor
     border-radius: 5px
     background: linear-gradient(to bottom, #fefffd,#e7e9ea)
     font-weight: bold
@@ -84,7 +84,7 @@ button
     
     
     a
-        color: black
+        color: $headerFontColor
         text-decoration: none
         padding: 0 0.5rem 0 0
 
@@ -124,7 +124,7 @@ button
             
         #FCover
             max-width: 10rem
-            border: 3px solid darkred
+            border: 3px solid $siteColor
 
             
         button
@@ -137,7 +137,7 @@ button
     display: inline-block
     padding: 0.5rem
     margin: 1em
-    color: darkred
+    color: $headerFontColor
     font-weight: bold
     text-decoration: underline
     background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e1e1e1)
@@ -174,8 +174,8 @@ button
 .gimages
   display: inline-block
   max-width: 30rem
-  background: hsla(126, 26%, 51%, 0.3)
-  border: 2px solid darkgreen
+  background: $galeryBackgraund
+  border: 2px solid $siteColor
   padding: 1rem 0.5rem 0.5rem 0.5rem
 
   a
@@ -185,7 +185,7 @@ button
   img
     width: 9rem
     height: 9rem
-    border: 3px solid darkred
+    border: 3px solid $siteColor
     object-fit: cover
     
 .neu

src/sass/_tueren.sass

@@ -1,4 +1,4 @@
-$bibi: darkgreen
+$bibi: $siteColor
 $melly: #6959cd
 
 
@@ -14,7 +14,7 @@ $melly: #6959cd
     display: inline-block
     color: darkred
     font-family: Verdana, Arial, Helvetica, sans-serif
-    border: 4px ridge  #90C145
+    border: 4px ridge $siteColor
     background: hsla(0, 0%, 100%, 0.5) url("../inc/bg/1667917199713.png") -1px -5px no-repeat
     background-size: 100%
     //background: hsla(0, 0%, 100%, 0.5)
@@ -22,7 +22,7 @@ $melly: #6959cd
     width: 75%
     
     u
-      color: black
+      color: $headerFontColor
       font-weight: bold 
       
     #bibi
@@ -64,8 +64,8 @@ $melly: #6959cd
 
   img
     display: inline-block
-    margin: 1rem 0 -4px 0
-    width: 50%
+    margin: 1rem 0 -14px 0
+    width: 40%
 
   p
     font-weight: 500

src/sass/main.sass

@@ -1,5 +1,12 @@
+/*   https://www.colorhexa.com/e945bd
+
+
+
 $navtop: 20px
 $headerRadios: 2rem
+$siteColor: #E945BD
+$galeryBackgraund: hsla(326, 78.8%, 59.2%, 0.2)
+$headerFontColor: #de5359
 
 @import 'nav2', 'home', 'kalender', 'tueren', 'other'
 
@@ -8,11 +15,24 @@ $headerRadios: 2rem
 body
     text-align: center
     margin: 0
-    background-image: url("../inc/bg/snow3.jpg")
-    background-size: 90%
+
+    
     background-color: darkgray //hsla(190, 50%, 80%, 0.7)
     //height: 100vh
 
+    &:before
+        height: 100%
+        content: ""
+        background-size: 90%
+        background-image: url("../inc/bg/snow3.jpg")
+        filter: hue-rotate(80deg)
+        opacity: 100%
+        top: 0
+        left: 0
+        bottom: 0
+        right: 0
+        position: fixed
+        z-index: -1
  
         
 footer