diff --git a/.gitignore b/.gitignore index 063e3987d..3c097ca05 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,5 @@ venv 404.html site_libs .DS_Store +index_files +digest.txt \ No newline at end of file diff --git a/_quarto.yml b/_quarto.yml index 288cf5259..62d2766a5 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -5,7 +5,6 @@ project: port: 4200 browser: true - # These cannot be used as variables. They are reserved for the project configuration. website: title: "Turing.jl" @@ -17,8 +16,6 @@ website: navbar: logo: "assets/images/turing-logo.svg" logo-href: https://turinglang.org/ - background: "#073c44" - foreground: "#ffffff" left: - href: getting-started/ text: Get Started @@ -40,11 +37,11 @@ website: href: https://turinglang.org/docs/versions.html tools: - icon: twitter - href: https://x.com/TuringLang text: Turing Twitter + href: https://x.com/TuringLang - icon: github - href: https://github.com/TuringLang/Turing.jl text: Turing GitHub + href: https://github.com/TuringLang sidebar: - text: documentation @@ -117,20 +114,6 @@ website: - developers/inference/variational-inference/index.qmd - developers/inference/implementing-samplers/index.qmd - page-footer: - background: "#073c44" - left: | - Turing is created by Hong Ge, and lovingly maintained by the core team of volunteers.
- The contents of this website are © 2018–2025 under the terms of the MIT License. - - right: - - icon: twitter - href: https://x.com/TuringLang - aria-label: Turing Twitter - - icon: github - href: https://github.com/TuringLang/Turing.jl - aria-label: Turing GitHub - back-to-top-navigation: true repo-url: https://github.com/TuringLang/docs repo-actions: [edit, issue] @@ -141,29 +124,76 @@ website: format: html: theme: - light: cosmo + light: [cosmo, theming/theme-light.scss] dark: [cosmo, theming/theme-dark.scss] - css: theming/styles.css + highlight-style: github smooth-scroll: true output-block-background: true toc: true toc-title: "Table of Contents" code-fold: false code-overflow: scroll + include-in-header: + - text: | + + include-after-body: + - text: | + + execute: echo: true output: true freeze: auto -include-in-header: - - text: | - # These variables can be used in any qmd files, e.g. for links: # the [Getting Started page]({{< meta get-started >}}) diff --git a/assets/images/brands/Turing_Logo_1000x400px_Black.webp b/assets/images/brands/Turing_Logo_1000x400px_Black.webp new file mode 100644 index 000000000..68d3caa7e Binary files /dev/null and b/assets/images/brands/Turing_Logo_1000x400px_Black.webp differ diff --git a/assets/images/brands/Turing_Logo_1000x400px_White.webp b/assets/images/brands/Turing_Logo_1000x400px_White.webp new file mode 100644 index 000000000..b1f168278 Binary files /dev/null and b/assets/images/brands/Turing_Logo_1000x400px_White.webp differ diff --git a/assets/images/brands/university-cambridge-logo-black-example-640x132.png b/assets/images/brands/university-cambridge-logo-black-example-640x132.png new file mode 100644 index 000000000..b49e59aa9 Binary files /dev/null and b/assets/images/brands/university-cambridge-logo-black-example-640x132.png differ diff --git a/assets/images/brands/university-cambridge-logo-white-example-640x133.png b/assets/images/brands/university-cambridge-logo-white-example-640x133.png new file mode 100644 index 000000000..99a75d96f Binary files /dev/null and b/assets/images/brands/university-cambridge-logo-white-example-640x133.png differ diff --git a/theming/old-styles/styles.css b/theming/old-styles/styles.css new file mode 100644 index 000000000..535a9bcc5 --- /dev/null +++ b/theming/old-styles/styles.css @@ -0,0 +1,259 @@ +.quarto-container { + background-color: #f8f9fa; +} + +.navbar { + background-color: #ffffff; +} + +nav.sidebar.sidebar-navigation:not(.rollup) { + background-color: #f8f9fa; +} + +.navbar a:hover { + text-decoration: none; +} + +.cell-output { + border: 1px dashed; +} + +.cell-bg { + background-color: #f1f3f5; +} + +.cell-output-stdout code { + word-break: break-wor !important; + white-space: pre-wrap !important; +} + +.cell-output-display svg { + height: fit-content; + width: fit-content; + + &.mermaid-js { + /* fit-content for mermaid diagrams makes them really small, so we + * default to 100% */ + width: 100%; + } +} + +.cell-output-display img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.nav-footer-center { + display: flex; + justify-content: center; +} + +.dropdown-menu { + text-align: center; + min-width: 100px !important; + border-radius: 5px; + max-height: 250px; + overflow: scroll; +} + +/* Custom Footer */ +.footer { + display: none; +} +.custom-footer { + background-color: #fff; + color: #6c757d; + font-size: 0.9rem; + padding: 3rem 2rem 2rem; + border-top: 1px solid #e9ecef; +} + +.custom-footer .footer-container { + max-width: 1350px; + margin: 0 auto; +} + +.custom-footer .footer-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 2rem; + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: 1px solid #e9ecef; +} + +.custom-footer .footer-links-wrapper { + display: flex; + flex-wrap: wrap; + gap: 2rem; + flex: 2 1 400px; +} + +.custom-footer .footer-column { + flex: 1 1 auto; +} + +.custom-footer .footer-brands { + flex: 1 1 320px; +} + +.custom-footer .footer-column h5 { + font-weight: 600; + color: #212529; + margin-bottom: 1.25rem; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.custom-footer .footer-column a { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; + color: #6c757d; + text-decoration: none; + transition: color 0.2s ease; +} + +.custom-footer .footer-column a:hover { + color: #212529; + text-decoration: none; +} + +.custom-footer .footer-column a i { + font-size: 1.1rem; + line-height: 1; + width: 20px; + text-align: center; +} + +.custom-footer .footer-brands p { + font-size: 0.9rem; + line-height: 1.6; + margin-top: -0.5rem; + margin-bottom: 1.5rem; +} + +.custom-footer .footer-brands .logo-grid { + display: flex; + gap: 2rem; + align-items: center; +} + +.custom-footer .partner-logo { + flex: 1; +} + +.custom-footer .partner-logo img { + max-width: 100%; + height: 50px; + object-fit: contain; + transition: transform 0.2s ease; +} + +.custom-footer .partner-logo:hover img { + transform: scale(1.05); +} + +.custom-footer .brands-light-mode-logo { + display: inline; +} + +.custom-footer .brands-dark-mode-logo { + display: none; +} + +.custom-footer .footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.85rem; + flex-wrap: wrap; + gap: 1rem; +} + +.custom-footer .footer-bottom p { + margin: 0; + line-height: 1.6; +} + +.custom-footer .footer-bottom a { + color: #495057; + font-weight: 500; + text-decoration: none; + border-bottom: 1px solid #dee2e6; +} + +.custom-footer .footer-bottom a:hover { + border-bottom-color: #495057; +} + +.footer-source-link { + display: flex; + align-items: center; + gap: 0.5rem; +} + +@media (max-width: 992px) { + .custom-footer .footer-links-wrapper { + flex-basis: 100%; + justify-content: center; + } + + .custom-footer .footer-grid { + justify-content: center; + } + + .custom-footer .footer-brands { + flex-grow: 0; + text-align: center; + } + + .custom-footer .footer-brands .logo-grid { + justify-content: center; + } + + .custom-footer .footer-column { + flex-grow: 0; + } +} + +@media (max-width: 768px) { + .custom-footer .footer-bottom { + flex-direction: column; + gap: 1.5rem; + text-align: center; + } +} + +@media (max-width: 576px) { + .custom-footer .footer-links-wrapper { + flex-direction: column; + text-align: center; + align-items: center; + } + + .custom-footer .footer-column { + width: 100%; + max-width: 350px; + } + + .custom-footer .footer-column a { + justify-content: center; + } + + .custom-footer .footer-brands .logo-grid { + flex-direction: column; + gap: 1.5rem; + align-items: center; + } + + .custom-footer .partner-logo { + flex-basis: auto; + width: 100%; + max-width: 220px; + } +} \ No newline at end of file diff --git a/theming/old-styles/theme-dark.scss b/theming/old-styles/theme-dark.scss new file mode 100644 index 000000000..9bfd91a94 --- /dev/null +++ b/theming/old-styles/theme-dark.scss @@ -0,0 +1,227 @@ +/*-- scss:defaults --*/ +// Cosmo 5.3.3 +// Bootswatch + +$theme: "cosmo" !default; + +// Manually-added colors +$background-nav: #22272e; +$background-body: #1c2128; +$foreground: #ffffff; +$links: #34b8bf; +$links-hover: #31dce6; +$code-background-color: #22272e; +$li-color: #bcbcbc; +$text-muted: #bcbcbc; +$btn-border-color: #444c56; + +// Quarto default colors +$white: #ffffff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #868e96 !default; +$gray-700: #495057 !default; +$gray-800: #22272e !default; +$gray-900: #1c2128 !default; +$black: #000000 !default; + +$indigo: #6610f2 !default; +$purple: #613d7c !default; +$pink: #e83e8c !default; +$red: #ff0039 !default; +$orange: #f0ad4e !default; +$yellow: #ff7518 !default; +$green: #3fb618 !default; +$teal: #4DB6AC !default; +$cyan: #39d3d7 !default; + +$primary: $links-hover !default; +$secondary: $gray-800 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; + +$min-contrast-ratio: 2.6 !default; + +// Options + +$enable-rounded: false !default; + +// Fonts + +// stylelint-disable-next-line value-keyword-case +$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$headings-font-weight: 400 !default; + +// Tables + +$table-color: initial !default; + +// Alerts + +$alert-border-width: 0 !default; + +// Progress bars + +$progress-height: .5rem !default; + + +// Custom tweaks for Quarto-Cosmo + +$navbar-bg: $background-nav; +$navbar-fg: $foreground; +$footer-bg: $background-nav; +$footer-fg: $foreground; +$body-color: $white; +$body-bg: $background-body; +$sidebar-bg: $background-body; +$sidebar-fg: $text-muted; + +/*-- scss:rules --*/ + +h1, h2, h3, h4, h5, h6 { + color: $foreground !important; +} + +.quarto-container { + background-color: $background-body !important; +} + +.navbar { + background-color: $navbar-bg !important; +} + +.sidebar { + background-color: $sidebar-bg !important; + color: $sidebar-fg !important; +} + +pre code { + color: $links !important; +} + +pre { + color: $foreground !important; +} + +p { + color: $li-color !important; +} + +li { + color: $li-color !important; +} + +a { + color: $links; + + &:hover { + color: $links-hover !important; + } +} + +code, +p code, +ol code, +li code, +h1 code { + background-color: $code-background-color !important; + color: $links; +} + +.cell, +.anchored code { + background-color: $code-background-color !important; + color: $links; +} + +div.sourceCode { + background-color: $code-background-color !important; +} + +.menu-text:hover { + color: $links-hover !important; +} + +.quarto-title-breadcrumbs .breadcrumb li:last-of-type a { + color: #6c757d !important; +} + +.ansi-bright-black-fg { + color: $foreground !important; +} + +::selection { + color: $links-hover; + background: $background-nav; +} + + +.tooltip { + --bs-tooltip-color: $black !important; + --bs-tooltip-bg: $white !important; +} + +.aa-DetachedOverlay li.aa-Item[aria-selected=true] .search-item * { + color: white !important; +} + +.aa-List li.aa-Item[aria-selected="true"] * { + background-color: #4DB6AC !important; +} + +// Custom Footer Dark Mode +.custom-footer { + background-color: $background-nav !important; + border-top-color: $btn-border-color !important; + color: $text-muted !important; +} + +.custom-footer .footer-grid { + border-bottom-color: $btn-border-color !important; +} + +.custom-footer .footer-column h5 { + color: $foreground !important; +} + +.custom-footer .footer-column a { + color: $text-muted !important; + &:hover { + color: $links-hover !important; + } +} + +.custom-footer .footer-bottom p { + color: $text-muted !important; +} + +.custom-footer .footer-bottom a { + color: $links !important; + border-bottom-color: $btn-border-color !important; + &:hover { + color: $links-hover !important; + border-bottom-color: $links-hover !important; + } +} + +.custom-footer .brands-light-mode-logo { + display: none !important; +} + +.custom-footer .brands-dark-mode-logo { + display: inline !important; +} + +.footer-source-link { + color: $text-muted !important; + &:hover { + color: $links-hover !important; + } +} \ No newline at end of file diff --git a/theming/rules/_dropdowns.scss b/theming/rules/_dropdowns.scss new file mode 100644 index 000000000..dd9fb0875 --- /dev/null +++ b/theming/rules/_dropdowns.scss @@ -0,0 +1,18 @@ +.dropdown-menu { + background-color: $navbar-bg; + border-color: $btn-border-color; + border-radius: $border-radius-sm; + scrollbar-width: none; +} + +.dropdown-item { + color: $text-muted; + padding: 0.5rem 1.5rem; + transition: all 0.2s ease; + + &:hover, + &:focus { + color: $links-hover; + background-color: if(lightness($navbar-bg) > 50, darken($navbar-bg, 4%), lighten($navbar-bg, 4%)); + } +} diff --git a/theming/rules/_footer.scss b/theming/rules/_footer.scss new file mode 100644 index 000000000..f503deedb --- /dev/null +++ b/theming/rules/_footer.scss @@ -0,0 +1,195 @@ +.custom-footer { + background-color: $navbar-bg; + color: $text-muted; + font-size: 0.9rem; + padding: 3rem 2rem 2rem; + border-top: 1px solid $btn-border-color; + + .footer-container { + max-width: 1350px; + margin: 0 auto; + } + + .footer-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 2rem; + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: 1px solid $btn-border-color; + } + + .footer-links-wrapper { + display: flex; + flex-wrap: wrap; + gap: 2rem; + flex: 2 1 400px; + } + + .footer-column { + flex: 1 1 auto; + + h5 { + font-weight: 600; + color: $panel-bg; + margin-bottom: 1.25rem; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.08em; + } + + a { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; + color: $text-muted; + text-decoration: none; + transition: color 0.2s ease; + + &:hover { + color: $links-hover; + text-decoration: none; + } + + i { + font-size: 1.1rem; + line-height: 1; + width: 20px; + text-align: center; + } + } + } + + .footer-brands { + flex: 1 1 320px; + + p { + font-size: 0.9rem; + line-height: 1.6; + margin-top: -0.5rem; + margin-bottom: 1.5rem; + } + + .logo-grid { + display: flex; + gap: 2rem; + align-items: center; + } + } + + .partner-logo { + flex: 1; + + img { + max-width: 100%; + height: 50px; + object-fit: contain; + transition: transform 0.2s ease; + } + + &:hover img { + transform: scale(1.05); + } + } + + .footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.85rem; + flex-wrap: wrap; + gap: 1rem; + + p { + margin: 0; + line-height: 1.6; + } + + a { + color: $links; + font-weight: 500; + text-decoration: none; + border-bottom: 1px solid $btn-border-color; + &:hover { + border-bottom-color: $links-hover; + } + } + } + + .footer-source-link { + display: flex; + align-items: center; + gap: 0.5rem; + } + + .brands-light-mode-logo { + display: inline; + } + + .brands-dark-mode-logo { + display: none; + } +} + +@media (max-width: 992px) { + .custom-footer { + .footer-links-wrapper { + flex-basis: 100%; + justify-content: center; + } + + .footer-grid { + justify-content: center; + } + + .footer-brands { + flex-grow: 0; + text-align: center; + + .logo-grid { + justify-content: center; + } + } + + .footer-column { + flex-grow: 0; + } + } +} + +@media (max-width: 768px) { + .custom-footer .footer-bottom { + flex-direction: column; + gap: 1.5rem; + text-align: center; + } +} + +@media (max-width: 576px) { + .custom-footer { + .footer-links-wrapper { + flex-direction: column; + text-align: center; + align-items: center; + } + .footer-column { + width: 100%; + max-width: 350px; + a { + justify-content: center; + } + } + .footer-brands .logo-grid { + flex-direction: column; + gap: 1.5rem; + align-items: center; + } + .partner-logo { + flex-basis: auto; + width: 100%; + max-width: 220px; + } + } +} diff --git a/theming/rules/_quarto-tweaks.scss b/theming/rules/_quarto-tweaks.scss new file mode 100644 index 000000000..d1be094a2 --- /dev/null +++ b/theming/rules/_quarto-tweaks.scss @@ -0,0 +1,112 @@ +h1, h2, h3, h4, h5, h6 { + color: $text-color !important; +} + +p, li { + color: $text-muted !important; +} + +a { + color: $links; + &:hover { + color: $links-hover !important; + } +} + +.quarto-container, +nav.sidebar.sidebar-navigation:not(.rollup) { + background-color: $sidebar-bg; +} + +.navbar { + background-color: $navbar-bg; + a:hover { + text-decoration: none; + } +} + +.cell-output { + border: $border-width dashed; +} + +div.sourceCode, +pre, +.cell { + background-color: $code-block-bg !important; +} + +code { + background-color: $code-block-bg !important; + color: $links; +} + +// Ensure pre-formatted text and the code within it have the correct colors +pre { + color: $text-color !important; + code { + color: inherit !important; // Inherit color from the 
 tag
