From 93aa82a89e127a76bd524c9b5d69f1c251a2f2dc Mon Sep 17 00:00:00 2001 From: Simon Steiger <106233551+simonsteiger@users.noreply.github.com> Date: Tue, 22 Oct 2024 18:43:59 +0200 Subject: [PATCH 01/19] first part of new landing page (#1) * very basic redesign * make buttons interactive --- _quarto.yml | 11 ++++----- index.qmd | 30 ++++++++++++++++++++++++ theming/dark.scss | 15 ++++++++++++ theming/light.scss | 11 +++++++++ theming/rules/_buttons.scss | 24 +++++++++++++++++++ theming/rules/_cards.scss | 17 ++++++++++++++ theming/rules/_navbar.scss | 4 ++++ theming/variables/_borders.scss | 6 +++++ theming/variables/_colorsdark.scss | 36 +++++++++++++++++++++++++++++ theming/variables/_colorslight.scss | 34 +++++++++++++++++++++++++++ 10 files changed, 182 insertions(+), 6 deletions(-) create mode 100644 theming/dark.scss create mode 100644 theming/light.scss create mode 100644 theming/rules/_buttons.scss create mode 100644 theming/rules/_cards.scss create mode 100644 theming/rules/_navbar.scss create mode 100644 theming/variables/_borders.scss create mode 100644 theming/variables/_colorsdark.scss create mode 100644 theming/variables/_colorslight.scss 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. --- +
+Three normal probability distributions +Turing.jl +Bayesian inference with probabilistic programming +
+[Get Started](https://turinglang.org/docs/tutorials/docs-00-getting-started/){.button--fill .btn} + + +[API reference](/library/){.button .btn} +
+
+
+
+
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; From 9970ad672bb8bc37e31dcea88e3ab6b16f739eea Mon Sep 17 00:00:00 2001 From: Simon Steiger <106233551+simonsteiger@users.noreply.github.com> Date: Wed, 23 Oct 2024 18:36:41 +0200 Subject: [PATCH 02/19] Add code examples (#2) * add dangling code example * add code example section --- _quarto.yml | 3 +- index.qmd | 109 ++++++++++++++++++++++------ theming/dark.scss | 2 + theming/light.scss | 2 + theming/rules/_buttons.scss | 4 +- theming/rules/_cards.scss | 6 ++ theming/rules/_layouts.scss | 3 + theming/rules/_navbar.scss | 4 + theming/rules/_sourceCode.scss | 9 +++ theming/variables/_colorsdark.scss | 9 +-- theming/variables/_colorslight.scss | 6 +- 11 files changed, 122 insertions(+), 35 deletions(-) create mode 100644 theming/rules/_layouts.scss create mode 100644 theming/rules/_sourceCode.scss diff --git a/_quarto.yml b/_quarto.yml index 422001106..c3910ddc4 100644 --- a/_quarto.yml +++ b/_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/ @@ -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 diff --git a/index.qmd b/index.qmd index 36c9ef99f..c95c2cdd0 100644 --- a/index.qmd +++ b/index.qmd @@ -8,33 +8,96 @@ description: | Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language. --- -
-Three normal probability distributions -Turing.jl -Bayesian inference with probabilistic programming -
-[Get Started](https://turinglang.org/docs/tutorials/docs-00-getting-started/){.button--fill .btn} - - -[API reference](/library/){.button .btn} -
-
-
-
-
Intuitive
- Turing models are easy to write and communicate — syntax is close to mathematical notations. +```{=html} +
+
+ Three normal probability distributions + + Turing.jl + + + Bayesian inference with probabilistic programming + +
- -
-
General-purpose
- Turing supports models with discrete parameters and stochastic control flow. +
+
+
+ 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. +
- -
-
Modular & composable
- Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. +
+``` +
+
+
+
+ Hello, World in Turing
+ Some text about how easy it is to [get going](https://turinglang.org/docs/tutorials/00-introduction/). +
+
+```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; +``` +
+
+
+```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 +``` +
+
+
+ Goodbye, World in Turing +
+ 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. +
+
+
+ \ No newline at end of file +[See all news →](news/) diff --git a/theming/dark.scss b/theming/dark.scss index a7b1a9799..32d8fc9ca 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -3,15 +3,19 @@ // Bootswatch $theme: "cosmo" !default; +@import "variables/greys"; @import "variables/colorsdark"; @import "variables/borders"; +@import "variables/spacers"; /*-- scss:rules --*/ +@import "rules/mixins"; + @import "rules/layouts"; -@import "rules/cards"; -@import "rules/buttons"; +@import "rules/hoverables-dark"; +@import "rules/panels"; @import "rules/navbar"; -@import "rules/sourceCode"; +@import "rules/codeblocks"; -// \ No newline at end of file +@import "old/old-styles"; diff --git a/theming/light.scss b/theming/light.scss index fefc9208e..61f3fc843 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -1,13 +1,19 @@ /*-- scss:defaults --*/ +@import "variables/greys"; @import "variables/colorslight"; @import "variables/borders"; +@import "variables/spacers"; /*-- scss:rules --*/ +@import "rules/mixins"; + @import "rules/layouts"; -@import "rules/cards"; -@import "rules/buttons"; +@import "rules/hoverables-light"; +@import "rules/panels"; @import "rules/navbar"; -@import "rules/sourceCode"; +@import "rules/codeblocks"; + +@import "old/old-styles"; diff --git a/theming/old/_old-styles.scss b/theming/old/_old-styles.scss new file mode 100644 index 000000000..9f8f2ff79 --- /dev/null +++ b/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; +} diff --git a/theming/rules/_buttons.scss b/theming/rules/_buttons.scss deleted file mode 100644 index 3984ecee8..000000000 --- a/theming/rules/_buttons.scss +++ /dev/null @@ -1,24 +0,0 @@ -.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: $color-highlight !important; - border-color: $color-highlight !important; - } - } -} diff --git a/theming/rules/_sourceCode.scss b/theming/rules/_codeblocks.scss similarity index 100% rename from theming/rules/_sourceCode.scss rename to theming/rules/_codeblocks.scss diff --git a/theming/rules/_hoverables-dark.scss b/theming/rules/_hoverables-dark.scss new file mode 100644 index 000000000..e4b84b101 --- /dev/null +++ b/theming/rules/_hoverables-dark.scss @@ -0,0 +1,25 @@ +$hover-border: lighten($color-secondary, 5%); + +.button { + @include button($hover-border) +} + +.card { + @include card($hover-border) +} + +.example-code { + flex: 0 1 45%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} + +.example-text { + flex: 0 1 53%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} diff --git a/theming/rules/_hoverables-light.scss b/theming/rules/_hoverables-light.scss new file mode 100644 index 000000000..7303cc0c4 --- /dev/null +++ b/theming/rules/_hoverables-light.scss @@ -0,0 +1,25 @@ +$hover-border: darken($color-secondary, 15%); + +.button { + @include button($hover-border) +} + +.card { + @include card($hover-border) +} + +.example-code { + flex: 0 1 45%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} + +.example-text { + flex: 0 1 53%; + + @media screen and (max-width: 992px) { + flex: 0 1 100%; + } +} diff --git a/theming/rules/_layouts.scss b/theming/rules/_layouts.scss index f48b3d730..145214847 100644 --- a/theming/rules/_layouts.scss +++ b/theming/rules/_layouts.scss @@ -1,3 +1,7 @@ .content-panel { padding: 1.5rem; } + +.section-end-space { + padding-bottom: $large-y-space; +} diff --git a/theming/rules/_mixins.scss b/theming/rules/_mixins.scss new file mode 100644 index 000000000..48efe07a5 --- /dev/null +++ b/theming/rules/_mixins.scss @@ -0,0 +1,57 @@ +@mixin raw-card { + border-radius: $border-radius-sm; + padding: 1rem; + min-height: 120px !important; + min-width: 300px !important; + + --bs-card-spacer-x: 0rem !important; + --bs-card-spacer-y: 0rem !important; + + color: $color-fg !important; + background-color: $color-secondary !important; + border: solid $color-secondary 1px !important; + + transition: background-color 0.3s ease, border-color 0.3s ease !important; +} + +@mixin card($hover-border) { + @include raw-card; + + .card-title { + color: $color-fg !important; + font-weight: 700; + } + + &:hover { + background-color: $color-highlight !important; + border-color: $hover-border !important; + } +} + +@mixin raw-button { + padding: 0.5rem 1rem; + border-radius: 25px; + border: solid $text-muted 1px; + color: $color-fg; + background-color: $body-bg; + + &:hover { + background-color: $color-mute-bg !important; + border-color: $color-mute-bg !important; + } +} + +@mixin button($hover-border) { + @include raw-button; + + &--fill { + @extend .button; + background-color: $color-secondary; + border: solid $color-secondary 1px; + + &:hover { + background-color: $color-highlight !important; + border-color: $hover-border !important; + } + } +} \ No newline at end of file diff --git a/theming/rules/_cards.scss b/theming/rules/_panels.scss similarity index 76% rename from theming/rules/_cards.scss rename to theming/rules/_panels.scss index fdf6419f5..dc8a6110b 100644 --- a/theming/rules/_cards.scss +++ b/theming/rules/_panels.scss @@ -1,15 +1,15 @@ -.card { +.panel { border-radius: $border-radius-sm; padding: 1rem; - min-height: 120px; - min-width: 200px; - max-width: 300px; + min-height: 150px; + min-width: 300px; + max-width: 31%; color: $color-fg !important; background-color: $color-mute-bg !important; border: solid $color-mute-bg 0px !important; - .card-title { + .panel-title { color: $color-fg !important; margin-bottom: 0.5rem !important; font-size: x-large; @@ -17,7 +17,7 @@ } &--nopad { - @extend .card; + @extend .panel; padding: 0rem; } } diff --git a/theming/variables/_colorsdark.scss b/theming/variables/_colorsdark.scss index 5f4639dbd..ebf910c4e 100644 --- a/theming/variables/_colorsdark.scss +++ b/theming/variables/_colorsdark.scss @@ -1,22 +1,10 @@ -$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; $light-blue: darken(#EDF4F4, 5%); $medium-grey: #CCD1D5; -$color-primary: red; // ??? Nope +$color-primary: $light-blue; // not sure about this one $color-secondary: $dark-green; -$color-highlight: lighten($color-secondary, 10%); +$color-highlight: darken($color-secondary, 5%); $color-mute-bg: $gray-800; @@ -26,10 +14,4 @@ $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; - $link-color: lighten($dark-green, 15%); diff --git a/theming/variables/_colorslight.scss b/theming/variables/_colorslight.scss index 36b45e1c4..087c9959e 100644 --- a/theming/variables/_colorslight.scss +++ b/theming/variables/_colorslight.scss @@ -1,15 +1,3 @@ -$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; $light-blue: #EDF4F4; $medium-grey: #CCD1D5; @@ -21,13 +9,6 @@ $color-highlight: lighten($color-secondary, 10%); $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; diff --git a/theming/variables/_greys.scss b/theming/variables/_greys.scss new file mode 100644 index 000000000..4284ed369 --- /dev/null +++ b/theming/variables/_greys.scss @@ -0,0 +1,11 @@ +$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; diff --git a/theming/variables/_spacers.scss b/theming/variables/_spacers.scss new file mode 100644 index 000000000..f816d9abe --- /dev/null +++ b/theming/variables/_spacers.scss @@ -0,0 +1 @@ +$large-y-space: 6rem; \ No newline at end of file From ff8304ac8ab34a813d659353d91b1031219766b3 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Fri, 25 Oct 2024 22:36:41 +0200 Subject: [PATCH 04/19] better alignment --- index.qmd | 8 ++++---- theming/dark.scss | 2 ++ theming/rules/_mixins.scss | 2 +- theming/rules/_panels.scss | 8 ++++++++ 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/index.qmd b/index.qmd index 6a17514e5..9b24dd097 100644 --- a/index.qmd +++ b/index.qmd @@ -30,7 +30,7 @@ description: | Bayesian inference with probabilistic programming -
+
Tutorials @@ -42,7 +42,7 @@ description: |
-
+
Intuitive @@ -64,7 +64,7 @@ description: |
``` -
+
Hello, World in Turing @@ -86,7 +86,7 @@ end; ```
-
+
Goodbye, World in Turing diff --git a/theming/dark.scss b/theming/dark.scss index 32d8fc9ca..1a54421df 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -19,3 +19,5 @@ $theme: "cosmo" !default; @import "rules/codeblocks"; @import "old/old-styles"; + +// \ No newline at end of file diff --git a/theming/rules/_mixins.scss b/theming/rules/_mixins.scss index 48efe07a5..0bf27dc16 100644 --- a/theming/rules/_mixins.scss +++ b/theming/rules/_mixins.scss @@ -2,7 +2,7 @@ border-radius: $border-radius-sm; padding: 1rem; min-height: 120px !important; - min-width: 300px !important; + //min-width: 300px !important; --bs-card-spacer-x: 0rem !important; --bs-card-spacer-y: 0rem !important; diff --git a/theming/rules/_panels.scss b/theming/rules/_panels.scss index dc8a6110b..09d13ffd1 100644 --- a/theming/rules/_panels.scss +++ b/theming/rules/_panels.scss @@ -21,3 +21,11 @@ padding: 0rem; } } + +.panel-wrapper { + justify-content: space-between; + + @media screen and (max-width: 992px) { + justify-content: center; + } +} From 322fca71d65afbc14958bf43c70182a736e3a92b Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Sun, 27 Oct 2024 07:49:33 +0100 Subject: [PATCH 05/19] add resources / "learn more" section --- index.qmd | 56 +++++++++++++++++++ resources/content/inofficial_tutorials.qmd | 5 ++ resources/content/talks.qmd | 5 ++ theming/dark.scss | 2 +- theming/light.scss | 2 +- theming/rules/_hoverables-dark.scss | 6 ++ theming/rules/_hoverables-light.scss | 6 ++ theming/rules/_layouts.scss | 4 ++ theming/rules/_mixins.scss | 6 +- .../variables/{_greys.scss => _grays.scss} | 0 10 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 resources/content/inofficial_tutorials.qmd create mode 100644 resources/content/talks.qmd rename theming/variables/{_greys.scss => _grays.scss} (100%) diff --git a/index.qmd b/index.qmd index 9b24dd097..f67c7dbcf 100644 --- a/index.qmd +++ b/index.qmd @@ -118,3 +118,59 @@ end ::: [See all news →](news/) + +```{=html} +
+ Learn more +
+ +``` diff --git a/resources/content/inofficial_tutorials.qmd b/resources/content/inofficial_tutorials.qmd new file mode 100644 index 000000000..2b2e64772 --- /dev/null +++ b/resources/content/inofficial_tutorials.qmd @@ -0,0 +1,5 @@ +--- +title: Inofficial tutorials +--- + +TODO: Add a list of inofficial tutorials. diff --git a/resources/content/talks.qmd b/resources/content/talks.qmd new file mode 100644 index 000000000..7ebb45317 --- /dev/null +++ b/resources/content/talks.qmd @@ -0,0 +1,5 @@ +--- +title: Talks +--- + +TODO: Add a list of inofficial talks. diff --git a/theming/dark.scss b/theming/dark.scss index 1a54421df..8c942238d 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -3,7 +3,7 @@ // Bootswatch $theme: "cosmo" !default; -@import "variables/greys"; +@import "variables/grays"; @import "variables/colorsdark"; @import "variables/borders"; @import "variables/spacers"; diff --git a/theming/light.scss b/theming/light.scss index 61f3fc843..213ae5536 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -1,6 +1,6 @@ /*-- scss:defaults --*/ -@import "variables/greys"; +@import "variables/grays"; @import "variables/colorslight"; @import "variables/borders"; @import "variables/spacers"; diff --git a/theming/rules/_hoverables-dark.scss b/theming/rules/_hoverables-dark.scss index e4b84b101..ba48ce4cd 100644 --- a/theming/rules/_hoverables-dark.scss +++ b/theming/rules/_hoverables-dark.scss @@ -23,3 +23,9 @@ $hover-border: lighten($color-secondary, 5%); flex: 0 1 100%; } } + +.pseudolisting { + @extend .card; + @extend .quarto-grid-item; + text-decoration: none; +} diff --git a/theming/rules/_hoverables-light.scss b/theming/rules/_hoverables-light.scss index 7303cc0c4..0be552ad4 100644 --- a/theming/rules/_hoverables-light.scss +++ b/theming/rules/_hoverables-light.scss @@ -23,3 +23,9 @@ $hover-border: darken($color-secondary, 15%); flex: 0 1 100%; } } + +.pseudolisting { + @extend .card; + @extend .quarto-grid-item; + text-decoration: none; +} diff --git a/theming/rules/_layouts.scss b/theming/rules/_layouts.scss index 145214847..9c99ccb44 100644 --- a/theming/rules/_layouts.scss +++ b/theming/rules/_layouts.scss @@ -5,3 +5,7 @@ .section-end-space { padding-bottom: $large-y-space; } + +.section-start-space { + padding-top: $large-y-space; +} diff --git a/theming/rules/_mixins.scss b/theming/rules/_mixins.scss index 0bf27dc16..8692f2616 100644 --- a/theming/rules/_mixins.scss +++ b/theming/rules/_mixins.scss @@ -1,8 +1,6 @@ @mixin raw-card { border-radius: $border-radius-sm; padding: 1rem; - min-height: 120px !important; - //min-width: 300px !important; --bs-card-spacer-x: 0rem !important; --bs-card-spacer-y: 0rem !important; @@ -22,6 +20,10 @@ font-weight: 700; } + .card-text { + color: $text-muted !important; + } + &:hover { background-color: $color-highlight !important; border-color: $hover-border !important; diff --git a/theming/variables/_greys.scss b/theming/variables/_grays.scss similarity index 100% rename from theming/variables/_greys.scss rename to theming/variables/_grays.scss From a8459b9052b188210f162d1538d91dd0dadeb3df Mon Sep 17 00:00:00 2001 From: Simon Steiger <106233551+simonsteiger@users.noreply.github.com> Date: Mon, 28 Oct 2024 18:34:02 +0100 Subject: [PATCH 06/19] Improved colours (#4) * improve colors * better link hover color --- index.qmd | 38 ++++---- theming/dark.scss | 4 +- theming/light.scss | 4 +- theming/rules/_codeblocks.scss | 9 -- theming/rules/_hoverables-dark.scss | 10 +- theming/rules/_hoverables-light.scss | 6 +- theming/rules/_layouts.scss | 31 ++++++ theming/rules/_mixins.scss | 5 +- theming/rules/_navbar.scss | 11 ++- theming/rules/_panels.scss | 31 ------ theming/rules/_quarto-tweaks.scss | 36 +++++++ theming/theme-dark.scss | 139 --------------------------- theming/variables/_colorsdark.scss | 15 ++- theming/variables/_colorslight.scss | 9 +- 14 files changed, 127 insertions(+), 221 deletions(-) delete mode 100644 theming/rules/_codeblocks.scss delete mode 100644 theming/rules/_panels.scss create mode 100644 theming/rules/_quarto-tweaks.scss delete mode 100644 theming/theme-dark.scss diff --git a/index.qmd b/index.qmd index f67c7dbcf..502cd0d99 100644 --- a/index.qmd +++ b/index.qmd @@ -44,19 +44,19 @@ description: |
-
+
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. @@ -109,9 +109,9 @@ end
```{=html} -
+

News -

+ ``` ::: {#news} @@ -120,57 +120,57 @@ end [See all news →](news/) ```{=html} -
+

Learn more -

+ ``` diff --git a/theming/dark.scss b/theming/dark.scss index 8c942238d..cdaef1065 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -14,10 +14,8 @@ $theme: "cosmo" !default; @import "rules/layouts"; @import "rules/hoverables-dark"; -@import "rules/panels"; @import "rules/navbar"; -@import "rules/codeblocks"; +@import "rules/quarto-tweaks"; @import "old/old-styles"; -// \ No newline at end of file diff --git a/theming/light.scss b/theming/light.scss index 213ae5536..434c7a626 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -11,9 +11,9 @@ @import "rules/layouts"; @import "rules/hoverables-light"; -@import "rules/panels"; @import "rules/navbar"; -@import "rules/codeblocks"; +@import "rules/quarto-tweaks"; @import "old/old-styles"; +// \ No newline at end of file diff --git a/theming/rules/_codeblocks.scss b/theming/rules/_codeblocks.scss deleted file mode 100644 index 443e6836c..000000000 --- a/theming/rules/_codeblocks.scss +++ /dev/null @@ -1,9 +0,0 @@ -.sourceCode { - background-color: $color-mute-bg !important; - border-color: $color-mute-bg !important; - border-radius: $border-radius-sm !important; - - pre { - padding: 0.5rem !important; - } -} \ No newline at end of file diff --git a/theming/rules/_hoverables-dark.scss b/theming/rules/_hoverables-dark.scss index ba48ce4cd..9076ac941 100644 --- a/theming/rules/_hoverables-dark.scss +++ b/theming/rules/_hoverables-dark.scss @@ -1,11 +1,13 @@ -$hover-border: lighten($color-secondary, 5%); - .button { - @include button($hover-border) + @include button($border-hover); } .card { - @include card($hover-border) + @include card($border-hover); + + .card-text { + color: $text-muted; + } } .example-code { diff --git a/theming/rules/_hoverables-light.scss b/theming/rules/_hoverables-light.scss index 0be552ad4..5b5cfc766 100644 --- a/theming/rules/_hoverables-light.scss +++ b/theming/rules/_hoverables-light.scss @@ -1,11 +1,9 @@ -$hover-border: darken($color-secondary, 15%); - .button { - @include button($hover-border) + @include button($border-hover) } .card { - @include card($hover-border) + @include card($border-hover) } .example-code { diff --git a/theming/rules/_layouts.scss b/theming/rules/_layouts.scss index 9c99ccb44..26ca556f1 100644 --- a/theming/rules/_layouts.scss +++ b/theming/rules/_layouts.scss @@ -9,3 +9,34 @@ .section-start-space { padding-top: $large-y-space; } + +.panel { + border-radius: $border-radius-sm; + padding: 1rem 1.25rem; + min-height: 150px; + min-width: 300px; + max-width: 31%; + + color: $text-muted !important; + background-color: $color-mute-bg !important; + border: solid $color-mute-bg 0px !important; + + .panel-title { + color: $color-fg !important; + font-size: x-large; + font-weight: 700; + } + + &--nopad { + @extend .panel; + padding: 0rem; + } +} + +.panel-wrapper { + justify-content: space-between; + + @media screen and (max-width: 992px) { + justify-content: center; + } +} diff --git a/theming/rules/_mixins.scss b/theming/rules/_mixins.scss index 8692f2616..9eb8c54e1 100644 --- a/theming/rules/_mixins.scss +++ b/theming/rules/_mixins.scss @@ -20,10 +20,6 @@ font-weight: 700; } - .card-text { - color: $text-muted !important; - } - &:hover { background-color: $color-highlight !important; border-color: $hover-border !important; @@ -40,6 +36,7 @@ &:hover { background-color: $color-mute-bg !important; border-color: $color-mute-bg !important; + text-decoration: none; } } diff --git a/theming/rules/_navbar.scss b/theming/rules/_navbar.scss index b27ec8ad3..f16f5f40f 100644 --- a/theming/rules/_navbar.scss +++ b/theming/rules/_navbar.scss @@ -3,6 +3,15 @@ color: $text-muted; a:hover { - text-decoration: none; + text-decoration: none !important; + } + + .nav-link:hover { + color: $link-color !important; + } + + .navbar-brand:hover { + color: $link-color !important; + transition: color 0.15s ease-in-out !important; } } diff --git a/theming/rules/_panels.scss b/theming/rules/_panels.scss deleted file mode 100644 index 09d13ffd1..000000000 --- a/theming/rules/_panels.scss +++ /dev/null @@ -1,31 +0,0 @@ -.panel { - border-radius: $border-radius-sm; - padding: 1rem; - min-height: 150px; - min-width: 300px; - max-width: 31%; - - color: $color-fg !important; - background-color: $color-mute-bg !important; - border: solid $color-mute-bg 0px !important; - - .panel-title { - color: $color-fg !important; - margin-bottom: 0.5rem !important; - font-size: x-large; - font-weight: 700; - } - - &--nopad { - @extend .panel; - padding: 0rem; - } -} - -.panel-wrapper { - justify-content: space-between; - - @media screen and (max-width: 992px) { - justify-content: center; - } -} diff --git a/theming/rules/_quarto-tweaks.scss b/theming/rules/_quarto-tweaks.scss new file mode 100644 index 000000000..f95be0518 --- /dev/null +++ b/theming/rules/_quarto-tweaks.scss @@ -0,0 +1,36 @@ +.sourceCode { + background-color: $color-mute-bg !important; + border-color: $color-mute-bg !important; + border-radius: $border-radius-sm !important; + + pre { + padding: 0.5rem !important; + } +} + +.quarto-title-banner { + background-color: $body-bg !important; + + .title { + color: $color-fg !important; + } +} + +.listing-description { + .no-external { + color: $text-muted !important; + } +} + +.input-group-text { + background-color: $color-mute-bg !important; +} + +a { + text-decoration: none; + &:hover { + color: $link-color; + text-decoration: underline; + } + +} diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss deleted file mode 100644 index caa2c5b29..000000000 --- a/theming/theme-dark.scss +++ /dev/null @@ -1,139 +0,0 @@ -/*-- scss:defaults --*/ -// Cosmo 5.3.3 -// Bootswatch - -$theme: "cosmo" !default; - -// Manually-added colors - -$background-nav: #192222; -$background-body: #131818; -$foreground: #1bb3ac; -$foreground-dark: #073c44; -$links:#2aa198; -$links-hover: #31dce6; -$code-background-color: #172424; -$li: #bcbcbc; - -// Quarto default colors - -$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; - -$indigo: #6610f2 !default; -$purple: #613d7c !default; -$pink: #e83e8c !default; -$red: #ff0039 !default; -$orange: #f0ad4e !default; -$yellow: #ff7518 !default; -$green: #3fb618 !default; -$teal: #20c997 !default; -$cyan: #9954bb !default; - -$primary: $links-hover !default; -$secondary: $gray-800 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-800 !default; - -$min-contrast-ratio: 2.6 !default; - -// Options - -$enable-rounded: false !default; - -// Fonts - -// stylelint-disable-next-line value-keyword-case -$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; -$headings-font-weight: 400 !default; - -// Tables - -$table-color: initial !default; - -// Alerts - -$alert-border-width: 0 !default; - -// Progress bars - -$progress-height: .5rem !default; - - -// Custom tweaks for Quarto-Cosmo - -$navbar-bg: $background-nav; -$navbar-fg: $foreground; -$footer-bg: $background-nav; -$footer-fg: $foreground; -$body-color: $white; -$body-bg: $background-body; - -a { - color: $links !important; -} - -a:hover { - color: $links-hover !important; -} - -code, p code, li code { - background-color: $code-background-color !important; - color: $links; -} - -li { - color: $li !important; -} - -.menu-text:hover { - color: $links-hover !important; -} - -.quarto-title-banner { - background-color: $foreground-dark !important; -} - -.title { - color: $white !important; -} - -.listing-description a { - color: $li !important; -} - -p { - color: $li !important; -} - - -.team-member, .input-group-text { - background-color: $background-nav !important; -} - -.level4, .listing-category { - color: $foreground !important; -} - -::selection { - color: $links-hover; - background: $background-nav; -} - -.tooltip { - --bs-tooltip-color: $black !important; - --bs-tooltip-bg: $white !important; -} diff --git a/theming/variables/_colorsdark.scss b/theming/variables/_colorsdark.scss index ebf910c4e..44fc3d24b 100644 --- a/theming/variables/_colorsdark.scss +++ b/theming/variables/_colorsdark.scss @@ -1,17 +1,26 @@ $dark-green: #073c44; $light-blue: darken(#EDF4F4, 5%); -$medium-grey: #CCD1D5; +$red: #f87683; +$medium-grey: #bcbcbc; $color-primary: $light-blue; // not sure about this one $color-secondary: $dark-green; +$color-tertiary: $red; $color-highlight: darken($color-secondary, 5%); $color-mute-bg: $gray-800; $body-color: white; $body-bg: #201F24; -$light-bg: #201F24; $light-bg-offset: $color-secondary; $color-fg: white; -$link-color: lighten($dark-green, 15%); +$text-muted: $medium-grey; + +$color-active: lighten($color-secondary, 5%); +$link-color: $color-tertiary; +$border-hover: $color-active; + +p { + color: $text-muted !important; +} diff --git a/theming/variables/_colorslight.scss b/theming/variables/_colorslight.scss index 087c9959e..102715630 100644 --- a/theming/variables/_colorslight.scss +++ b/theming/variables/_colorslight.scss @@ -1,15 +1,20 @@ $dark-green: #073c44; +$red: #d73a4a; $light-blue: #EDF4F4; $medium-grey: #CCD1D5; $color-fg: black; $color-primary: $dark-green; $color-secondary: darken($light-blue, 20%); +$color-tertiary: $red; $color-highlight: lighten($color-secondary, 10%); $color-mute-bg: $gray-200; -$light-bg: white; +$color-active: lighten($color-secondary, 5%); +$link-color: $color-tertiary; +$border-hover: darken($color-secondary, 5%); + +$body-bg: white; $light-bg-offset: $color-secondary; -$link-color: lighten($dark-green, 15%); From 06306ce53730cdfe39f6cea6062642c5a1c24f85 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 28 Oct 2024 18:40:53 +0100 Subject: [PATCH 07/19] better navbar text contrast --- theming/rules/_navbar.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/theming/rules/_navbar.scss b/theming/rules/_navbar.scss index f16f5f40f..3cc6cb910 100644 --- a/theming/rules/_navbar.scss +++ b/theming/rules/_navbar.scss @@ -6,12 +6,18 @@ text-decoration: none !important; } - .nav-link:hover { - color: $link-color !important; + .nav-link { + color: $text-muted; + &:hover { + color: $link-color !important; + } } - .navbar-brand:hover { - color: $link-color !important; - transition: color 0.15s ease-in-out !important; + .navbar-brand { + color: $text-muted; + &:hover { + color: $link-color !important; + transition: color 0.15s ease-in-out !important; + } } } From 296cf71173edd3b36a12c686892b4e00301694eb Mon Sep 17 00:00:00 2001 From: Simon Steiger <106233551+simonsteiger@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:14:46 +0100 Subject: [PATCH 08/19] Add SVG header (#5) * paste in svg * responsive svg header --- index.qmd | 28 +++++++++---- theming/dark.scss | 1 + theming/light.scss | 3 +- theming/rules/_svg.scss | 89 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 112 insertions(+), 9 deletions(-) create mode 100644 theming/rules/_svg.scss diff --git a/index.qmd b/index.qmd index 502cd0d99..10f871da7 100644 --- a/index.qmd +++ b/index.qmd @@ -22,14 +22,25 @@ description: | --- ```{=html} -
- Three normal probability distributions - - Turing.jl - - +
+
+

Turing.jl

+
+
+ + + + + +
+
+ Bayesian inference with probabilistic programming - +
+ +``` + +```{=html}
diff --git a/theming/dark.scss b/theming/dark.scss index cdaef1065..aa4735b59 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -16,6 +16,7 @@ $theme: "cosmo" !default; @import "rules/hoverables-dark"; @import "rules/navbar"; @import "rules/quarto-tweaks"; +@import "rules/svg"; @import "old/old-styles"; diff --git a/theming/light.scss b/theming/light.scss index 434c7a626..20b804e5a 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -13,7 +13,6 @@ @import "rules/hoverables-light"; @import "rules/navbar"; @import "rules/quarto-tweaks"; +@import "rules/svg"; @import "old/old-styles"; - -// \ No newline at end of file diff --git a/theming/rules/_svg.scss b/theming/rules/_svg.scss new file mode 100644 index 000000000..613d66735 --- /dev/null +++ b/theming/rules/_svg.scss @@ -0,0 +1,89 @@ +.line-graph { + /* height: 85vh; */ + width: 100%; + padding-top: 5%; + position: relative; +} + +svg { + width: 100%; + height: 100%; +} + +@keyframes draw { + to { + stroke-dashoffset: 0; + } +} + +.line { + fill: none; + stroke-width: 7; + stroke-dasharray: 3900; + stroke-dashoffset: 3900; + animation: draw 6s forwards ease-in-out; + stroke-opacity: 1; +} + +.line1 { + stroke: #b352cc; + animation-delay: 0s; +} + +.line2 { + stroke: #cc3333; + animation-delay: 0.5s; +} + +.line3 { + stroke: #218921; + animation-delay: 1s; +} + +.upperContent { + width: 88%; + text-align: end; + padding-top: 7%; + padding-right: 10%; + position: absolute; + z-index: 5; + opacity: 0; + animation: fadeInText 2s forwards ease-in-out; + animation-delay: 3s; + + @media screen and (max-width: 768px) { + width: 100%; + padding-top: 0%; + padding-right: 0%; + text-align: center; + } +} + +.upperContent > h1 { + font-size: 5rem; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + + @media screen and (max-width: 992px) { + font-size: 3.5rem; + } +} + +.upperContent > p { + font-size: 25px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + margin-top: 5%; +} + +.upperContent > h1, + +.upperContent > p { + margin: 0; + padding: 0; +} + +@keyframes fadeInText { + to { + opacity: 1; + transform: translateY(0); + } +} From cce5870911d7e804122f9737a78279fe77c23152 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 28 Oct 2024 20:26:55 +0100 Subject: [PATCH 09/19] fix "learn more" hover text-deco --- theming/rules/_hoverables-light.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/theming/rules/_hoverables-light.scss b/theming/rules/_hoverables-light.scss index 5b5cfc766..e77d527e0 100644 --- a/theming/rules/_hoverables-light.scss +++ b/theming/rules/_hoverables-light.scss @@ -26,4 +26,7 @@ @extend .card; @extend .quarto-grid-item; text-decoration: none; + &:hover { + text-decoration: none; + } } From 5878ae3bffa02a38ccb8288bca710b449098d0b9 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Tue, 29 Oct 2024 18:59:44 +0100 Subject: [PATCH 10/19] style team page for dark mode using the same background colour for the team "cards" as for the non-hoverable cards on the landing page --- team/team.css | 2 +- theming/dark.scss | 12 ++++++------ theming/light.scss | 10 +++++----- theming/rules/_team-dark.scss | 4 ++++ theming/variables/_borders.scss | 1 - theming/variables/_colorsdark.scss | 1 - 6 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 theming/rules/_team-dark.scss diff --git a/team/team.css b/team/team.css index 5bb698fd1..7c3637e40 100644 --- a/team/team.css +++ b/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; diff --git a/theming/dark.scss b/theming/dark.scss index aa4735b59..97e99427c 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -12,11 +12,11 @@ $theme: "cosmo" !default; @import "rules/mixins"; -@import "rules/layouts"; -@import "rules/hoverables-dark"; +@import "rules/layouts"; // custom spacing and layout elements +@import "rules/hoverables-dark"; // hover styling of buttons, listings @import "rules/navbar"; -@import "rules/quarto-tweaks"; -@import "rules/svg"; - -@import "old/old-styles"; +@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 diff --git a/theming/light.scss b/theming/light.scss index 20b804e5a..c256a390d 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -9,10 +9,10 @@ @import "rules/mixins"; -@import "rules/layouts"; -@import "rules/hoverables-light"; +@import "rules/layouts"; // custom spacing and layout elements +@import "rules/hoverables-light"; // hover styling of buttons, listings @import "rules/navbar"; -@import "rules/quarto-tweaks"; -@import "rules/svg"; +@import "rules/quarto-tweaks"; // style modifications of (mostly) quarto classes +@import "rules/svg"; // svg on landing page -@import "old/old-styles"; +@import "old/old-styles"; // copy of old css style sheet diff --git a/theming/rules/_team-dark.scss b/theming/rules/_team-dark.scss new file mode 100644 index 000000000..1322d6da9 --- /dev/null +++ b/theming/rules/_team-dark.scss @@ -0,0 +1,4 @@ +.team-member { + background-color: $color-mute-bg !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; +} diff --git a/theming/variables/_borders.scss b/theming/variables/_borders.scss index e96ef65f7..707edb024 100644 --- a/theming/variables/_borders.scss +++ b/theming/variables/_borders.scss @@ -3,4 +3,3 @@ $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 index 44fc3d24b..76969cab7 100644 --- a/theming/variables/_colorsdark.scss +++ b/theming/variables/_colorsdark.scss @@ -12,7 +12,6 @@ $color-mute-bg: $gray-800; $body-color: white; $body-bg: #201F24; -$light-bg-offset: $color-secondary; $color-fg: white; $text-muted: $medium-grey; From 4436c0f7f061a36e92e1f0b907fba4d4138c6da9 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 25 Nov 2024 08:14:14 +0100 Subject: [PATCH 11/19] more relevant links at top of page - added links to discourse and slack to the buttons at the top of the page - moved link to libraries page to "Learn more" section --- index.qmd | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/index.qmd b/index.qmd index 10f871da7..058ec7792 100644 --- a/index.qmd +++ b/index.qmd @@ -45,11 +45,14 @@ description: | Tutorials - - Ecosystem + + Slack + + + Discourse - View on GitHub + GitHub
@@ -138,12 +141,12 @@ end Learn more
- +
- Discourse + Ecosystem

- Get support from and discuss with other users. + Learn about all the packages that are part of The Turing Organization.

From c834f82a9acc24211f7592c59b26b1d957b59c16 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 25 Nov 2024 09:28:12 +0100 Subject: [PATCH 12/19] mirror gaussians and title --- index.qmd | 18 +++++++++--------- theming/rules/_svg.scss | 8 ++++---- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/index.qmd b/index.qmd index 058ec7792..f5d37e7ca 100644 --- a/index.qmd +++ b/index.qmd @@ -24,17 +24,17 @@ description: | ```{=html}
-

Turing.jl

+

Turing.jl

- - - - - + + + + +
diff --git a/theming/rules/_svg.scss b/theming/rules/_svg.scss index 613d66735..7d1653b17 100644 --- a/theming/rules/_svg.scss +++ b/theming/rules/_svg.scss @@ -43,13 +43,13 @@ svg { .upperContent { width: 88%; text-align: end; - padding-top: 7%; - padding-right: 10%; + padding-top: 5.5%; + padding-right: 45%; position: absolute; z-index: 5; opacity: 0; - animation: fadeInText 2s forwards ease-in-out; - animation-delay: 3s; + animation: fadeInText 1s forwards ease-in-out; + animation-delay: 0.5s; @media screen and (max-width: 768px) { width: 100%; From fc3e949e8297ddc89d460c9abc932e58756b8c4e Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 25 Nov 2024 10:16:48 +0100 Subject: [PATCH 13/19] add css for code in dark mode --- theming/rules/_quarto-tweaks.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/theming/rules/_quarto-tweaks.scss b/theming/rules/_quarto-tweaks.scss index f95be0518..564f0bbee 100644 --- a/theming/rules/_quarto-tweaks.scss +++ b/theming/rules/_quarto-tweaks.scss @@ -32,5 +32,9 @@ a { color: $link-color; text-decoration: underline; } - +} + +code { + background-color: $color-mute-bg !important; + color: $color-fg !important; } From 66ad80112f56073ec91bef6e31cf906e62405369 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Thu, 28 Nov 2024 19:14:10 +0100 Subject: [PATCH 14/19] shorten footer for better fit on mobile --- _quarto.yml | 12 ++---------- theming/dark.scss | 1 + 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/_quarto.yml b/_quarto.yml index c3910ddc4..a482a7129 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -39,16 +39,8 @@ website: page-footer: #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. - - 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 Hong Ge, and maintained by the core team.
+ © 2024 under the terms of the MIT License. back-to-top-navigation: true repo-url: https://github.com/TuringLang/turinglang.github.io/ diff --git a/theming/dark.scss b/theming/dark.scss index 97e99427c..9586f908d 100644 --- a/theming/dark.scss +++ b/theming/dark.scss @@ -20,3 +20,4 @@ $theme: "cosmo" !default; @import "rules/team-dark"; // dark mode for team page @import "old/old-styles"; // copy of old css style sheet + From 33ee9d67817c9e1c586ced12f1f6924606c471da Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Thu, 28 Nov 2024 19:30:27 +0100 Subject: [PATCH 15/19] underline links in footer --- _quarto.yml | 2 +- theming/rules/_navbar.scss | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/_quarto.yml b/_quarto.yml index a482a7129..f8bfaa2c8 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -39,7 +39,7 @@ website: page-footer: #background: "#073c44" left: | - Turing is created by Hong Ge, and maintained by the core team.
+ Turing is created by Hong Ge, and maintained by the core team of volunteers.
© 2024 under the terms of the MIT License. back-to-top-navigation: true diff --git a/theming/rules/_navbar.scss b/theming/rules/_navbar.scss index 3cc6cb910..39de43119 100644 --- a/theming/rules/_navbar.scss +++ b/theming/rules/_navbar.scss @@ -21,3 +21,9 @@ } } } + +.nav-footer { + a { + text-decoration: underline !important; + } +} From e43c36248eda3ddbb4cb3b699c798c165fc4cf2b Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Thu, 28 Nov 2024 19:30:38 +0100 Subject: [PATCH 16/19] responsive header size --- index.qmd | 2 +- theming/rules/_layouts.scss | 4 ++++ theming/rules/_mixins.scss | 2 +- theming/rules/_svg.scss | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/index.qmd b/index.qmd index f5d37e7ca..cdc2c21e6 100644 --- a/index.qmd +++ b/index.qmd @@ -24,7 +24,7 @@ description: | ```{=html}
-

Turing.jl

+

Turing.jl

diff --git a/theming/rules/_layouts.scss b/theming/rules/_layouts.scss index 26ca556f1..d973e1130 100644 --- a/theming/rules/_layouts.scss +++ b/theming/rules/_layouts.scss @@ -10,6 +10,10 @@ padding-top: $large-y-space; } +.responsive-heading { + font-size: clamp(2rem, 6vw, 6rem); +} + .panel { border-radius: $border-radius-sm; padding: 1rem 1.25rem; diff --git a/theming/rules/_mixins.scss b/theming/rules/_mixins.scss index 9eb8c54e1..a1657a9de 100644 --- a/theming/rules/_mixins.scss +++ b/theming/rules/_mixins.scss @@ -27,7 +27,7 @@ } @mixin raw-button { - padding: 0.5rem 1rem; + padding: 0.5rem 1.25rem; border-radius: 25px; border: solid $text-muted 1px; color: $color-fg; diff --git a/theming/rules/_svg.scss b/theming/rules/_svg.scss index 7d1653b17..d29d9356c 100644 --- a/theming/rules/_svg.scss +++ b/theming/rules/_svg.scss @@ -43,7 +43,7 @@ svg { .upperContent { width: 88%; text-align: end; - padding-top: 5.5%; + padding-top: 7%; padding-right: 45%; position: absolute; z-index: 5; From d1c36d6f0ec36ad68b2c681d5018bbedaeb57b1e Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Thu, 28 Nov 2024 20:29:09 +0100 Subject: [PATCH 17/19] content placeholders on landing page --- index.qmd | 79 +++++++++++++++------- resources/content/inofficial_tutorials.qmd | 5 -- resources/content/talks.qmd | 5 -- 3 files changed, 55 insertions(+), 34 deletions(-) delete mode 100644 resources/content/inofficial_tutorials.qmd delete mode 100644 resources/content/talks.qmd diff --git a/index.qmd b/index.qmd index cdc2c21e6..767f1fc54 100644 --- a/index.qmd +++ b/index.qmd @@ -165,29 +165,60 @@ end Learn to tackle specific problems with Turing.jl.

- -
- Inofficial tutorials -
-

- A list of inofficial tutorials using Turing.jl. -

- - -
- Talks -
-

- A list of talks on the Turing.jl ecosystem. -

-
- -
- Workshop -
-

- Placeholder for Turing-Workshop repo link. -

-
``` + +::: {.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} + +::: + +::: {.section-start-space} + +### Bayesian Workflow + +Placeholder text introducing the Bayesian Workflow diagram from the ACM special issue submission. + +```{=html} +
+ +

An example of the Beeysian workflow.

+
+``` + +::: + +```{=html} +
+
+

Talks

+

Placeholder for intro text on list of talks which are available online

+
    +
  • Talk 1 +
  • Talk 2 +
  • Talk 3 +
+
+
+

Inofficial tutorials

+

Placeholder for intro text on list of inofficial tutorials

+ +
+
+``` \ No newline at end of file diff --git a/resources/content/inofficial_tutorials.qmd b/resources/content/inofficial_tutorials.qmd deleted file mode 100644 index 2b2e64772..000000000 --- a/resources/content/inofficial_tutorials.qmd +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Inofficial tutorials ---- - -TODO: Add a list of inofficial tutorials. diff --git a/resources/content/talks.qmd b/resources/content/talks.qmd deleted file mode 100644 index 7ebb45317..000000000 --- a/resources/content/talks.qmd +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Talks ---- - -TODO: Add a list of inofficial talks. From b4f8801588a550e1b72541bc5ac765770aa0ca7b Mon Sep 17 00:00:00 2001 From: Simon Steiger <106233551+simonsteiger@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:35:57 +0100 Subject: [PATCH 18/19] Apply suggestions from code review Co-authored-by: Penelope Yong --- _quarto.yml | 2 +- index.qmd | 23 +++++++++++------------ 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/_quarto.yml b/_quarto.yml index f8bfaa2c8..092651210 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -39,7 +39,7 @@ website: page-footer: #background: "#073c44" left: | - Turing is created by Hong Ge, and maintained by the core team of volunteers.
+ Turing is created by Hong Ge, and maintained by the core team of developers.
© 2024 under the terms of the MIT License. back-to-top-navigation: true diff --git a/index.qmd b/index.qmd index 767f1fc54..c048b1c9d 100644 --- a/index.qmd +++ b/index.qmd @@ -62,9 +62,9 @@ description: |
- Intuitive + Expressive
- Turing models are easy to write and communicate — syntax is close to mathematical notations. + Turing models are easy to write and communicate — their syntax closely resembles mathematical notation.
@@ -74,9 +74,9 @@ description: |
- Modular & composable + Composable
- Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. + Turing is written entirely in Julia, and is interoperable with its powerful ecosystem.
``` @@ -98,7 +98,6 @@ description: | # Bernoulli distributions with success rate `p` y ~ filldist(Bernoulli(p), N) - return y end; ```
@@ -146,7 +145,7 @@ end Ecosystem

- Learn about all the packages that are part of The Turing Organization. + Learn about all the packages that are part of the TuringLang organization.

@@ -154,7 +153,7 @@ end Documentation

- Familiarize yourself with the Turing.jl API. + Familiarize yourself with the mechanics of Turing.jl.

@@ -162,7 +161,7 @@ end Official tutorials

- Learn to tackle specific problems with Turing.jl. + Learn to tackle specific modelling problems with Turing.jl.

@@ -211,12 +210,12 @@ Placeholder text introducing the Bayesian Workflow diagram from the ACM special
-

Inofficial tutorials

-

Placeholder for intro text on list of inofficial tutorials

+

Other resources

+

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 get in touch!

From f4b5888441750315a52f31eb6c9e6cde5cc57cca Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Sun, 15 Dec 2024 07:27:53 +0100 Subject: [PATCH 19/19] fix "logo" display by removing h1 --- index.qmd | 10 ++++++---- theming/light.scss | 2 ++ theming/rules/_svg.scss | 13 +++---------- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/index.qmd b/index.qmd index c048b1c9d..40a7a5b17 100644 --- a/index.qmd +++ b/index.qmd @@ -1,5 +1,4 @@ --- -# pagetitle: "Turing" toc: false page-layout: full section-divs: false @@ -23,10 +22,10 @@ description: | ```{=html}
-
-

Turing.jl

+
+
Turing.jl
-
+
@@ -37,6 +36,9 @@ description: |
+``` + +```{=html} Bayesian inference with probabilistic programming diff --git a/theming/light.scss b/theming/light.scss index c256a390d..cfd79cec9 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -16,3 +16,5 @@ @import "rules/svg"; // svg on landing page @import "old/old-styles"; // copy of old css style sheet + +// \ No newline at end of file diff --git a/theming/rules/_svg.scss b/theming/rules/_svg.scss index d29d9356c..715ed178e 100644 --- a/theming/rules/_svg.scss +++ b/theming/rules/_svg.scss @@ -40,7 +40,7 @@ svg { animation-delay: 1s; } -.upperContent { +.upper-content { width: 88%; text-align: end; padding-top: 7%; @@ -59,7 +59,7 @@ svg { } } -.upperContent > h1 { +.upper-content > h1 { font-size: 5rem; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; @@ -68,19 +68,12 @@ svg { } } -.upperContent > p { +.upper-content > p { font-size: 25px; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; margin-top: 5%; } -.upperContent > h1, - -.upperContent > p { - margin: 0; - padding: 0; -} - @keyframes fadeInText { to { opacity: 1;