[Enhancement] Update Styling

.gitignore

@@ -60,3 +60,6 @@ po/*~
 
 # RStudio Connect folder
 rsconnect/
+
+/.quarto/
+**/*.quarto_ipynb

_brand.yml

@@ -0,0 +1,25 @@
+color:
+  palette:
+    cyan: "#3D9BE9"
+    pink: "#F0325F"
+    blue: "#003771"
+  background:
+    light: white
+    dark: black
+  foreground:
+    light: black
+    dark: "#ccc"
+  primary: blue
+
+typography:
+  fonts:
+    - family: "Red Hat Display"
+      source: google
+    - family: "Merriweather Sans"
+      source: google
+  base: "Red Hat Display"
+  headings:
+    family: "Merriweather Sans"
+    color:
+      light: blue
+      dark: cyan

_quarto.yml

@@ -8,7 +8,15 @@ execute:
   freeze: auto
 
 format:
-  html: default
+  html:
+    toc: true
+    toc-location: left
+    theme:
+      light:
+        - ./custom.scss
+      dark:
+        - darkly
+        - ./custom.scss
   pdf:
     margin-left: 20mm
     margin-top: 30mm

custom.scss

@@ -0,0 +1,132 @@
+/*-- scss:uses --*/
+
+/*-- scss:functions --*/
+
+/*-- scss:defaults --*/
+
+// fonts
+$font-family-sans-serif: "Helvetica", "Red Hat Display", sans-serif !default;
+$font-family-monospace: "Courier New", "Consolas", monospace !default;
+
+$headings-font-weight: 500 !default;
+
+// colors
+// custom variables
+$syndemics-blue: #003771;
+$syndemics-pink: #f0325f;
+$syndemics-cyan: #3d9be9;
+$background-light: #cccccc;
+$background-dark: #444444;
+
+// default colors
+$primary: $syndemics-blue !default;
+$secondary: $syndemics-cyan !default;
+$light: $background-light !default;
+$dark: $background-dark !default;
+
+// options
+$enable-rounded: true !default;
+
+/*-- scss:mixins --*/
+
+/*-- scss:rules --*/
+
+:root {
+    --bs-heading-color-light: #003771;
+    --bs-heading-color-dark: #3d9be9;
+}
+
+body.quarto-light {
+    --bs-link-hover-color-rgb: #{colorToRGBA(#3d9be9)};
+    h1,.h1,h2,.h2 {
+        color: var(--bs-heading-color-light);
+    }
+}
+
+body.quarto-dark {
+    --bs-link-color-rgb: #{colorToRGBA(#f0325f)};
+    --bs-link-hover-color-rgb: #{colorToRGBA(#3d9be9)};
+    h1,.h1,h2,.h2 {
+        color: var(--bs-heading-color-dark);
+    }
+}
+
+h1.title,.title.h1 {
+    font-size: calc(1.5rem + 0.9vw);
+}
+
+#TOC {
+    font-weight: 600;
+
+    #toc-title {
+        font-weight: inherit;
+    }
+
+    .header-section-number {
+        color: var(--bs-body-color) !important;
+        &:after {
+            content: " ―";
+        }
+    }
+
+    .nav-link:not(:hover) {
+        color: inherit !important;
+        border-left: solid 1px var(--bs-body-color);
+        transition: color 0.5s;
+    }
+
+    .nav-link:hover {
+        color: var(--quarto-scss-export-syndemics-pink) !important;
+        border-left: solid 1px var(--quarto-scss-export-syndemics-pink);
+    }
+}
+
+.quarto-alternate-formats h2 {
+    font-weight: 600 !important;
+}
+
+.table {
+    & > tbody {
+        border: 2px solid;
+    }
+
+    & col:not(:last-of-type) {
+        border-right: 2px solid;
+    }
+
+    & tr:first-of-type {
+        background-color: var(--bs-heading-color-dark);
+        font-weight: 600;
+        border-bottom: 2px solid;
+        border-color: inherit;
+
+        & td {
+            color: black;
+        }
+    }
+}
+
+pre code {
+    font-weight: 600;
+}
+
+pre:not(.sourceCode) {
+    border: 1px #ccc solid;
+    border-radius: 5px;
+    overflow: visible;
+
+    &:before {
+        position: relative;
+        top: -0.8em;
+        left: 0.5em;
+        background: var(--bs-body-bg);
+        font-family: sans-serif;
+        font-weight: 600;
+        content: " Output ";
+    }
+
+    & code {
+        margin-top: -1.2em;
+        margin-left: 0.5em;
+    }
+}