+    }
+}
+
+.cell-bg {
+    background-color: #f1f3f5;
+}
+
+.cell-output-stdout code {
+    word-break: break-word !important;
+    white-space: pre-wrap !important;
+}
+
+.cell-output-display {
+    svg {
+        height: fit-content;
+        width: fit-content;
+        &.mermaid-js {
+            width: 100%;
+        }
+    }
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+}
+
+.footer {
+    display: none;
+}
+
+.nav-footer-center {
+    display: flex;
+    justify-content: center;
+}
+
+.dropdown-menu {
+    text-align: center;
+    min-width: 100px !important;
+    border-radius: 5px;
+    max-height: 250px;
+    overflow: scroll;
+}
+
+.menu-text:hover {
+    color: $links-hover !important;
+}
+
+.quarto-title-breadcrumbs .breadcrumb li:last-of-type a {
+    color: $text-muted !important;
+}
+
+.ansi-bright-black-fg {
+    color: $text-color !important;
+}
+
+::selection {
+    color: $links-hover;
+    background: $navbar-bg;
+}
+
+.tooltip {
+    --bs-tooltip-color: $black !important;
+    --bs-tooltip-bg: $white !important;
+}
diff --git a/theming/rules/_search.scss b/theming/rules/_search.scss
new file mode 100644
index 000000000..a949c1ce2
--- /dev/null
+++ b/theming/rules/_search.scss
@@ -0,0 +1,69 @@
+.aa-DetachedOverlay {
+  background-color: rgba($background-body, 0.95);
+  
+  .aa-Form {
+    border: none;
+    background-color: transparent;
+  }
+  
+  .aa-Input {
+    color: $text-color;
+    background-color: transparent;
+  }
+  
+  .aa-SubmitIcon, .aa-ClearIcon, .aa-LoadingIcon {
+    color: $text-muted;
+  }
+  
+  .aa-DetachedCancelButton {
+    color: $links;
+    background-color: transparent;
+    &:hover {
+      color: $links-hover;
+    }
+  }
+
+  .aa-Panel {
+    background-color: $background-body;
+  }
+
+  .search-result-header {
+    color: $text-color;
+    font-weight: 600;
+  }
+
+  .search-result-title {
+    color: $text-color;
+  }
+
+  .search-result-section {
+    color: $links;
+  }
+  
+  .search-result-text {
+    color: $text-muted;
+  }
+  
+  .search-match {
+    color: $links-hover;
+    background-color: transparent;
+    font-weight: 600;
+  }
+  
+  .aa-Item[aria-selected="true"] {
+    .search-item * {
+        color: $white !important;
+    }
+
+    .search-item {
+        .search-result-section, .search-match {
+            color: lighten($links, 30%) !important;
+        }
+    }
+  }
+  
+  .search-result-more {
+    color: $links;
+    font-weight: 500;
+  }
+}
diff --git a/theming/styles.css b/theming/styles.css
deleted file mode 100755
index c670e42aa..000000000
--- a/theming/styles.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.navbar a:hover {
-    text-decoration: none;
-}
-
-.cell-output {
-    border: 1px dashed;
-}
-
-.cell-bg {
-    background-color: #f1f3f5;
-}
-
-.cell-output-stdout code {
-    word-break: break-wor !important;
-    white-space: pre-wrap !important;
-}
-
-.cell-output-display svg {
-    height: fit-content;
-    width: fit-content;
-
-    &.mermaid-js {
-        /* fit-content for mermaid diagrams makes them really small, so we
-         * default to 100% */
-        width: 100%;
-    }
-}
-
-.cell-output-display img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.nav-footer-center {
-    display: flex;
-    justify-content: center;
-}
-
-.dropdown-menu {
-    text-align: center;
-    min-width: 100px !important;
-    border-radius: 5px;
-    max-height: 250px;
-    overflow: scroll;
-}
diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss
index a3fb0cd90..5bf9838c5 100644
--- a/theming/theme-dark.scss
+++ b/theming/theme-dark.scss
@@ -1,137 +1,19 @@
 /*-- scss:defaults --*/
-// Cosmo 5.3.3
-// Bootswatch
-
-$theme: "cosmo" !default;
-
-// Manually-added colors
-
-$background-nav: #192222;
-$background-body: #131818;
-$foreground: #1bb3ac;
-$links:#2aa198;
-$links-hover: #31dce6;
-$code-background-color: #172424;
-$li: #bcbcbc;
-
-// Quarto default colors
-
-$white:    #ffffff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
-$gray-700: #495057 !default;
-$gray-800: #373a3c !default;
-$gray-900: #212529 !default;
-$black:    #000000 !default;
-
-$indigo:  #6610f2 !default;
-$purple:  #613d7c !default;
-$pink:    #e83e8c !default;
-$red:     #ff0039 !default;
-$orange:  #f0ad4e !default;
-$yellow:  #ff7518 !default;
-$green:   #3fb618 !default;
-$teal:    #20c997 !default;
-$cyan:    #9954bb !default;
-
-$primary:       $links-hover !default;
-$secondary:     $gray-800 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-800 !default;
-
-$min-contrast-ratio:   2.6 !default;
-
-// Options
-
-$enable-rounded: false !default;
-
-// Fonts
-
-// stylelint-disable-next-line value-keyword-case
-$font-family-sans-serif:    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$headings-font-weight:      400 !default;
-
-// Tables
-
-$table-color:               initial !default;
-
-// Alerts
-
-$alert-border-width:            0 !default;
-
-// Progress bars
-
-$progress-height:               .5rem !default;
-
-
-// Custom tweaks for Quarto-Cosmo 
-
-$navbar-bg: $background-nav;
-$navbar-fg: $foreground;
-$footer-bg: $background-nav;
-$footer-fg: $foreground;
-$body-color: $white;
-$body-bg: $background-body;
-
-a, pre code {
-    color: $links !important;
-}
-
-pre {
-    color: $foreground !important;
-}
-a:hover {
-    color: $links-hover !important;
-}
-
-code, p code, ol code, li code, h1 code {
-    background-color: $code-background-color !important;
-    color: $links;
-}
-
-.cell, .anchored code {
-    background-color: $code-background-color !important;
-    color: $links;
-}
-
-div.sourceCode {
-    background-color: $code-background-color !important;
-}
-
-li {
-    color: $li !important;
-}
-
-.menu-text:hover {   
-    color: $links-hover !important;
-}
-
-p {
-    color: $li !important;
-}
-
-.quarto-title-breadcrumbs .breadcrumb li:last-of-type a {
-    color: #6c757d !important;
-}
-
-.ansi-bright-black-fg{
-    color: $foreground !important;
-}
-::selection {
-    color: $links-hover;
-    background: $background-nav;
-}
-
-
-.tooltip {
-    --bs-tooltip-color: $black !important;
-    --bs-tooltip-bg: $white !important;
-}
+@import "variables/colors-dark";
+@import "variables/borders";
+
+/*-- scss:rules --*/
+@import "rules/search";
+@import "rules/quarto-tweaks";
+@import "rules/footer";
+@import "rules/dropdowns"; 
+
+.custom-footer {
+    .brands-light-mode-logo {
+        display: none !important;
+    }
+
+    .brands-dark-mode-logo {
+        display: inline !important;
+    }
+}
\ No newline at end of file
diff --git a/theming/theme-light.scss b/theming/theme-light.scss
new file mode 100644
index 000000000..8aac56b78
--- /dev/null
+++ b/theming/theme-light.scss
@@ -0,0 +1,19 @@
+/*-- scss:defaults --*/
+@import "variables/colors-light";
+@import "variables/borders";
+
+/*-- scss:rules --*/
+@import "rules/search";
+@import "rules/quarto-tweaks";
+@import "rules/footer";
+@import "rules/dropdowns";
+
+.custom-footer {
+    .brands-light-mode-logo {
+        display: inline !important;
+    }
+
+    .brands-dark-mode-logo {
+        display: none !important;
+    }
+}
\ No newline at end of file
diff --git a/theming/variables/_borders.scss b/theming/variables/_borders.scss
new file mode 100644
index 000000000..58953a789
--- /dev/null
+++ b/theming/variables/_borders.scss
@@ -0,0 +1,2 @@
+$border-radius-sm: 0.5rem;
+$border-width: 1px;
diff --git a/theming/variables/_colors-dark.scss b/theming/variables/_colors-dark.scss
new file mode 100644
index 000000000..91681628c
--- /dev/null
+++ b/theming/variables/_colors-dark.scss
@@ -0,0 +1,27 @@
+@import "grays";
+
+$primary: #34b8bf;
+$teal-link: #34b8bf;
+
+$links: $teal-link;
+$links-hover: lighten($links, 10%);
+
+$code-block-bg: #212529;
+$code-background-color: #172424;
+
+$panel-bg: $gray-900;
+
+$background-body: #1c2128;
+
+$body-bg: $background-body;
+$navbar-bg: lighten($background-body, 2%);
+$navbar-color: $white;
+
+$btn-border-color: $gray-700;
+
+$text-color: $white;
+$text-muted: $gray-500;
+
+$body-color: $white;
+$navbar-fg: $white;
+$footer-fg: $white;
diff --git a/theming/variables/_colors-light.scss b/theming/variables/_colors-light.scss
new file mode 100644
index 000000000..72ac11cef
--- /dev/null
+++ b/theming/variables/_colors-light.scss
@@ -0,0 +1,21 @@
+@import "grays";
+
+$primary: #2780e3;
+$teal-link: #34b8bf;
+
+$links: $teal-link;
+$links-hover: lighten($links, 10%);
+
+$code-block-bg: #f1f3f5; 
+$panel-bg: $white;
+
+$background-body: $gray-100;
+
+$text-color: $gray-700;
+$text-muted: $gray-600;
+
+$btn-border-color: $gray-200;
+$body-bg: $background-body;
+$navbar-bg: $white;
+$navbar-color: $text-muted;
+
diff --git a/theming/variables/_grays.scss b/theming/variables/_grays.scss
new file mode 100644
index 000000000..4284ed369
--- /dev/null
+++ b/theming/variables/_grays.scss
@@ -0,0 +1,11 @@
+$white:    #ffffff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #373a3c !default;
+$gray-900: #212529 !default;
+$black:    #000000 !default;