From 137da7dfb43d5e1edaf174299cd89375f9660bfc Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Sun, 14 Mar 2021 18:16:00 +0100
Subject: [PATCH] Replaced #fff and white with css variable. Change
 --nearly-black to --wtf-nearly-black.

---
 assets/css/style.css | 53 ++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index ccf290a..108af39 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -15,7 +15,8 @@
 
 :root {
     /* default text color */
-    --nearly-black: #333;
+    --wtf-nearly-black: #333;
+    --wtf-nearly-white: #fff;
     /* WTF Farben gemäß https://git.vebit.xyz/vebit/swag/src/branch/master/README.markdown */
      --wtf-orange: #f60;
      --wtf-light-orange: #ffcba9;
@@ -39,7 +40,7 @@ body {
     font-family: 'Lato', sans-serif;
     font-weight: normal;
     line-height: 1.4rem;
-    color: var(--nearly-black);
+    color: var(--wtf-nearly-black);
     background-color: var(--wtf-light-grey)
 }
 
@@ -73,7 +74,7 @@ body {
 }
 
 .primary_nav__toggle rect {
-    fill: var(--nearly-black);
+    fill: var(--wtf-nearly-black);
 }
 
 .primary_nav__toggle p {
@@ -82,7 +83,7 @@ body {
     position: relative;
     left: -0.2rem;
     bottom: 0.65rem;
-    color: var(--nearly-black);
+    color: var(--wtf-nearly-black);
 }
 
 .primary_nav__navlist {
@@ -111,11 +112,11 @@ body {
 }
 
 .primary_nav__navlink {
-    color: var(--nearly-black);
+    color: var(--wtf-nearly-black);
 }
 
 .primary_nav__sub_navitem .primary_nav__navlink {
-    color: #fff;
+    color: var(--wtf-nearly-white);
 }
 
 .primary_nav__navlink:hover {
@@ -165,8 +166,8 @@ body {
     width: 5px;
     display: inline-block;
     transform: rotate(0.125turn);
-    border-bottom: 3px solid var(--nearly-black);
-    border-right: 3px solid var(--nearly-black);
+    border-bottom: 3px solid var(--wtf-nearly-black);
+    border-right: 3px solid var(--wtf-nearly-black);
 }
 
 .primary_nav__sub_navitem {
@@ -192,7 +193,7 @@ body {
 }
 
 .secondary_nav__navlink {
-    color: var(--nearly-black);
+    color: var(--wtf-nearly-black);
 }
 
 .secondary_nav__navlink:hover {
@@ -231,9 +232,9 @@ header {
     margin: 1.5rem 1rem 0rem 0;
     padding: 0.5rem 2.5rem 0.5rem 2.5rem;
     background-color: var(--wtf-light-blue);
-    color: #fff;
+    color: var(--wtf-nearly-white);
     font-size: 1.2rem;
-    border: solid #fff 3px;
+    border: solid var(--wtf-nearly-white) 3px;
     border-radius: 2rem;
 }
 
@@ -370,7 +371,7 @@ header {
 
 .header__claim h2 span {
     display: inline-block;
-    background-color: #fff;
+    background-color: var(--wtf-nearly-white);
     margin-top: 1px;
     padding: 0 1rem;
 }
@@ -418,12 +419,12 @@ header {
 }
 
 .header__sub_claim p {
-    color: #fff;
+    color: var(--wtf-nearly-white);
     margin: 0.5em 0 0 0;
 }
 
 .header__sub_claim a {
-    color: #fff;
+    color: var(--wtf-nearly-white);
     text-decoration: underline;
 }
 
@@ -433,7 +434,7 @@ header {
 
 .content__inner_third_button_link,
 .claim__button_link {
-    color: white !important;
+    color: var(--wtf-nearly-white) !important;
     font-family: 'Lato Bold';
 }
 
@@ -543,7 +544,7 @@ i {
 }
 
 hr {
-    color: var(--nearly-black);
+    color: var(--wtf-nearly-black);
     margin: 0.25rem 0;
 }
 
@@ -567,7 +568,7 @@ hr.-even {
 }
 
 .content__blog_link.-odd {
-    color: var(--nearly-black) !important;
+    color: var(--wtf-nearly-black) !important;
 }
 
 .content__blog_link.-even {
@@ -607,7 +608,7 @@ hr.-even {
 }
 
 .claim__text {
-    color: white;
+    color: var(--wtf-nearly-white);
     font-size: 1.2rem;
     line-height: 1.4em;
     margin: 0.5rem 0 1.5rem 0;
@@ -631,7 +632,7 @@ hr.-even {
 }
 
 .card__heading {
-    color: white;
+    color: var(--wtf-nearly-white);
     font-family: 'Lato';
     font-size: 1.3rem;
     text-align:center;
@@ -802,7 +803,7 @@ hr.-even {
 /* footer - Start */
 footer {
     background-color: var(--wtf-footer-grey);
-    color: white;
+    color: var(--wtf-nearly-white);
     padding: 0 0 3% 0;
     display: grid;
     grid-template-rows: 46px auto;
@@ -1190,7 +1191,7 @@ footer {
     .header__claim p {
         margin: 0;
         padding: 1.5rem;
-        color: white;
+        color: var(--wtf-nearly-white);
     }
 
     .header__sub_claim {
@@ -1322,7 +1323,7 @@ footer {
         margin: 0;
         padding: 1.5rem;
         background: var(--wtf-dark-blue);
-        color: white;
+        color: var(--wtf-nearly-white);
     }
 
     .header__sub_claim {
@@ -1392,9 +1393,9 @@ footer {
         top: 6.5rem;
         right: 0;
         z-index: 30;
-        border-top: 2px solid var(--nearly-black);
-        border-left: 2px solid var(--nearly-black);
-        border-bottom: 2px solid var(--nearly-black);
+        border-top: 2px solid var(--wtf-nearly-black);
+        border-left: 2px solid var(--wtf-nearly-black);
+        border-bottom: 2px solid var(--wtf-nearly-black);
         background-color: var(--wtf-light-grey);
         box-shadow: 5px 0px 15px 5px rgba(0, 0, 0, 0.25);
     }
@@ -1434,7 +1435,7 @@ footer {
     }
 
     .primary_nav__sub_navitem .primary_nav__navlink {
-        color: var(--nearly-black)
+        color: var(--wtf-nearly-black)
     }
 
     .primary_nav__navlink:hover {