New landing page design

_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,190 @@
 ---
 # 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}
+```{=html}
+<div class="line-graph">
+  <div class="upperContent">
+    <h1>Turing.jl</h1>
+  </div>
+  <div class="Animation">
+     <svg width="2300" height="498" viewBox="0 0 2300 498" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path class="line line1"
+           d="M0 487C428.737 486.5 424.61 478.535 493.575 389C523.23 350.5 595.105 213 654.414 213C713.724 213 748.907 290 790.625 344.5C832.343 399 846.416 425.5 908.239 461.5C979.498 502.995 1144.47 487 2300 487"/>
+        <path class="line line2"
+           d="M0 485.5C212.654 485.5 378.977 486 565.45 486C751.923 486 763.644 514.469 852.448 292.5C881.709 219.36 911.829 96 950.052 96C988.276 96 1016.27 197.222 1050.19 287.031C1116.15 461.682 1136.64 484.016 1322.06 484.016C1416.28 484.016 2076.04 486.5 2300 486.5"/>
+        <path class="line line3"
+           d="M0 486.499C101.007 486.499 207.547 486.499 308.554 486.499C409.56 486.499 483.491 486.499 577.149 486.499C668.492 486.499 699.329 489.286 731.197 460.973C773.165 423.687 790.94 330.837 809.112 262.111C827.285 193.386 858.089 8 890.182 8C922.275 8 944 162.661 971.155 262.111C988.985 327.407 1006.43 426.95 1058.05 469.982C1081.26 489.327 1164.7 486.499 1248.64 486.499C1356.96 486.499 1406.25 486.499 1516.74 486.499C1627.23 486.499 2191.68 487 2300 487"/>
+     </svg>
+  </div>
+</div>
+<span class="display-6 d-block text-center py-5 display-md-5 display-lg-4">
+    Bayesian inference with probabilistic programming
+</span>
+<div class="d-flex flex-column align-items-center gap-0 pb-5">
+  <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>
+```
 
-# Turing.jl: Bayesian inference with probabilistic programming. 
+```{=html}
+<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>
+```
 
-### Intuitive
-Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+<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)
 
-### General-purpose
-Turing supports models with discrete parameters and stochastic control flow. 
+    # Heads or tails of a coin are drawn from `N`
+    # Bernoulli distributions with success rate `p`
+    y ~ filldist(Bernoulli(p), N)
 
-### Modular and composable 
-Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. 
+    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}
 
-::: {.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}
-:::
-:::
-:::
+[See all news &rarr;](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).
-
-:::
-::: {.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.

team/team.css

@@ -6,7 +6,7 @@ a {
 .team-member {
   display: flex;
   align-items: center;
-  background-color: #f8f9fa;
+  background-color: #e9ecef; /*gray-200, same as $color-mute-bg */
   border-radius: 0.5rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin-bottom: 2rem;

theming/dark.scss

@@ -0,0 +1,22 @@
+/*-- 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"; // custom spacing and layout elements
+@import "rules/hoverables-dark"; // hover styling of buttons, listings
+@import "rules/navbar";
+@import "rules/quarto-tweaks"; // style modifications of (mostly) quarto classes
+@import "rules/svg"; // svg on landing page
+@import "rules/team-dark"; // dark mode for team page
+
+@import "old/old-styles"; // copy of old css style sheet

theming/light.scss

@@ -0,0 +1,18 @@
+/*-- scss:defaults --*/
+
+@import "variables/grays";
+@import "variables/colorslight";
+@import "variables/borders";
+@import "variables/spacers";
+
+/*-- scss:rules --*/
+
+@import "rules/mixins";
+
+@import "rules/layouts"; // custom spacing and layout elements
+@import "rules/hoverables-light"; // hover styling of buttons, listings
+@import "rules/navbar";
+@import "rules/quarto-tweaks"; // style modifications of (mostly) quarto classes
+@import "rules/svg"; // svg on landing page
+
+@import "old/old-styles"; // copy of old css style sheet

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;
+}