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 1/7] 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 2/7] 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 + +
+ + Tutorials + + + Ecosystem + + + View on GitHub + +
- -
-
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 4/7] 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 5/7] 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 +
+
+ +
+ Discourse +
+
+ Get support from and discuss with other users. +
+ + +
+ Documentation +
+
+ Familiarize yourself with the Turing.jl API. +
+ + +
+ Official tutorials +
+
+ 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. +
+ +
+``` 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 fcaa587b8ea7054ee5ee2c3d23a108e6a70a0985 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 28 Oct 2024 18:03:14 +0100 Subject: [PATCH 6/7] improve colors --- index.qmd | 38 ++++---- theming/dark.scss | 4 +- theming/light.scss | 3 +- 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 | 4 - theming/rules/_navbar.scss | 9 ++ theming/rules/_panels.scss | 31 ------ theming/rules/_quarto-tweaks.scss | 27 ++++++ theming/theme-dark.scss | 139 --------------------------- theming/variables/_colorsdark.scss | 14 ++- theming/variables/_colorslight.scss | 10 +- 14 files changed, 115 insertions(+), 220 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 -

+
Discourse
-
+

Get support from and discuss with other users. -

+

Documentation
-
+

Familiarize yourself with the Turing.jl API. -

+

Official tutorials
-
+

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. -

+

``` 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..811650b4d 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -11,9 +11,8 @@ @import "rules/layouts"; @import "rules/hoverables-light"; -@import "rules/panels"; @import "rules/navbar"; -@import "rules/codeblocks"; +@import "rules/quarto-tweaks"; @import "old/old-styles"; 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..926f846a5 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; diff --git a/theming/rules/_navbar.scss b/theming/rules/_navbar.scss index b27ec8ad3..ee426264e 100644 --- a/theming/rules/_navbar.scss +++ b/theming/rules/_navbar.scss @@ -5,4 +5,13 @@ a:hover { text-decoration: none; } + + .nav-link:hover { + color: $links-hover !important; + } + + .navbar-brand:hover { + color: $links-hover !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..9fa480768 --- /dev/null +++ b/theming/rules/_quarto-tweaks.scss @@ -0,0 +1,27 @@ +.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; +} 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..57cbac6e7 100644 --- a/theming/variables/_colorsdark.scss +++ b/theming/variables/_colorsdark.scss @@ -1,6 +1,6 @@ $dark-green: #073c44; $light-blue: darken(#EDF4F4, 5%); -$medium-grey: #CCD1D5; +$medium-grey: #bcbcbc; $color-primary: $light-blue; // not sure about this one $color-secondary: $dark-green; @@ -10,8 +10,16 @@ $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: lighten($color-active, 30%); +$links-hover: lighten($color-active, 30%); +$border-hover: $color-active; + +p { + color: $text-muted !important; +} diff --git a/theming/variables/_colorslight.scss b/theming/variables/_colorslight.scss index 087c9959e..e527e0931 100644 --- a/theming/variables/_colorslight.scss +++ b/theming/variables/_colorslight.scss @@ -1,4 +1,6 @@ $dark-green: #073c44; + +$julia-green: #208921; $light-blue: #EDF4F4; $medium-grey: #CCD1D5; $color-fg: black; @@ -9,7 +11,11 @@ $color-highlight: lighten($color-secondary, 10%); $color-mute-bg: $gray-200; -$light-bg: white; +$color-active: lighten($color-secondary, 5%); +$link-color: $color-primary; +$links-hover: $color-primary; +$border-hover: $color-highlight; + +$body-bg: white; $light-bg-offset: $color-secondary; -$link-color: lighten($dark-green, 15%); From 73db952cd42b2ac1daccddf399041f3967098ae0 Mon Sep 17 00:00:00 2001 From: simonsteiger Date: Mon, 28 Oct 2024 18:27:24 +0100 Subject: [PATCH 7/7] better link hover color --- theming/light.scss | 1 + theming/rules/_mixins.scss | 1 + theming/rules/_navbar.scss | 6 +++--- theming/rules/_quarto-tweaks.scss | 9 +++++++++ theming/variables/_colorsdark.scss | 5 +++-- theming/variables/_colorslight.scss | 9 ++++----- 6 files changed, 21 insertions(+), 10 deletions(-) diff --git a/theming/light.scss b/theming/light.scss index 811650b4d..434c7a626 100644 --- a/theming/light.scss +++ b/theming/light.scss @@ -16,3 +16,4 @@ @import "old/old-styles"; +// \ No newline at end of file diff --git a/theming/rules/_mixins.scss b/theming/rules/_mixins.scss index 926f846a5..9eb8c54e1 100644 --- a/theming/rules/_mixins.scss +++ b/theming/rules/_mixins.scss @@ -36,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 ee426264e..f16f5f40f 100644 --- a/theming/rules/_navbar.scss +++ b/theming/rules/_navbar.scss @@ -3,15 +3,15 @@ color: $text-muted; a:hover { - text-decoration: none; + text-decoration: none !important; } .nav-link:hover { - color: $links-hover !important; + color: $link-color !important; } .navbar-brand:hover { - color: $links-hover !important; + color: $link-color !important; transition: color 0.15s ease-in-out !important; } } diff --git a/theming/rules/_quarto-tweaks.scss b/theming/rules/_quarto-tweaks.scss index 9fa480768..f95be0518 100644 --- a/theming/rules/_quarto-tweaks.scss +++ b/theming/rules/_quarto-tweaks.scss @@ -25,3 +25,12 @@ .input-group-text { background-color: $color-mute-bg !important; } + +a { + text-decoration: none; + &:hover { + color: $link-color; + text-decoration: underline; + } + +} diff --git a/theming/variables/_colorsdark.scss b/theming/variables/_colorsdark.scss index 57cbac6e7..44fc3d24b 100644 --- a/theming/variables/_colorsdark.scss +++ b/theming/variables/_colorsdark.scss @@ -1,9 +1,11 @@ $dark-green: #073c44; $light-blue: darken(#EDF4F4, 5%); +$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; @@ -16,8 +18,7 @@ $color-fg: white; $text-muted: $medium-grey; $color-active: lighten($color-secondary, 5%); -$link-color: lighten($color-active, 30%); -$links-hover: lighten($color-active, 30%); +$link-color: $color-tertiary; $border-hover: $color-active; p { diff --git a/theming/variables/_colorslight.scss b/theming/variables/_colorslight.scss index e527e0931..102715630 100644 --- a/theming/variables/_colorslight.scss +++ b/theming/variables/_colorslight.scss @@ -1,20 +1,19 @@ $dark-green: #073c44; - -$julia-green: #208921; +$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; $color-active: lighten($color-secondary, 5%); -$link-color: $color-primary; -$links-hover: $color-primary; -$border-hover: $color-highlight; +$link-color: $color-tertiary; +$border-hover: darken($color-secondary, 5%); $body-bg: white; $light-bg-offset: $color-secondary;