diff --git a/_quarto.yml b/_quarto.yml
index 66222198d..422001106 100644
--- a/_quarto.yml
+++ b/_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 Hong Ge, and lovingly maintained by the core team of volunteers.
The contents of this website are © 2024 under the terms of the MIT License.
@@ -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
diff --git a/index.qmd b/index.qmd
index d2bf8a679..36c9ef99f 100644
--- a/index.qmd
+++ b/index.qmd
@@ -8,6 +8,35 @@ description: |
Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language.
---
+
+
+
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.
+
+
+
+
Modular & composable
+ Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
+
+
+
+
\ No newline at end of file
diff --git a/theming/dark.scss b/theming/dark.scss
new file mode 100644
index 000000000..9a2446d3f
--- /dev/null
+++ b/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";
+
+//
\ No newline at end of file
diff --git a/theming/light.scss b/theming/light.scss
new file mode 100644
index 000000000..d6826e908
--- /dev/null
+++ b/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";
+
diff --git a/theming/rules/_buttons.scss b/theming/rules/_buttons.scss
new file mode 100644
index 000000000..18fb1de26
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/theming/rules/_cards.scss b/theming/rules/_cards.scss
new file mode 100644
index 000000000..f064c6e22
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/theming/rules/_navbar.scss b/theming/rules/_navbar.scss
new file mode 100644
index 000000000..5ec0c505d
--- /dev/null
+++ b/theming/rules/_navbar.scss
@@ -0,0 +1,4 @@
+.navbar {
+ background-color: $body-bg;
+ color: $text-muted;
+}
diff --git a/theming/variables/_borders.scss b/theming/variables/_borders.scss
new file mode 100644
index 000000000..e96ef65f7
--- /dev/null
+++ b/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;
diff --git a/theming/variables/_colorsdark.scss b/theming/variables/_colorsdark.scss
new file mode 100644
index 000000000..1ff5634dc
--- /dev/null
+++ b/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;
diff --git a/theming/variables/_colorslight.scss b/theming/variables/_colorslight.scss
new file mode 100644
index 000000000..3623ffd61
--- /dev/null
+++ b/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;