Merge pull request #38 from VaagenIM/feature/front-end

Changed "theme" button to "settings" and added a "Dyslexia Friendly Mode"

piggy/static/css/styles.css

@@ -1,6 +1,63 @@
 :root {
   font-size: 15px;
-  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
+
+  font-family: "Quicksand", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
+/* Regular */
+@font-face {
+  font-family: 'OpenDyslexic';
+  src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2'),
+       url('/static/fonts/OpenDyslexic-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: -10px;
+}
+
+/* Italic */
+@font-face {
+  font-family: 'OpenDyslexic';
+  src: url('/static/fonts/OpenDyslexic-Italic.woff2') format('woff2'),
+  url('/static/fonts/OpenDyslexic-Italic.woff') format('woff');
+  font-weight: 400;
+  font-style: italic;
+  letter-spacing: -10px;
+}
+
+/* Bold */
+@font-face {
+  font-family: 'OpenDyslexic';
+  src: url('/static/fonts/OpenDyslexic-Bold.woff2') format('woff2'),
+       url('/static/fonts/OpenDyslexic-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: -10px;
+}
+
+/* Bold Italic */
+@font-face {
+  font-family: 'OpenDyslexic';
+  src: url('/static/fonts/OpenDyslexic-BoldItalic.woff2') format('woff2'),
+       url('/static/fonts/OpenDyslexic-BoldItalic.woff') format('woff');
+  font-weight: 700;
+  font-style: italic;
+  letter-spacing: -10px;
+}
+
+[data-font-theme="dyslexia"] * {
+  font-family: "Lexend", sans-serif;
+  letter-spacing: 1px;
+  font-weight: 400 !important;
+}
+
+[data-font-theme="default"] * {
+  letter-spacing: 0px;
+}
+
+.transition {
+  transition: 0.4s ease;
 }
 
 .main-container {
@@ -197,7 +254,8 @@
   color: var(--piggy-text-breadcrumb);
 }
 
-#theme-modal-btn {
+/* Settings Button */
+#settings-btn {
   background-color: var(--piggy-button);
   color: var(--piggy-text-button);
   border: 1px solid var(--piggy-dark);
@@ -211,74 +269,81 @@
   margin-left: auto;
 }
 
-#theme-modal-btn:hover {
+#settings-btn:hover {
   background-color: var(--piggy-button-hover);
 }
 
-
-/* MODAL */
-.modal {
-  display: none;
+/* Settings Menu */
+.settings-menu {
   position: fixed;
-  left: 0;
   top: 0;
-  width: 100%;
+  right: 0;
+  width: 0; /* Start closed */
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* Background overlay */
-  justify-content: center;
-  align-items: center;
+  background-color: var(--piggy-menu);
+  color: var(--piggy-menu-text);
+  overflow-x: hidden; /* Hide horizontal overflow */
+  transition: width 0.5s;
   z-index: 10000;
+  border-left: 1px solid var(--piggy-button);
 }
 
-.modal-content {
-  background-color: white;
-  padding: 20px;
-  border-radius: 5px;
-  text-align: center;
+/* Open State */
+.settings-menu.open {
+  width: 300px; /* Adjust the width as needed */
 }
 
-.theme-option {
-  margin: 5px;
+/* Close Button */
+.settings-menu .closebtn {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  font-size: 36px;
+  text-decoration: none;
+}
+
+/* Settings Content */
+.settings-content {
+  width: 300px;
+  padding: 60px 20px 20px 20px; /* Top padding to push content below the close button */
+}
+
+/* Theme Select */
+.settings-option {
+  width: 100%; /* Occupies full width of its container */
   padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  border: 1px solid var(--piggy-dark);
   background-color: var(--piggy-button);
   color: var(--piggy-text-button);
   cursor: pointer;
-  border-radius: 5px;
-  width: max-content;
-  border: -1px solid black;
+  appearance: none; /* Removes default styles for consistent appearance */
 }
 
-.theme-option:hover {
+.settings-option:hover {
   background-color: var(--piggy-button-hover);
 }
 
-.theme-title {
-  color: #000000;
-  font-weight: bold;
+.theme-select option {
+  background-color: var(--piggy-light);
+  color: var(--piggy-dark);
 }
 
-.theme-tooltip {
+/* Option Item */
+.theme-option {
+  padding: 10px;
+  cursor: pointer;
+  color: var(--piggy-dark);
   position: relative;
-  display: inline-block;
 }
 
-.theme-tooltip .theme-tooltiptext {
-  visibility: hidden;
-  width: 120px;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border: 2px solid white;
-  border-radius: 6px;
-  padding: 5px 0;
-
-  /* Position the tooltip */
-  position: absolute;
-  z-index: 1;
-  top: 100%;
-  left: 0%;
+/* Option Hover */
+.theme-option:hover {
+  background-color: var(--piggy-button-hover);
 }
 
-.theme-tooltip:hover .theme-tooltiptext {
+/* Show Tooltip on Hover */
+.theme-option:hover .theme-tooltiptext {
   visibility: visible;
 }

piggy/static/css/themes/classic.css

@@ -49,6 +49,11 @@ description: The classic look of piggy!
   --piggy-text-title: var(--piggy-dark);
   --piggy-text-breadcrumb: var(--piggy-dark);
   --piggy-text-breadcrumb-hover: var(--piggy-dark);
+
+  --piggy-menu: var(--piggy-light);
+  --piggy-menu-text: var(--piggy-dark);
+
+  transition: 1s ease;
 }
 
 [data-theme="classic"] .level-count-container {

piggy/static/css/themes/dark.css

@@ -53,4 +53,7 @@ description: The default dark theme.
     --piggy-text-title: var(--piggy-light);
     --piggy-text-breadcrumb: var(--piggy-light);
     --piggy-text-breadcrumb-hover: #a6aaad;
+
+    --piggy-menu: var(--piggy-dark);
+    --piggy-menu-text: var(--piggy-light);
   }

piggy/static/css/themes/high-contrast.css

@@ -91,5 +91,30 @@ description: High contrast theme for maximum visibility.
   color: #fff;
   background-color: #000;
   top: 7px;
-  left: 12px;
+  left: 11px;
+}
+
+[data-theme="high-contrast"] .settings-menu {
+  background-color: black;
+  border-left: 4px solid white;
+}
+
+[data-theme="high-contrast"] .theme-select option {
+  background-color: black;
+}
+
+[data-theme="high-contrast"] .settings-option {
+  border-width: 3px;
+  border-radius: 0px;
+}
+
+[data-theme="high-contrast"] #settings-btn {
+  border-radius: 0;
+  border-width: 3px;
+}
+
+[data-theme="high-contrast"] .tag-box {
+  background-color: transparent !important;
+  border-color: white !important;
+  border-width: 3px;
 }

piggy/static/css/themes/light.css

@@ -50,9 +50,16 @@ description: The default light theme.
   --piggy-text-title: var(--piggy-dark);
   --piggy-text-breadcrumb: var(--piggy-dark);
   --piggy-text-breadcrumb-hover: var(--piggy-dark);
+
+  --piggy-menu: var(--piggy-light);
+  --piggy-menu-text: var(--piggy-dark);
 }
 
 [data-theme="light"] .level-count-container {
   color: var(--piggy-dark);
   background-color: var(--piggy-main);
+}
+
+[data-theme="light"] .settings-option {
+  color: var(--piggy-dark);
 }

piggy/static/css/themes/piggy-dark.css

@@ -50,10 +50,9 @@ description: A dark pink theme.
   --piggy-text-title: var(--piggy-dark);
   --piggy-text-breadcrumb: var(--piggy-dark);
   --piggy-text-breadcrumb-hover: #f0e1e4; /* Hover effect for breadcrumb */
-}
 
-[data-theme="piggy-dark"] body {
-  font-family: "Playpen Sans", sans-serif;
+  --piggy-menu: var(--piggy-light);
+  --piggy-menu-text: var(--piggy-dark);
 }
 
 [data-theme="piggy-dark"] .level-count-container {

piggy/static/css/themes/piggy.css

@@ -49,10 +49,11 @@ description: Relaxing pastel pink theme.
   --piggy-text-title: var(--piggy-dark);
   --piggy-text-breadcrumb: var(--piggy-dark);
   --piggy-text-breadcrumb-hover: var(--piggy-dark);
-}
 
-[data-theme="piggy"] body {
-  font-family: "Playpen Sans", sans-serif;
+  --piggy-font: var("Playpen Sans", sans-serif);
+
+  --piggy-menu: rgb(255, 204, 213);
+  --piggy-menu-text: var(--piggy-dark);
 }
 
 [data-theme="piggy"] .level-count-container {

piggy/static/css/themes/synthwave.css

@@ -53,4 +53,15 @@ description: Fancy sunset, purple, neon, gradients!
   --piggy-text-title: #ffcc66; /* Golden for titles */
   --piggy-text-breadcrumb: var(--piggy-text-main);
   --piggy-text-breadcrumb-hover: #ffd27f; /* Soft golden yellow for hover */
+
+  --piggy-menu: var(--piggy-dark);
+  --piggy-menu-text: var(--piggy-light);
+}
+
+[data-theme="synthwave"] .settings-option {
+  color: var(--piggy-light);
+}
+
+[data-theme="synthwave"] #settings-btn {
+  color: var(--piggy-light);
 }