typography and minor text

quantuminformation · Dec 9, 2023 · 5a360e2 · 5a360e2
1 parent 351acf6
commit 5a360e2
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 62 deletions.
diff --git a/css/common.css b/css/common.css
@@ -53,11 +53,6 @@ nav {
   }
 }
 
-h1 {
-  font-size: 2rem;
-  margin: 20px 0;
-}
-
 footer {
   bottom: 0;
   width: 100%;

diff --git a/css/dark.css b/css/dark.css
@@ -17,6 +17,7 @@
   --border-color: var(--default-text);
 
   --default-text: hsl(var(--base-hue), var(--base-saturation), 100%);
+  --minor-text: #aaa; /*accompanies normal font but provides a contrast*/
   --default-text-inv: hsl(var(--base-hue), var(--base-saturation), 0%);
 }
 

diff --git a/css/light.css b/css/light.css
@@ -16,6 +16,7 @@
   --border-color: var(--default-text);
 
   --default-text: hsl(var(--base-hue), var(--base-saturation), 0%);
+  --minor-text: #777; /*accompanies normal font but provides a contrast*/
   --default-text-inv: hsl(var(--base-hue), var(--base-saturation), 100%);
 }
 

diff --git a/css/typography.css b/css/typography.css
@@ -0,0 +1,7 @@
+h1 {
+  font-size: 2rem;
+  margin: 20px 0;
+}
+.minor {
+  color: var(--minor-text);
+}
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="./css/common.css" />
     <link rel="stylesheet" href="./css/form.css" />
     <link rel="stylesheet" href="./css/button-badge.css" />
+    <link rel="stylesheet" href="./css/typography.css" />
     <link rel="stylesheet" href="./css/light.css" media="(prefers-color-scheme: light)" />
     <link rel="stylesheet" href="./css/dark.css" media="(prefers-color-scheme: dark)" />
 

diff --git a/js/routes/cookies.js b/js/routes/cookies.js
@@ -14,7 +14,7 @@ export default (hostComponent) => {
   const personalizationPreference = localStorage.getItem('personalization-cookies') === 'true';
   const advertisementPreference = localStorage.getItem('advertisement-cookies') === 'true';
 
-  // CSS for the modal
+  // CSS for the modal (Instagram Style)
   const cookieModalStyles = `
 <style>
     #nikos-modal-background {
@@ -35,59 +35,36 @@ export default (hostComponent) => {
         opacity: 1;
     }
     #nikos-modal {
-        padding: 1rem;
+        padding: 1rem 2rem;
+        width: 90%; 
+        max-width: 400px;
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: flex-start;
         border-radius: 10px;
-        background-color: var(--bg-color);
-        border: 1px solid var(--border-color);
+        background-color: white; 
+        border: none;
+    }
+    #nikos-modal-label {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 1rem;
     }
     .preference {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        width: 250px;
+        width: 100%;
         margin-bottom: 1rem;
     }
-    .switch {
-        position: relative;
-        display: inline-block;
-        width: 60px;
-        height: 34px;
-    }
-    .switch input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
-    .slider {
-        position: absolute;
+    button#save-preferences {
+        background-color: #3897f0; 
+        color: white;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        align-self: center; 
         cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: #ccc;
-        transition: 0.4s;
-        border-radius: 34px;
-    }
-    .slider:before {
-        position: absolute;
-        content: "";
-        height: 26px;
-        width: 26px;
-        left: 4px;
-        bottom: 4px;
-        background-color: white;
-        border-radius: 50%;
-        transition: 0.4s;
-    }
-    input:checked + .slider {
-        background-color: #2196F3;
-    }
-    input:checked + .slider:before {
-        transform: translateX(26px);
     }
 </style>
 `;
@@ -99,26 +76,15 @@ export default (hostComponent) => {
         <p id="nikos-modal-label">We use cookies to enhance your experience. Choose the cookies you allow:</p>
         <div class="preference">
             <span>Analytics</span>
-            <label class="switch">
-                <input type="checkbox" id="analytics-cookies" ${analyticsPreference ? 'checked' : ''}>
-                <span class="slider"></span>
-            </label>
+            <input type="checkbox" id="analytics-cookies" ${analyticsPreference ? 'checked' : ''}>
         </div>
         <div class="preference">
             <span>Personalization</span>
-            <label class="switch">
-                <input type="checkbox" id="personalization-cookies" ${
-                  personalizationPreference ? 'checked' : ''
-                }>
-                <span class="slider"></span>
-            </label>
+            <input type="checkbox" id="personalization-cookies" ${personalizationPreference ? 'checked' : ''}>
         </div>
         <div class="preference">
             <span>Advertisement</span>
-            <label class="switch">
-                <input type="checkbox" id="advertisement-cookies" ${advertisementPreference ? 'checked' : ''}>
-                <span class="slider"></span>
-            </label>
+            <input type="checkbox" id="advertisement-cookies" ${advertisementPreference ? 'checked' : ''}>
         </div>
         <button id="save-preferences">Save Preferences</button>
     </div>

diff --git a/js/routes/index.js b/js/routes/index.js
@@ -8,6 +8,7 @@ export default (hostComponent) => {
   const indexHTML = `
     <h1>Welcome to the Homepage route!</h1>
     <p>This is some content for the homepage.</p>
+    <p class="minor">This is minor text.</p>
   `;
 
   // Append the new content to the hostComponent