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,18 +37,10 @@ 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>. 
-
-    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
+      Turing is created by <a href="http://mlg.eng.cam.ac.uk/hong/" target="_blank">Hong Ge</a>, and maintained by the <a href="/team" target="_blank">core team of developers</a>. <br>
+      © 2024 under the terms of the <a href="https://github.com/TuringLang/Turing.jl/blob/master/LICENCE" target="_blank">MIT License</a>. 
 
   back-to-top-navigation: true
   repo-url: https://github.com/TuringLang/turinglang.github.io/
@@ -61,9 +51,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,225 @@
 ---
-# 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="upper-content">
+    <div class="responsive-heading">Turing.jl</div>
+  </div>
+  <div>
+    <svg viewBox="0 0 2300 498" xmlns="http://www.w3.org/2000/svg">
+      <path class="line line1"
+        d="M0 487 C1155.53 487 1320.502 502.995 1391.761 461.5C1453.584 425.5 1467.657 399 1509.375 344.5C1551.093 290 1586.276 213 1645.586 213C1704.895 213 1776.77 350.5 1806.425 389C1875.39 478.535 1871.263 486.5 2300 487"/>
+      <path class="line line2"
+        d="M0 486.5 C223.96 486.5 883.72 484.016 977.94 484.016C1163.36 484.016 1183.85 461.682 1249.81 287.031C1283.73 197.222 1311.724 96 1349.948 96C1388.171 96 1418.291 219.36 1447.552 292.5C1536.356 514.469 1548.077 486 1734.55 486C1921.023 486 2087.346 485.5 2300 485.5"/>
+      <path class="line line3"
+        d="M0 487 C108.32 487 672.77 486.499 783.26 486.499C893.75 486.499 943.04 486.499 1051.36 486.499C1135.3 486.499 1218.74 489.327 1241.95 469.982C1293.57 426.95 1311.015 327.407 1328.845 262.111C1356 162.661 1377.725 8 1409.818 8C1441.911 8 1472.715 193.386 1490.888 262.111C1509.06 330.837 1526.835 423.687 1568.803 460.973C1600.671 489.286 1631.508 486.499 1722.851 486.499C1816.509 486.499 1890.44 486.499 1991.446 486.499C2092.453 486.499 2198.993 486.499 2300 486.499"/>
+    </svg>
+  </div>
+</div>
+```
 
-# Turing.jl: Bayesian inference with probabilistic programming. 
+```{=html}
+<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="https://julialang.slack.com/archives/CCYDC34A0" class="button btn">
+      Slack
+    </a>
+    <a href="https://discourse.julialang.org/c/domain/probprog/48" class="button btn">
+      Discourse
+    </a>
+    <a href="https://github.com/TuringLang" class="button btn">
+      GitHub
+    </a>
+  </div>
+</div>
+```
 
-### Intuitive
-Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+```{=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">
+      Expressive
+    </div>
+    Turing models are easy to write and communicate — their syntax closely resembles mathematical notation. 
+  </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">
+      Composable
+    </div>
+    Turing is written entirely in Julia, and is interoperable with its powerful ecosystem.
+  </div>
+</div>
+```
 
-### General-purpose
-Turing supports models with discrete parameters and stochastic control flow. 
+<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)
 
-### Modular and composable 
-Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. 
+    # Heads or tails of a coin are drawn from `N`
+    # Bernoulli distributions with success rate `p`
+    y ~ filldist(Bernoulli(p), N)
 
+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>
 
-::: {.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"}
-:::
+```{=html}
+<h3 class="pb-3">
+  News
+</h3>
+```
+::: {#news}
 
-::: {.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
+```{=html}
+<h3 class="pb-3 section-start-space">
+  Learn more
+</h3>
+<div class="list grid quarto-listing-cols-3">
+  <a class="pseudolisting" href="/library">
+    <div class="card-title h5">
+      Ecosystem
+    </div>
+    <p class="quarto-grid-item">
+      Learn about all the packages that are part of the TuringLang organization.
+    </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 mechanics of Turing.jl.
+    </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 modelling problems with Turing.jl.
+    </p>
+  </a>
+</div>
+```
 
-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).
+::: {.section-start-space}
+
+### Algorithms
+
+Placeholder text introducing this section on algorithms.
+
+| Column 1 | Column 2 | Column 3 | Column 4 |
+|----------|----------|----------|----------|
+|  Entry A |  Entry D |  Entry G |  Entry J |
+|  Entry B |  Entry E |  Entry H |  Entry K |
+|  Entry C |  Entry F |  Entry I |  Entry L |
+
+: Supported MCMC and other learning algorithms {.striped .borderless}
 
 :::
-::: {.g-col-3}
-:::
-:::
+
+::: {.section-start-space}
+
+### Bayesian Workflow
+
+Placeholder text introducing the Bayesian Workflow diagram from the ACM special issue submission.
+
+```{=html}
+<div style="text-align:center;">
+<img src="https://i0.wp.com/www.honeybeesuite.com/wp-content/uploads/2019/09/Multiple-teeth-HBS.jpg?w=400&ssl=1" style="margin:0.5rem 0;border-radius:10pt">
+<p>An example of the Beeysian workflow.</p>
+</div>
+```
+
 :::
+
+```{=html}
+<div class="d-flex flex-row panel-wrapper gap-3 section-start-space">
+<div class="flex-grow-1">
+<h3>Talks</h3>
+  <p>Placeholder for intro text on list of talks which are available online</p>
+  <ul>
+    <li>Talk 1
+    <li>Talk 2
+    <li>Talk 3
+  </ul>
+</div>
+<div class="flex-grow-1">
+  <h3>Other resources</h3>
+  <p>This list contains a few other written resources for learning Turing. If you have written something and would like to share it with the community, please <a href="https://github.com/TuringLang/docs/issues/new">get in touch</a>!</p>
+  <ul>
+    <li><a href="https://github.com/StatisticalRethinkingJulia/SR2TuringPluto.jl">Statistical Rethinking</a>
+    <li><a href="https://storopoli.github.io/Turing-Workshop/">Jose Storopoli's Turing workshop (outdated in parts)</a>
+    <li><a href="https://storopoli.github.io/Bayesian-Julia/">Jose Storopoli's blog on Turing and Bayesian Statistics</a>
+    <li>Placeholder for more...
+  </ul>
+</div>
+</div>
+```

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,23 @@
+/*-- 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,20 @@
+/*-- 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
+
+//