[Enhancements] More style changes (#9)

* update styling defaults

* update quarto defaults to use new styling

* fix formatting of dark theme heading in `_quarto.yml`

* fix overflow rendering

Author: ddbaptiste

.gitignore

@@ -1,7 +1,6 @@
 # Keeping Knit html files out
 *.html
 
-
 # Keeping Data out of the Repo
 data/raw/*
 !data/raw/.gitkeep
@@ -63,3 +62,6 @@ rsconnect/
 
 /.quarto/
 **/*.quarto_ipynb
+
+# ignore .editorconfig
+/.editorconfig

_quarto.yml

@@ -15,8 +15,8 @@ format:
       light:
         - ./custom.scss
       dark:
-        - darkly
         - ./custom.scss
+        - ./custom-dark.scss
   pdf:
     margin-left: 20mm
     margin-top: 30mm

custom-dark.scss

@@ -0,0 +1,26 @@
+/*-- scss:defaults --*/
+$gray-800: #444 !default;
+$gray-900: #222 !default;
+$white: #fff !default;
+
+$body-bg: $gray-900 !default;
+$body-color: $white !default;
+
+// code
+$code-color: $gray-800 !default;
+$pre-color: inherit !default;
+
+/*-- scss:rules --*/
+
+@include color-mode(dark) {}
+
+// source code
+pre.sourceCode {
+    background-color: #444;
+}
+
+.code-copy-button:hover {
+    & .bi::before {
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($syndemics-pink)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>') !important;
+    }
+}

custom.scss

@@ -1,13 +1,10 @@
-/*-- scss:uses --*/
-
-/*-- scss:functions --*/
-
 /*-- scss:defaults --*/
 
 // fonts
-$font-family-sans-serif: "Helvetica", "Red Hat Display", sans-serif !default;
+$font-size-root: null !default;
+$font-size-base: 1rem !default;
+$font-family-sans-serif: system-ui, -apple-system, "Helvetica", "Red Hat Display", sans-serif !default;
 $font-family-monospace: "Courier New", "Consolas", monospace !default;
-
 $headings-font-weight: 500 !default;
 
 // colors
@@ -23,12 +20,11 @@ $primary: $syndemics-blue !default;
 $secondary: $syndemics-cyan !default;
 $light: $background-light !default;
 $dark: $background-dark !default;
+$link-color: $syndemics-pink !default;
 
 // options
 $enable-rounded: true !default;
 
-/*-- scss:mixins --*/
-
 /*-- scss:rules --*/
 
 :root {
@@ -37,24 +33,34 @@ $enable-rounded: true !default;
 }
 
 body.quarto-light {
-    --bs-link-hover-color-rgb: #{colorToRGBA(#3d9be9)};
-    h1,.h1,h2,.h2 {
+    --bs-heading-color: var(--bs-heading-color-light);
+
+    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 {
+    --bs-heading-color: var(--bs-heading-color-dark);
+
+    h1, .h1, h2, .h2 {
         color: var(--bs-heading-color-dark);
     }
 }
 
-h1.title,.title.h1 {
+h1.title, .title.h1 {
     font-size: calc(1.5rem + 0.9vw);
 }
 
+// color toggle icon
+.quarto-color-scheme-toggle {
+    position: fixed;
+
+    .bi::before, .alternate .bi::before {
+        transition: background-image 0.5s;
+    }
+}
+
 #TOC {
     font-weight: 600;
 
@@ -69,10 +75,13 @@ h1.title,.title.h1 {
         }
     }
 
+    .nav-link {
+        transition: unset;
+    }
+
     .nav-link:not(:hover) {
         color: inherit !important;
         border-left: solid 1px var(--bs-body-color);
-        transition: color 0.5s;
     }
 
     .nav-link:hover {
@@ -85,15 +94,9 @@ h1.title,.title.h1 {
     font-weight: 600 !important;
 }
 
+// table style
 .table {
-    & > tbody {
-        border: 2px solid;
-    }
-
-    & col:not(:last-of-type) {
-        border-right: 2px solid;
-    }
-
+    // heading
     & tr:first-of-type {
         background-color: var(--bs-heading-color-dark);
         font-weight: 600;
@@ -104,16 +107,38 @@ h1.title,.title.h1 {
             color: black;
         }
     }
+
+    // table rules
+    & > tbody {
+        border: 2px solid;
+    }
+
+    & col:not(:last-of-type) {
+        border-right: 2px solid;
+    }
+
+    & > caption {
+        font-weight: 600;
+        color: var(--bs-heading-color);
+    }
+}
+
+figcaption {
+    font-weight: 600;
+    color: var(--bs-heading-color);
+    text-align: center;
 }
 
+// source code style
 pre code {
     font-weight: 600;
 }
 
 pre:not(.sourceCode) {
     border: 1px #ccc solid;
     border-radius: 5px;
-    overflow: visible;
+    overflow-x: clip;
+    overflow-y: visible;
 
     &:before {
         position: relative;