Improve colors

_quarto.yml

@@ -17,8 +17,6 @@ website:
   navbar:
     logo: "assets/images/turing-logo.svg"
     logo-href: https://turinglang.org/
-    background: "#073c44"
-    foreground: "#ffffff"
     left:
       - text: Get Started
         href: https://turinglang.org/docs/tutorials/docs-00-getting-started/
@@ -39,7 +37,7 @@ website:
         href: https://github.com/TuringLang/Turing.jl
 
   page-footer:
-    background: "#073c44"
+    #background: "#073c44"
     left: |
       Turing is created by <a href="http://mlg.eng.cam.ac.uk/hong/" target="_blank">Hong Ge</a>, and lovingly maintained by the <a href="https://github.com/TuringLang/Turing.jl/graphs/contributors" target="_blank">core team</a> of volunteers. <br>
       The contents of this website are © 2024 under the terms of the <a href="https://github.com/TuringLang/Turing.jl/blob/master/LICENCE" target="_blank">MIT License</a>. 
@@ -61,9 +59,9 @@ website:
 format:
   html:
     theme:
-      light: cosmo
-      dark: [cosmo, theming/theme-dark.scss]
-    css: theming/styles.css
+      light: [cosmo, theming/light.scss]
+      dark: [cosmo, theming/dark.scss]
+    highlight-style: github
     toc: true
     smooth-scroll: true
     code-overflow: wrap

index.qmd

@@ -1,55 +1,176 @@
 ---
 # pagetitle: "Turing"
 toc: false
-page-layout: custom
+page-layout: full
 section-divs: false
 hide-description: true
+listing:
+- id: news
+  contents:
+    - "news/posts/*/index.qmd"
+  sort: date desc
+  type: grid
+  grid-columns: 3
+  categories: false
+  sort-ui: false
+  filter-ui: false
+  fields: [title, description, date]
+  max-items: 3
+  image-height: "200"
 description: |
   Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language.
 ---
 
-::: {.hero-banner}
-::: {.grid}
-::: {.g-col-1}
-:::
-::: {.g-col-8}
-
-# Turing.jl: Bayesian inference with probabilistic programming. 
-
-### Intuitive
-Turing models are easy to write and communicate — syntax is close to mathematical notations. 
-
-### General-purpose
-Turing supports models with discrete parameters and stochastic control flow. 
+```{=html}
+<div class="d-flex flex-column align-items-center gap-0" style="padding:6rem 0;">
+  <image src="assets/images/turing-logo.svg" width="150px" alt="Three normal probability distributions">
+  <span style="font-size:4rem;font-weight:700;">
+    Turing.jl
+  </span>
+  <span class="display-6 d-block text-center pb-4 display-md-5 display-lg-4">
+    Bayesian inference with probabilistic programming
+  </span>
+  <div class="d-flex flex-row flex-wrap panel-wrapper gap-2">
+    <a href="https://turinglang.org/docs/tutorials/docs-00-getting-started/" class="button--fill btn">
+      Tutorials
+    </a>
+    <a href="/library" class="button btn">
+      Ecosystem
+    </a>
+    <a href="https://github.com/TuringLang" class="button btn">
+      View on GitHub
+    </a>
+  </div>
+</div>
+<div class="d-flex flex-row flex-wrap panel-wrapper gap-4 section-end-space">
+  <div class="panel">
+    <div class="panel-title pb-1">
+      Intuitive
+    </div>
+    Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+  </div>
+  <div class="panel">
+    <div class="panel-title pb-1">
+      General-purpose
+    </div>
+    Turing supports models with discrete parameters and stochastic control flow. 
+  </div>
+  <div class="panel">
+    <div class="panel-title pb-1">
+      Modular & composable
+    </div>
+    Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
+  </div>
+</div>
+```
 
