📖 (docs/UI): Book theme customizations

docs/book/theme/css/custom.css

@@ -1,7 +1,144 @@
-.menu-title img {
-    vertical-align: bottom;
+#sidebar-toggle-anchor:checked .page-wrapper {
+    margin-inline-start: calc(
+        var(--sidebar-width) + var(--sidebar-resize-indicator-width)
+    );
 }
 
-#sidebar-toggle-anchor:checked .page-wrapper {
-    margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+/* Sets the size of the logo on the menu bar */
+.large-logo-img {
+    height: 50px;
+}
+
+/* Centers the logo on the menu bar */
+.menu-title {
+    display: flex;
+    align-items: center; /* vertical centering */
+    justify-content: center; /* horizontal centering */
+}
+
+/* Sets different font for headers */
+.header {
+    font-family: "Poppins", sans-serif;
+}
+
+/* Fixes excessive margin on top of headers */
+h2,
+h3 {
+    margin-block-start: 10px;
+}
+
+/* Rounded corners for code blocks */
+code,
+:not(pre) > hljs,
+.hjls {
+    border-radius: 6px;
+}
+
+/* Fixes contrast in codeblocks */
+.hljs {
+    background-color: var(--codeblock-bg);
+}
+
+/* Fixes scrollbar background color */
+html {
+    scrollbar-color: var(--scrollbar) transparent;
+}
+
+/* Fixes links formatting */
+.content a {
+    text-decoration: solid underline var(--links);
+}
+
+/* === Themes === */
+
+.navy { /* dark theme */
+    --bg: hsl(220, 13%, 10%);
+    --fg: hsl(220, 14%, 70%);
+
+    --sidebar-bg: #1a2233;
+    --sidebar-fg: #b8c2d1;
+    --sidebar-non-existant: #5b80c1;
+    --sidebar-active: #789ad0;
+    --sidebar-spacer: #2a3448;
+
+    --scrollbar: var(--theme-popup-border);
+
+    --icons: hsl(220, 14%, 71%);
+    --icons-hover: #93afdb;
+
+    --links: #93afdb;
+    --inline-code-color: var(--fg);
+
+    --theme-popup-bg: #1a2233;
+    --theme-popup-border: #2a3448;
+    --theme-hover: #141a27;
+
+    --quote-bg: #141a27;
+    --quote-border: #2a3448;
+
+    --warning-border: #ff6b6b;
+
+    --table-border-color: #2a3448;
+    --table-header-bg: #1f293d;
+    --table-alternate-bg: #131b2a;
+
+    --searchbar-border-color: #2a3448;
+    --searchbar-bg: #1a2233;
+    --searchbar-fg: #e5e9f0;
+    --searchbar-shadow-color: #466bb3;
+    --searchresults-header-fg: #93afdb;
+    --searchresults-border-color: #2a3448;
+    --searchresults-li-bg: #141a27;
+    --search-mark-bg: #5b80c1;
+
+    --color-scheme: dark;
+
+    --codeblock-bg: var(--sidebar-bg);
+
+    --title-color: var(--sidebar-active);
+}
+
+.light {
+    --bg: hsla(50, 25%, 96%);
+    --fg: #111827;
+
+    --sidebar-bg: #e1e7f0;
+    --sidebar-fg: #334155;
+    --sidebar-non-existant: #7b8da8;
+    --sidebar-active: #3f6ec6;
+    --sidebar-spacer: #c9d3e0;
+
+    --scrollbar: var(--theme-popup-border);
+
+    --icons: #747474;
+    --icons-hover: #3f6ec6;
+
+    --links: #2f5a9a;
+    --inline-code-color: var(--fg);
+
+    --theme-popup-bg: #ffffff;
+    --theme-popup-border: #c9d3e0;
+    --theme-hover: #e3e9f2;
+
+    --quote-bg: #e4eaf3;
+    --quote-border: #bfcadb;
+
+    --warning-border: #e07b00;
+
+    --table-border-color: #c9d3e0;
+    --table-header-bg: #e1e7f0;
+    --table-alternate-bg: #f0f3f8;
+
+    --searchbar-border-color: #c9d3e0;
+    --searchbar-bg: #ffffff;
+    --searchbar-fg: #111827;
+    --searchbar-shadow-color: #3f6ec6;
+    --searchresults-header-fg: #3f6ec6;
+    --searchresults-border-color: #c9d3e0;
+    --searchresults-li-bg: #e4eaf3;
+    --search-mark-bg: #5a8be0;
+
+    --color-scheme: light;
+
+    --codeblock-bg: var(--sidebar-bg);
 }

docs/book/theme/index.hbs

@@ -21,7 +21,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="theme-color" content="#ffffff" />
 
-        <link rel="shortcut icon" href="{{ path_to_root }}/logos/favicon.png">
+        <link rel="shortcut icon" href="{{ path_to_root }}/logos/kb-icon.svg">
         <link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/general.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
@@ -119,10 +119,7 @@
                         </button>
                         <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                             <li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li>
-                            <li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Dark" }}</button></li>
                         </ul>
                         {{#if search_enabled}}
                         <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
@@ -143,7 +140,7 @@
                         </div>     
                     </div>
 
-                    <h1 class="menu-title"><img alt="{{ book_title }}" src="{{ path_to_root }}/logos/logo-single-line.png"></h1>
+                    <h1 class="menu-title"><img alt="{{ book_title }}" class="large-logo-img" src="{{ path_to_root }}/logos/kb-logo-one-line.svg"></h1>
 
                     <div class="right-buttons">
                         <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">