Add code examples (#2)

* add dangling code example

* add code example section

Author: simonsteiger

_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/getting-started/
@@ -63,6 +61,7 @@ format:
     theme:
       light: [cosmo, theming/light.scss]
       dark: [cosmo, theming/dark.scss]
+    highlight-style: github
     toc: true
     smooth-scroll: true
     code-overflow: wrap

index.qmd

@@ -8,33 +8,96 @@ description: |
   Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language.
 ---
 
-<div class="d-flex flex-column align-items-center gap-0" style="padding:7rem 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 style="font-size:2rem;padding-bottom:1.25rem;">Bayesian inference with probabilistic programming</span>
-<div class="d-flex flex-row gap-2">
-[Get Started](https://turinglang.org/docs/tutorials/docs-00-getting-started/){.button--fill .btn}
-
-<!-- The empty line above makes quarto accept the div class -->
-[API reference](/library/){.button .btn}
-</div>
-</div>
-<div class="d-flex flex-row flex-wrap justify-content-center gap-3 pb-5">
-  <div class="card">
-  <div class="card-title">Intuitive</div>
-  Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+```{=html}
+<div class="content-panel">
+  <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 justify-content-center 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="card">
-  <div class="card-title">General-purpose</div>
-  Turing supports models with discrete parameters and stochastic control flow. 
+  <div class="d-flex flex-row flex-wrap justify-content-center gap-3" style="padding-bottom:6rem;">
+    <div class="card">
+      <div class="card-title">
+        Intuitive
+      </div>
+      Turing models are easy to write and communicate — syntax is close to mathematical notations. 
+    </div>
+    <div class="card">
+      <div class="card-title">
+        General-purpose
+      </div>
+      Turing supports models with discrete parameters and stochastic control flow. 
+    </div>
+    <div class="card">
+      <div class="card-title">
+        Modular & composable
+      </div>
+      Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
+    </div>
   </div>
-
-  <div class="card">
-  <div class="card-title">Modular & composable</div>
-  Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
+</div>
+```
+<div class="content-panel">
+<div class="d-flex flex-row flex-wrap justify-content-center gap-3">
+<div style="min-width:420px; max-width:420px;text-align:right;padding:0.5rem;">
+  <div style="font-size:x-large;font-weight:700;padding-bottom:0.5rem;">
+  Hello, World in Turing
   </div>
+  Some text about how easy it is to [get going](https://turinglang.org/docs/tutorials/00-introduction/).
+</div>
+<div style="min-width:500px;">
+```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)
+
+    return y
+end;
+```
+</div>
 </div>
+<div class="d-flex flex-row flex-wrap justify-content-center gap-3">
+<div style="min-width:500px;">
+```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 style="min-width:420px; max-width:420px;padding:0.5rem;">
+  <div style="font-size:x-large;font-weight:700;padding-bottom:0.5rem;">
+  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>
+</div>
+
 
 <!--
 ::: {.hero-banner}

theming/dark.scss

@@ -8,8 +8,10 @@ $theme: "cosmo" !default;
 
 /*-- scss:rules --*/
 
+@import "rules/layouts";
 @import "rules/cards";
 @import "rules/buttons";
 @import "rules/navbar";
+@import "rules/sourceCode";
 
 //

theming/light.scss

@@ -5,7 +5,9 @@
 
 /*-- scss:rules --*/
 
+@import "rules/layouts";
 @import "rules/cards";
 @import "rules/buttons";
 @import "rules/navbar";
+@import "rules/sourceCode";
 

theming/rules/_buttons.scss

@@ -17,8 +17,8 @@
         border: solid $color-secondary 1px;
 
         &:hover {
-            background-color: lighten($color-secondary, 10%) !important;
-            border-color: lighten($color-secondary, 10%) !important;
+            background-color: $color-highlight !important;
+            border-color: $color-highlight !important;
         }
     }
 }

theming/rules/_cards.scss

@@ -11,7 +11,13 @@
 
     .card-title {
         color: $color-fg !important;
+        margin-bottom: 0.5rem !important;
         font-size: x-large;
         font-weight: 700;
     }
+
+    &--nopad {
+        @extend .card;
+        padding: 0rem;
+    }
 }

theming/rules/_layouts.scss

@@ -0,0 +1,3 @@
+.content-panel {
+    padding: 1.5rem;
+}

theming/rules/_navbar.scss

@@ -1,4 +1,8 @@
 .navbar {
     background-color: $body-bg;
     color: $text-muted;
+
+    a:hover {
+        text-decoration: none;
+    }
 }

theming/rules/_sourceCode.scss

@@ -0,0 +1,9 @@
+.sourceCode {
+    background-color: $color-mute-bg !important;
+    border-color: $color-mute-bg !important;
+    border-radius: $border-radius-sm !important;
+
+    pre {
+        padding: 0.5rem !important;
+    }
+}

theming/variables/_colorsdark.scss

@@ -11,15 +11,12 @@ $gray-900: #212529 !default;
 $black:    #000000 !default;
 
 $dark-green: #073c44;
-$thistle: #E7CEED;
-$light-orange: darken(#FEEEEB, 5%); // the actual KI color is a little light for many potential use cases
 $light-blue: darken(#EDF4F4, 5%);
-$logo-plum: #870052;
 $medium-grey: #CCD1D5;
 
-$color-primary: $thistle;
+$color-primary: red; // ??? Nope
 $color-secondary: $dark-green;
-$color-highlight: lighten($dark-green, 10%);
+$color-highlight: lighten($color-secondary, 10%);
 
 $color-mute-bg: $gray-800;
 
@@ -34,3 +31,5 @@ $quarto-category-border-color: lighten($light-bg, 30%);
 $quarto-category-hover-background-color: darken($light-bg, 5%);
 $quarto-category-hover-border-color: lighten($light-bg, 50%);
 $quarto-category-highlight: $color-fg;
+
+$link-color: lighten($dark-green, 15%);