-### Modular and composable 
-Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. 
+<div class="d-flex flex-row flex-wrap panel-wrapper gap-3 pb-2">
+<div class="example-text" style="text-align:right;padding:0.5rem;">
+  <div class="fs-4 fw-bold pb-1">
+  Hello, World in Turing
+  </div>
+  Some text about how easy it is to [get going](https://turinglang.org/docs/tutorials/00-introduction/).
+</div>
+<div class="example-code">
+```julia
+@model function coinflip(; N::Int)
+    # Prior belief about the probability of heads
+    p ~ Beta(1, 1)
 
+    # Heads or tails of a coin are drawn from `N`
+    # Bernoulli distributions with success rate `p`
+    y ~ filldist(Bernoulli(p), N)
 
-::: {.hero-buttons style="position: relative; display: flex; justify-content: center;"}
-[Get Started]({{< meta get-started >}}){.btn-action-primary .btn-action .btn .btn-lg role="button" style="background-color: #073c44; color: white"}
-:::
-
-::: {.g-col-3}
-:::
-:::
-:::
+    return y
+end;
+```
+</div>
+</div>
+<div class="d-flex flex-row-reverse flex-wrap panel-wrapper gap-3 pt-2 section-end-space">
+<div class="example-text" style="padding:0.5rem;">
+  <div class="fs-4 fw-bold pb-1">
+  Goodbye, World in Turing
+  </div>
+  Some text about how easy it is to interface with external packages like AbstractGPs. Learn more about modelling [Gaussian Processes](https://turinglang.org/docs/tutorials/15-gaussian-processes/) with Turing.jl.
+</div>
+<div class="example-code">
+```julia
+@model function putting_model(d, n; jitter=1e-4)
+    v ~ Gamma(2, 1)
+    l ~ Gamma(4, 1)
+    f = GP(v * with_lengthscale(SEKernel(), l))
+    f_latent ~ f(d, jitter)
+    binomials = Binomial.(n, logistic.(f_latent))
+    y ~ product_distribution(binomials)
+    return (fx=f(d, jitter), f_latent=f_latent, y=y)
+end
+```
+</div>
+</div>
 
-:::
+```{=html}
+<h3 class="pb-3">
+  News
+</h3>
+```
+::: {#news}
 
-::: {style="position: relative; display: flex; justify-content: center;"}
-::: {.grid}
-::: {.g-col-1}
 :::
-::: {.g-col-8}
-## Community Resources
 
-The Turing.jl [discourse forum](https://discourse.julialang.org/c/domain/probprog) provides support and discussion for all user levels.
-The [Turing.jl documentation]({{< meta get-started >}}) and [official tutorials]({{< meta tutorials-intro >}}) help users learn and use Turing.jl!
-There's also a [tutorial in Bayesian Statistics using Julia and Turing.jl](https://storopoli.io/Bayesian-Julia).
+[See all news &rarr;](news/)
 
-:::
-::: {.g-col-3}
-:::
-:::
-:::
+```{=html}
+<h3 class="pb-3 section-start-space">
+  Learn more
+</h3>
+<div class="list grid quarto-listing-cols-3">
+  <a class="pseudolisting" href="https://discourse.julialang.org/c/domain/probprog/48">
+    <div class="card-title h5">
+      Discourse
+    </div>
+    <p class="quarto-grid-item">
+      Get support from and discuss with other users.
+    </p>
+  </a>
+  <a class="pseudolisting" href="https://turinglang.org/docs/tutorials/docs-00-getting-started/">
+    <div class="card-title h5">
+      Documentation
+    </div>
+    <p class="quarto-grid-item">
+      Familiarize yourself with the Turing.jl API.
+    </p>
+  </a>
+  <a class="pseudolisting" href="https://turinglang.org/docs/tutorials/00-introduction/">
+    <div class="card-title h5">
+      Official tutorials
+    </div>
+    <p class="quarto-grid-item">
+      Learn to tackle specific problems with Turing.jl.
+    </p>
+  </a>
+  <a class="pseudolisting" href="resources/content/inofficial_tutorials.qmd">
+    <div class="card-title h5">
+      Inofficial tutorials
+    </div>
+    <p class="quarto-grid-item">
+      A list of inofficial tutorials using Turing.jl.
+    </p>
+  </a>
+  <a class="pseudolisting" href="resources/content/talks.qmd">
+    <div class="card-title h5">
+      Talks
+    </div>
+    <p class="quarto-grid-item">
+      A list of talks on the Turing.jl ecosystem.
+    </p>
+  </a>
+  <a class="pseudolisting" href="">
+    <div class="card-title h5">
+      Workshop
+    </div>
+    <p class="quarto-grid-item">
+      Placeholder for Turing-Workshop repo link.
+    </p>
+  </a>
+</div>
+```

resources/content/inofficial_tutorials.qmd

@@ -0,0 +1,5 @@
+---
+title: Inofficial tutorials
+---
+
+TODO: Add a list of inofficial tutorials.

resources/content/talks.qmd

@@ -0,0 +1,5 @@
+---
+title: Talks
+---
+
+TODO: Add a list of inofficial talks.

theming/dark.scss

@@ -0,0 +1,21 @@
+/*-- scss:defaults --*/
+// Cosmo 5.3.3
+// Bootswatch
+
+$theme: "cosmo" !default;
+@import "variables/grays";
+@import "variables/colorsdark";
+@import "variables/borders";
+@import "variables/spacers";
+
+/*-- scss:rules --*/
+
+@import "rules/mixins";
+
+@import "rules/layouts";
+@import "rules/hoverables-dark";
+@import "rules/navbar";
+@import "rules/quarto-tweaks";
+
+@import "old/old-styles";
+

theming/light.scss

@@ -0,0 +1,19 @@
+/*-- scss:defaults --*/
+
+@import "variables/grays";
+@import "variables/colorslight";
+@import "variables/borders";
+@import "variables/spacers";
+
+/*-- scss:rules --*/
+
+@import "rules/mixins";
+
+@import "rules/layouts";
+@import "rules/hoverables-light";
+@import "rules/navbar";
+@import "rules/quarto-tweaks";
+
+@import "old/old-styles";
+
+//

theming/old/_old-styles.scss

@@ -0,0 +1,47 @@
+/* css styles */
+/* .cell-output {
+    background-color: #f1f3f5;
+} */
+
+/* .cell-output img {
+    max-width: 100%;
+    height: auto;
+} */
+
+/* .cell-output-display pre {
+    word-break: break-wor !important;
+    white-space: pre-wrap !important;
+}
+ */
+
+/* now included in _navbar.scss
+ .navbar a:hover {
+    text-decoration: none;
+}
+*/
+
+.cell-output {
+    border: 1px dashed;
+}
+
+.cell-output-stdout code {
+    word-break: break-wor !important;
+    white-space: pre-wrap !important;
+}
+
+
+.cell-output-display svg {
+    height: fit-content;
+    width: fit-content;
+}
+
+.cell-output-display img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.nav-footer-center {
+    display: flex;
+    justify-content: center;
+}

theming/rules/_hoverables-dark.scss

@@ -0,0 +1,33 @@
+.button {
+    @include button($border-hover);
+}
+
+.card {
+    @include card($border-hover);
+
+    .card-text {
+        color: $text-muted;
+    }
+}
+
+.example-code {
+    flex: 0 1 45%;
+
+    @media screen and (max-width: 992px) {
+        flex: 0 1 100%;
+    }
+}
+
+.example-text {
+    flex: 0 1 53%;
+
+    @media screen and (max-width: 992px) {
+        flex: 0 1 100%;
+    }
+}
+
+.pseudolisting {
+    @extend .card;
+    @extend .quarto-grid-item;
+    text-decoration: none;
+}