Merge pull request #6 from CSESoc-CompClub/theme

ugly but fine

Author: Margaritalala

book.toml

@@ -8,7 +8,7 @@ language = "en"
 build-dir = "book"
 
 [output.html]
-default-theme = "scifi"
+default-theme = "pirate"
 additional-css = ["theme/custom.css"]
 
 [preprocessor.callouts]

theme/css/variables.css

@@ -20,15 +20,15 @@
   --sidebar-bg: linear-gradient(180deg, hsl(262, 36%, 11%), hsl(247, 32%, 23%));
   --sidebar-fg: #c8c9db;
   --sidebar-non-existant: #505274;
-  --sidebar-active: hsl(91, 54%, 52%);
+  --sidebar-active: hsl(60, 54%, 52%);
   --sidebar-spacer: #2d334f;
 
   --scrollbar: var(--sidebar-fg);
 
-  --icons: #7079d4;
-  --icons-hover: #3c4ee8;
+  --icons: #d47070;
+  --icons-hover: #e83c3c;
 
-  --links: hsl(91, 34%, 52%);
+  --links: #ddd417;
 
   --inline-code-color: hsl(91, 54%, 52%);
 
@@ -52,7 +52,7 @@
   --searchresults-header-fg: #5f5f71;
   --searchresults-border-color: #5c5c68;
   --searchresults-li-bg: #242430;
-  --search-mark-bg: #a2cff5;
+  --search-mark-bg: #1b56f8;
 
   --color-scheme: dark;
 

theme/custom.css

@@ -1,26 +1,26 @@
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Share+Tech+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Texturina:ital,opsz,wght@0,12..72,100..900;1,12..72,100..900&display=swap');
 
 html.scifi, body.scifi {
     font-family: "Nunito", "Ubuntu", sans-serif;
     background-color: #0a0f1c;
-    color: #e0e0ff;
+    color: #ffe0e0;
   }
 
   /* Fonts */
   html.scifi, body.scifi {
-    font-family: 'Ubuntu', sans-serif;
+    font-family: 'Texturina';
     font-size: 10px;
     line-height: 1.6;
     color: var(--fg);
   }
 
   .scifi h1, .scifi h2, .scifi h3, .scifi h4 {
-    font-family: 'Orbitron', sans-serif;
+    font-family: 'Pirata One';
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: #a882ff;
-    text-shadow: 0 0 6px #a882ff66;
+    color: black;
+    text-shadow: 0 0 6px red;
   }
 
   .scifi pre, .scifi code {
@@ -29,13 +29,13 @@ html.scifi, body.scifi {
 
   /* Sidebar */
   .scifi .sidebar {
-    background: linear-gradient(180deg, #140a28, #1b0e3f);
+    background: linear-gradient(180deg, #760a0a, #5e2a0e);
     color: #c8c9db;
     border-right: 1px solid #362f59;
   }
 
   .scifi .sidebar a {
-    color: #a882ff;
+    color: black;
   }
 
   .scifi .sidebar a:hover {
@@ -49,8 +49,8 @@ html.scifi, body.scifi {
 
   /* Headings */
   .scifi h1, .scifi h2, .scifi h3, .scifi h4 {
-    color: #a882ff;
-    text-shadow: 0 0 5px rgba(168, 130, 255, 0.3);
+    color: #760a0a;
+    text-shadow: 0 0 5px rgba(255, 130, 140, 0.3);
   }
 
   /* Inline code */
@@ -115,20 +115,20 @@ html.scifi, body.scifi {
   }
 
   .scifi a:hover {
-    color: #a882ff;
-    text-shadow: 0 0 8px #a882ff66;
+    color: #ff8282;
+    text-shadow: 0 0 8px #ff828263;
   }
 
   /* Scrollbar */
   .scifi ::-webkit-scrollbar {
     width: 8px;
   }
   .scifi ::-webkit-scrollbar-thumb {
-    background: #444866;
+    background: #664444;
     border-radius: 4px;
   }
   .scifi ::-webkit-scrollbar-thumb:hover {
-    background: #a882ff;
+    background: #ff8282;
   }
 
   /* Table Styling */
@@ -143,20 +143,20 @@ html.scifi, body.scifi {
   }
   .scifi th {
     background-color: #29294b;
-    color: #a882ff;
+    color: #ff8282;
   }
 
   /* Footnotes */
   .scifi .footnote {
     background-color: #1b1e2e;
-    border-left: 3px solid #a882ff;
+    border-left: 3px solid red;
     padding: 0.5em;
     margin-top: 1em;
   }
 
 
   .scifi h1, .scifi h2 {
-    text-shadow: 0 0 8px #a882ff66;
+    text-shadow: 0 0 8px #ff828266;
   }
 
   html.scifi, body.scifi {
@@ -187,15 +187,15 @@ html.scifi, body.scifi {
 .answer-button {
   padding: 10px 20px;
   font-size: 16px;
-  background-color: #4CAF50;
+  background-color: #5e2a0e;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
 .answer-button:hover {
-  background-color: #45a049;
+  background-color: #ddd417;
 }
 
 .correct {

theme/index.hbs

@@ -153,7 +153,7 @@
                             <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="scifi">SciFi</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="scifi">Pirate</button></li>
                         </ul>
                         {{#if search_enabled}}
                         <button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar">