drop css for scss + few style changes

Author: simonsteiger

_quarto.yml

@@ -45,9 +45,8 @@ 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
     toc: true
     smooth-scroll: true

index.qmd

@@ -35,7 +35,7 @@ listing:
 :::: {.section-start-space}
 
 ### What is Turing.jl?
-<p class="text-muted">Turing.jl is a Julia library for general-purpose probabilistic programming.</p>
+<p>Turing.jl is a Julia library for general-purpose probabilistic programming.</p>
 
 ::::
 
@@ -65,12 +65,12 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 ::: {#start}
 
 ### Start Your Journey
-<p class="text-muted">Whether you're new to Bayesian modeling or an experienced researcher, find the resources you need.</p>
+<p>Whether you're new to Bayesian modeling or an experienced researcher, find the resources you need.</p>
 
 :::
 
 ```{=html}
-<a href="#cite" class="button btn desktop-only-button">Research Papers on Turing.jl &rarr;</a>
+<a href="#cite" class="button desktop-only-button">Research Papers on Turing.jl &rarr;</a>
 ```
 
 ::::
@@ -90,8 +90,8 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 
 ::: {.d-flex .flex-column .align-items-center .gap-2 .pt-3}
 ```{=html}
-<a href="https://turinglang.org/docs/getting-started/" class="button btn">Get Started</a>
-<a href="https://turinglang.org/docs/tutorials/coin-flipping/" class="text-muted" style="font-size: 0.9em;">Beginner's Walkthrough</a>
+<a href="https://turinglang.org/docs/getting-started/" class="button">Get Started</a>
+<a href="https://turinglang.org/docs/tutorials/coin-flipping/" class="link-muted" style="font-size: 0.9em;">Beginner's Walkthrough</a>
 ```
 :::
 
@@ -112,8 +112,8 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 ::: {.d-flex .flex-column .align-items-center .gap-2 .pt-3}
 
 ```{=html}
-<a href="/library" class="button btn">Explore Ecosystem</a>
-<a href="#cite" class="text-muted" style="font-size: 0.9em;">Cite Turing.jl</a>
+<a href="/library" class="button">Explore Ecosystem</a>
+<a href="#cite" class="link-muted" style="font-size: 0.9em;">Cite Turing.jl</a>
 ```
 
 :::
@@ -135,8 +135,8 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 ::: {.d-flex .flex-column .align-items-center .gap-2 .pt-3}
 
 ```{=html}
-<a href="https://github.com/TuringLang" class="button btn">View on GitHub</a>
-<a href="https://julialang.slack.com/archives/CCYDC34A0" class="text-muted" style="font-size: 0.9em;">Join the Slack Channel</a>
+<a href="https://github.com/TuringLang" class="button">View on GitHub</a>
+<a href="https://julialang.slack.com/archives/CCYDC34A0" class="link-muted" style="font-size: 0.9em;">Join the Slack Channel</a>
 ```
 :::
 
@@ -146,7 +146,7 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 
 ::: {.mobile-only-button-container}
 ```{=html}
-<a href="#cite" class="button btn">Research Papers on Turing.jl &rarr;</a>
+<a href="#cite" class="button">Research Papers on Turing.jl &rarr;</a>
 ```
 :::
 <!-- Start Your Journey Section Ends Here-->
@@ -157,12 +157,12 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 ::: {#core-packages-header-content}
 
 ### Core Packages {#core-packages}
-<p class="text-muted">The Turing ecosystem is built on a foundation of powerful, composable packages.</p>
+<p>The Turing ecosystem is built on a foundation of powerful, composable packages.</p>
 
 :::
 
 ```{=html}
-<a href="/library" class="button btn desktop-only-button">Explore Ecosystem &rarr;</a>
+<a href="/library" class="button desktop-only-button">Explore Ecosystem &rarr;</a>
 ```
 
 ::::
@@ -219,7 +219,7 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 
 ### News & Updates {#news-updates}
 
-<p class="text-muted">Read the latest from the Turing team.</p>
+<p>Read the latest from the Turing team.</p>
 
 :::
 
@@ -246,7 +246,7 @@ Turing is written entirely in Julia, and is interoperable with its powerful ecos
 
 ### Featured Tutorials {#featured-tutorials}
 
-<p class="text-muted">A selection of tutorials to get you started.</p>
+<p>A selection of tutorials to get you started.</p>
 
 :::
 ```{=html}

theming/rules/_citations.scss

@@ -0,0 +1,48 @@
+.citation-container {
+    margin: auto;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.citation-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.citation-entry {
+    padding: 1.5rem !important;
+    margin-bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.citation-content {
+    flex-grow: 1;
+}
+
+.citation-text {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: $text-muted;
+    margin: 0;
+
+    em {
+        font-style: italic;
+    }
+}
+
+.citation-title {
+    font-weight: 600;
+    color: $text-color;
+}
+
+.citation-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}

theming/rules/_footer.scss

@@ -0,0 +1,127 @@
+/* Custom Footer */
+.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;
+            }
+        }
+    }
+
+    .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-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;
+        }
+    }
+
+    .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;
+}