feat: colors

_template.scss

@@ -5,4 +5,13 @@ $shade3: #E3E9E8;
 $contrast-color: #7D1224;
 $contrast-shade1: #C14953;
 $text-color: #000000;
-$border-radius: 13px;
+$border-radius: 13px;
+
+$white: #ffffff;
+$light-grey: #f3f3f3;
+$border-color-light: #e1e1e1;
+$dark-text: #2c2c2c;
+$placeholder-bg: #c2c2c2;
+$highlight-color: #fff318;
+$shadow: 3px 7px 26px -5px rgba(0, 0, 0, 0.15);
+$overlay: rgba(63, 63, 63, 0.82);

src/app/(home)/pfarrei/immobilienentwicklung/styles.module.scss

@@ -7,7 +7,7 @@
 }
 
 .prayer {
-  background-color: #efefef;
+  background-color: $light-grey;
   width: 320px;
   padding: 20px;
   flex-shrink: 0;
@@ -37,7 +37,7 @@
   width: 200px;
   height: 200px;
   border-radius: 50%;
-  background-color: #c7d2d1;
+  background-color: $shade2;
   opacity: 0.3;
   z-index: -1;
 }

src/app/(home)/schutzkonzept/styles.module.scss

@@ -1,7 +1,9 @@
+@import 'template.scss';
+
 .action {
   text-align: center;
   padding: 80px 0;
-  background-color: #eeeeee;
+  background-color: $light-grey;
 }
 
 .button {

src/components/AdminMenu/styles.module.scss

@@ -1,10 +1,12 @@
+@import 'template.scss';
+
 .menu {
   position: fixed;
   bottom: 0;
   width: 100%;
   box-sizing: border-box;
   left: 0;
-  background-color: rgba(238, 238, 238, 0.60);
+  background-color: rgba($light-grey, 0.60);
   backdrop-filter: blur(8px);
   display: flex;
   gap: 20px;
@@ -15,5 +17,5 @@
 .menu a {
   padding: 10px 0;
   font-size: 14px;
-  color: #23362c;
+  color: $base-color;
 }

src/components/Banner/styles.module.scss

@@ -1,7 +1,9 @@
+@import 'template.scss';
+
 .banner {
   position: relative;
   height: 634px;
-  background-color: #728f8d;
+  background-color: $shade1;
   background-image: url("banner2.jpg");
   background-size: cover;
   background-position: center center;
@@ -16,7 +18,7 @@
 
 .nameContainer {
   opacity: 1;
-  color: #ececec;
+  color: $white;
   position: absolute;
   bottom: 50px;
   right: 0;

src/components/Button/styles.module.scss

@@ -2,7 +2,7 @@
 
 .button {
   font-family: inherit;
-  color: #ffffff;
+  color: $white;
   border-radius: $border-radius;
   text-align: center;
   border: 0;

src/components/Classifieds/styles.module.scss

@@ -13,14 +13,14 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: #fff;
+  background-color: $white;
   border: 1px solid $shade1;
   padding: 1rem;
   transition: 200ms background-color;
 }
 
 .ad:hover {
-  background-color: #f3f3f3;
+  background-color: $light-grey;
 }
 
 .adText {
@@ -55,7 +55,7 @@
   .moreInfo {
     display: block;
     padding: 10px;
-    color: #ffffff;
+    color: $white;
     font-weight: bold;
     font-size: 16px;
     width: 110px;

src/components/Gallery/fullscreen.module.scss

@@ -7,7 +7,7 @@
   z-index: 99;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(63, 63, 63, 0.82);
+  background-color: $overlay;
   backdrop-filter: blur(8px);
   display: flex;
   justify-content: center;
@@ -22,7 +22,7 @@
 }
 
 .close {
-  color: #ffffff;
+  color: $white;
   font-weight: bold;
   position: fixed;
   top: 35px;

src/components/ImageCard/styles.module.scss

@@ -2,10 +2,10 @@
 
 .container {
   aspect-ratio: 1/1;
-  background-color: #c2c2c2;
+  background-color: $placeholder-bg;
   background-position: center;
   background-size: cover;
-  box-shadow: 3px 7px 26px -5px rgba(0, 0, 0, 0.15);
+  box-shadow: $shadow;
   cursor: pointer;
   overflow: hidden;
   border-top-left-radius: $border-radius;
@@ -14,7 +14,7 @@
 }
 
 .title {
-  background-color: rgba(255, 255, 255, 0.91);
+  background-color: rgba($white, 0.91);
   text-align: center;
   font-size: 18px;
   position: absolute;

src/components/MegaMenu/styles.module.scss

@@ -28,7 +28,7 @@
   flex-shrink: 0;
   border-radius: 13px;
   border: 1px solid $base-color;
-  box-shadow: 3px 7px 26px -5px rgba(0, 0, 0, 0.15);
+  box-shadow: $shadow;
   transition: background-color 0.2s;
 }
 
@@ -84,7 +84,7 @@
 
   .groupTitle {
     margin: 0;
-    color: #2c2c2c;
+    color: $dark-text;
   }
 
   .itemGroupContent {
@@ -94,7 +94,7 @@
   }
 
   .itemDescription {
-    color: #2c2c2c;
+    color: $dark-text;
   }
 
   .item {

src/components/Menu/styles.module.scss

@@ -5,7 +5,7 @@
   gap: 20px;
   color: $base-color;
   padding: 15px 45px;
-  background: rgba(245, 245, 245, 0.65);
+  background: rgba($light-grey, 0.65);
   position: fixed;
   left: 0;
   top: 0;
@@ -50,13 +50,13 @@
   border: none;
   color: inherit;
   text-decoration: none;
-  background-color: #eeeeee;
+  background-color: $light-grey;
   transition: background-color 0.1s ease-in-out;
   font-family: inherit;
 }
 
 .button:hover {
-  background-color: #fff318;
+  background-color: $highlight-color;
   cursor: pointer;
 }
 
@@ -99,7 +99,7 @@
 
   .itemsLeft {
     padding-bottom: 15px;
-    border-bottom: 1px solid #d0d0d0;
+    border-bottom: 1px solid $border-color-light;
   }
 
   .itemsLeft, .itemsRight {

src/components/Pill/styles.module.scss

@@ -10,5 +10,5 @@
 
 .danger {
   background-color: $contrast-shade1;
-  color: #ffffff;
+  color: $white;
 }

src/components/PopupButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import 'template.scss';
+
 .container {
   display: inline-grid;
   place-items: center;
@@ -11,7 +13,7 @@
 
 .popup {
   grid-area: a;
-  background-color: white;
+  background-color: $white;
   box-shadow: 0 0 21px 0 rgba(0,0,0,0.4);
   border-radius: 7px;
   min-width: 200px;
@@ -23,7 +25,7 @@
   font-weight: bold;
   text-align: center;
   padding: 10px 0;
-  border-bottom: 1px solid #e1e1e1;
+  border-bottom: 1px solid $border-color-light;
 }
 
 .link {
@@ -36,7 +38,7 @@
 }
 
 .link:hover {
-  background-color: #e1e1e1;
+  background-color: $border-color-light;
 }
 
 .closeButton {
@@ -44,7 +46,7 @@
   top: 10px;
   right: 5px;
   border: none;
-  background: white;
+  background: $white;
   color: inherit;
   cursor: pointer;
   font-size: 16px;
@@ -58,6 +60,6 @@
 
 .closeButton:hover,
 .closeButton:focus-visible {
-  background-color: #f1f1f1;
+  background-color: $light-grey;
   outline: none;
 }

src/components/SideSlider/styles.module.scss

@@ -39,7 +39,7 @@ $iconSize: 150px;
   padding-left: calc($iconSize/2);
   min-height: 450px;
   width: $width;
-  color: #ffffff;
+  color: $white;
 }
 
 .padding {

src/compositions/Footer/styles.module.scss

@@ -20,7 +20,7 @@
 }
 
 .list li::marker {
-  color: rgba(66, 97, 86, 0.6);
+  color: rgba($base-color, 0.6);
 }
 
 .list li {

src/compositions/PublicationAndNewsletter/styles.module.scss

@@ -1,5 +1,7 @@
+@import 'template.scss';
+
 .image {
-  border: 30px solid #f8f8f8;
+  border: 30px solid $light-grey;
   margin-bottom: 10px;
   height: auto;
   width: 70%;