first part of new landing page

_quarto.yml

@@ -17,8 +17,8 @@ website:
   navbar:
     logo: "assets/images/turing-logo.svg"
     logo-href: https://turinglang.org/
-    background: "#073c44"
-    foreground: "#ffffff"
+    #background: "#073c44"
+    #foreground: "#ffffff"
     left:
       - text: Get Started
         href: https://turinglang.org/docs/tutorials/docs-00-getting-started/
@@ -39,7 +39,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 +61,8 @@ 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]
     toc: true
     smooth-scroll: true
     code-overflow: wrap

index.qmd

@@ -8,6 +8,35 @@ 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. 
+  </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>
+
+<!--
 ::: {.hero-banner}
 ::: {.grid}
 ::: {.g-col-1}
@@ -53,3 +82,4 @@ There's also a [tutorial in Bayesian Statistics using Julia and Turing.jl](https
 :::
 :::
 :::
+-->

theming/dark.scss

@@ -0,0 +1,15 @@
+/*-- scss:defaults --*/
+// Cosmo 5.3.3
+// Bootswatch
+
+$theme: "cosmo" !default;
+@import "variables/colorsdark";
+@import "variables/borders";
+
+/*-- scss:rules --*/
+
+@import "rules/cards";
+@import "rules/buttons";
+@import "rules/navbar";
+
+//

theming/light.scss

@@ -0,0 +1,11 @@
+/*-- scss:defaults --*/
+
+@import "variables/colorslight";
+@import "variables/borders";
+
+/*-- scss:rules --*/
+
+@import "rules/cards";
+@import "rules/buttons";
+@import "rules/navbar";
+

theming/rules/_buttons.scss

@@ -0,0 +1,24 @@
+.button {
+    padding: 0.5rem 1rem;
+    //margin: 0.25rem;
+    border-radius: 25px;
+    border: solid $text-muted 1px;
+    color: $color-fg;
+    background-color: $body-bg;
+
+    &:hover {
+        background-color: $color-mute-bg !important;
+        border: solid $text-muted 1px;
+    }
+
+    &--fill {
+        @extend .button;
+        background-color: $color-secondary;
+        border: solid $color-secondary 1px;
+
+        &:hover {
+            background-color: lighten($color-secondary, 10%) !important;
+            border-color: lighten($color-secondary, 10%) !important;
+        }
+    }
+}

theming/rules/_cards.scss

@@ -0,0 +1,17 @@
+.card {
+    border-radius: $border-radius-sm;
+    padding: 1rem;
+    min-height: 120px;
+    min-width: 200px;
+    max-width: 300px;
+
+    color: $color-fg !important;
+    background-color: $color-mute-bg !important;
+    border: solid $color-mute-bg 0px !important;
+
+    .card-title {
+        color: $color-fg !important;
+        font-size: x-large;
+        font-weight: 700;
+    }
+}

theming/rules/_navbar.scss

@@ -0,0 +1,4 @@
+.navbar {
+    background-color: $body-bg;
+    color: $text-muted;
+}

theming/variables/_borders.scss

@@ -0,0 +1,6 @@
+$border-radius-lg: 1rem;
+$border-radius-sm: 0.5rem;
+$border-width-lg: 2px;
+$border-width: 1px;
+$border-width-sm: 0.5px;
+$default-border-wide: $border-width solid $light-bg-offset;

theming/variables/_colorsdark.scss

@@ -0,0 +1,36 @@
+$white:    #ffffff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #373a3c !default;
+$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-secondary: $dark-green;
+$color-highlight: lighten($dark-green, 10%);
+
+$color-mute-bg: $gray-800;
+
+$body-color: white;
+$body-bg: #201F24;
+$light-bg: #201F24;
+$light-bg-offset: $color-secondary;
+$color-fg: white;
+
+$quarto-category-background-color: lighten($light-bg, 2%);
+$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;

theming/variables/_colorslight.scss

@@ -0,0 +1,34 @@
+$white:    #ffffff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #373a3c !default;
+$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: #EDF4F4;
+$logo-plum: #870052;
+$medium-grey: #CCD1D5;
+$color-fg: black;
+
+$color-primary: $dark-green;
+$color-secondary: darken($light-blue, 20%);
+
+$color-mute-bg: $gray-200;
+
+$quarto-category-background-color: lighten($medium-grey, 10%);
+$quarto-category-border-color: darken($medium-grey, 5%);
+$quarto-category-hover-background-color: lighten($medium-grey, 15%);
+$quarto-category-hover-border-color: darken($medium-grey, 15%);
+$quarto-category-highlight: $color-fg;
+
+
+$light-bg: white;
+$light-bg-offset: $color-secondary;