added cookie deny button

css/global.css

@@ -98,27 +98,27 @@ body[data-theme="dark"] #cookie-consent {
     background-color: #101010;
 }
 
-body[data-theme="light"] #consent-button {
+body[data-theme="light"] .cookieButton {
     background-color: #D8D8D8;
 }
 
-body[data-theme="dark"] #consent-button {
+body[data-theme="dark"] .cookieButton {
     background-color: #202020;    
 }
 
-body[data-theme="light"] #consent-button span {
+body[data-theme="light"] .cookieButton span {
     color: black;
 }
 
-body[data-theme="light"] #consent-button:hover span {
+body[data-theme="light"] .cookieButton:hover span {
     color: #5aa469;
 }
 
-body[data-theme="dark"] #consent-button span {
+body[data-theme="dark"] .cookieButton span {
     color: white;
 }
 
-body[data-theme="dark"] #consent-button:hover span {
+body[data-theme="dark"] .cookieButton:hover span {
     color: #5aa469;
 }
 

css/index.css

@@ -309,12 +309,16 @@ footer a:hover {
     justify-content: space-around;
     align-items: center;
     background-color: #edeef4;
-    padding: 5px 20px;
+    padding: 5px 300px;
     flex-basis: 100%;
     font-size: 14px;
 }
 
-#consent-button {
+#cookie-consent > div.big {
+    flex-grow: 2;
+}
+
+.cookieButton {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -322,9 +326,10 @@ footer a:hover {
     background-color: #D8D8D8;
     border-radius: 30px;
     padding: 10px 15px;
+    margin: 10px 5px;
 }
 
-#consent-button:hover span {
+.cookieButton:hover span {
     color: #5aa469;
 }
 
@@ -354,6 +359,12 @@ footer a:hover {
     }
 }
 
+@media (max-width: 1000px) {
+    #cookie-consent {
+        padding: 5px 30px;
+    }
+}
+
 @media (max-width: 800px) {
     main {
         margin: 1rem;

index.html

@@ -154,14 +154,15 @@
     </main>
     <footer>
         <div id="cookie-consent">
-            <div>
+            <div class="big">
                 <h3>This website uses cookies</h3>
                 <p>
                     We use cookies to store site settings such as the theme.<br>
-                    Please accept the usage of cookies to enable these features.
+                    Please accept the usage of functional cookies to enable these features.
                 </p>
             </div>
-            <div id="consent-button" class="img-link" onclick="consentGranted();"><span>Accept Cookies</span></div>
+            <div id="consent-button" class="img-link cookieButton" onclick="consentGranted();"><span>Accept</span></div>
+            <div id="deny-button" class="img-link cookieButton" onclick="consentDenied();"><span>Deny</span></div>
         </div>
         <div id="cloudflare">
             <a href="https://www.cloudflare.com" rel="noopener" class="img-link" target="_blank">

js/index.js

@@ -298,3 +298,7 @@ function consentGranted() {
     setCookie("cookie-consent", "true", 365);
     setCookie("theme_pref", document.body.dataset.theme, 31);
 }
+
+function consentDenied() {
+    document.getElementById("cookie-consent").style.display = "none";
+}