diff --git a/_quarto.yml b/_quarto.yml index 66222198d..092651210 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/ @@ -39,18 +37,10 @@ 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. - - 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 of developers.
+ © 2024 under the terms of the MIT License. back-to-top-navigation: true repo-url: https://github.com/TuringLang/turinglang.github.io/ @@ -61,9 +51,9 @@ 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] + highlight-style: github toc: true smooth-scroll: true code-overflow: wrap diff --git a/index.qmd b/index.qmd index d2bf8a679..40a7a5b17 100644 --- a/index.qmd +++ b/index.qmd @@ -1,55 +1,225 @@ --- -# pagetitle: "Turing" toc: false -page-layout: custom +page-layout: full section-divs: false hide-description: true +listing: +- id: news + contents: + - "news/posts/*/index.qmd" + sort: date desc + type: grid + grid-columns: 3 + categories: false + sort-ui: false + filter-ui: false + fields: [title, description, date] + max-items: 3 + image-height: "200" description: | Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language. --- -::: {.hero-banner} -::: {.grid} -::: {.g-col-1} -::: -::: {.g-col-8} +```{=html} +
+
+
Turing.jl
+
+
+ + + + + +
+
+``` -# Turing.jl: Bayesian inference with probabilistic programming. +```{=html} + + Bayesian inference with probabilistic programming + +
+
+ + Tutorials + + + Slack + + + Discourse + + + GitHub + +
+
+``` -### Intuitive -Turing models are easy to write and communicate — syntax is close to mathematical notations. +```{=html} +
+
+
+ Expressive +
+ Turing models are easy to write and communicate — their syntax closely resembles mathematical notation. +
+
+
+ General-purpose +
+ Turing supports models with discrete parameters and stochastic control flow. +
+
+
+ Composable +
+ Turing is written entirely in Julia, and is interoperable with its powerful ecosystem. +
+
+``` -### General-purpose -Turing supports models with discrete parameters and stochastic control flow. +
+
+
+ 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) -### Modular and composable -Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. + # Heads or tails of a coin are drawn from `N` + # Bernoulli distributions with success rate `p` + y ~ filldist(Bernoulli(p), N) +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. +
+
+```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 +``` +
+
-::: {.hero-buttons style="position: relative; display: flex; justify-content: center;"} -[Get Started]({{< meta get-started >}}){.btn-action-primary .btn-action .btn .btn-lg role="button" style="background-color: #073c44; color: white"} -::: +```{=html} +

+ News +

+``` +::: {#news} -::: {.g-col-3} -::: -::: ::: -::: +[See all news →](news/) -::: {style="position: relative; display: flex; justify-content: center;"} -::: {.grid} -::: {.g-col-1} -::: -::: {.g-col-8} -## Community Resources +```{=html} +

+ Learn more +

+
+ +
+ Ecosystem +
+

+ Learn about all the packages that are part of the TuringLang organization. +

+ + +
+ Documentation +
+

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

+ + +
+ Official tutorials +
+

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

+ +
+``` -The Turing.jl [discourse forum](https://discourse.julialang.org/c/domain/probprog) provides support and discussion for all user levels. -The [Turing.jl documentation]({{< meta get-started >}}) and [official tutorials]({{< meta tutorials-intro >}}) help users learn and use Turing.jl! -There's also a [tutorial in Bayesian Statistics using Julia and Turing.jl](https://storopoli.io/Bayesian-Julia). +::: {.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} ::: -::: {.g-col-3} -::: -::: + +::: {.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

+ +
+
+

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!

+ +
+
+``` \ No newline at end of file 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 new file mode 100644 index 000000000..9586f908d --- /dev/null +++ b/theming/dark.scss @@ -0,0 +1,23 @@ +/*-- scss:defaults --*/ +// Cosmo 5.3.3 +// Bootswatch + +$theme: "cosmo" !default; +@import "variables/grays"; +@import "variables/colorsdark"; +@import "variables/borders"; +@import "variables/spacers"; + +/*-- scss:rules --*/ + +@import "rules/mixins"; + +@import "rules/layouts"; // custom spacing and layout elements +@import "rules/hoverables-dark"; // hover styling of buttons, listings +@import "rules/navbar"; +@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 new file mode 100644 index 000000000..cfd79cec9 --- /dev/null +++ b/theming/light.scss @@ -0,0 +1,20 @@ +/*-- scss:defaults --*/ + +@import "variables/grays"; +@import "variables/colorslight"; +@import "variables/borders"; +@import "variables/spacers"; + +/*-- scss:rules --*/ + +@import "rules/mixins"; + +@import "rules/layouts"; // custom spacing and layout elements +@import "rules/hoverables-light"; // hover styling of buttons, listings +@import "rules/navbar"; +@import "rules/quarto-tweaks"; // style modifications of (mostly) quarto classes +@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/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/_hoverables-dark.scss b/theming/rules/_hoverables-dark.scss new file mode 100644 index 000000000..9076ac941 --- /dev/null +++ b/theming/rules/_hoverables-dark.scss @@ -0,0 +1,33 @@ +.button { + @include button($border-hover); +} + +.card { + @include card($border-hover); + + .card-text { + color: $text-muted; + } +} + +.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%; + } +} + +.pseudolisting { + @extend .card; + @extend .quarto-grid-item; + text-decoration: none; +} diff --git a/theming/rules/_hoverables-light.scss b/theming/rules/_hoverables-light.scss new file mode 100644 index 000000000..e77d527e0 --- /dev/null +++ b/theming/rules/_hoverables-light.scss @@ -0,0 +1,32 @@ +.button { + @include button($border-hover) +} + +.card { + @include card($border-hover) +} + +.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%; + } +} + +.pseudolisting { + @extend .card; + @extend .quarto-grid-item; + text-decoration: none; + &:hover { + text-decoration: none; + } +} diff --git a/theming/rules/_layouts.scss b/theming/rules/_layouts.scss new file mode 100644 index 000000000..d973e1130 --- /dev/null +++ b/theming/rules/_layouts.scss @@ -0,0 +1,46 @@ +.content-panel { + padding: 1.5rem; +} + +.section-end-space { + padding-bottom: $large-y-space; +} + +.section-start-space { + padding-top: $large-y-space; +} + +.responsive-heading { + font-size: clamp(2rem, 6vw, 6rem); +} + +.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 new file mode 100644 index 000000000..a1657a9de --- /dev/null +++ b/theming/rules/_mixins.scss @@ -0,0 +1,56 @@ +@mixin raw-card { + border-radius: $border-radius-sm; + padding: 1rem; + + --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 1.25rem; + 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; + text-decoration: none; + } +} + +@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/_navbar.scss b/theming/rules/_navbar.scss new file mode 100644 index 000000000..39de43119 --- /dev/null +++ b/theming/rules/_navbar.scss @@ -0,0 +1,29 @@ +.navbar { + background-color: $body-bg; + color: $text-muted; + + a:hover { + text-decoration: none !important; + } + + .nav-link { + color: $text-muted; + &:hover { + color: $link-color !important; + } + } + + .navbar-brand { + color: $text-muted; + &:hover { + color: $link-color !important; + transition: color 0.15s ease-in-out !important; + } + } +} + +.nav-footer { + a { + text-decoration: underline !important; + } +} diff --git a/theming/rules/_quarto-tweaks.scss b/theming/rules/_quarto-tweaks.scss new file mode 100644 index 000000000..564f0bbee --- /dev/null +++ b/theming/rules/_quarto-tweaks.scss @@ -0,0 +1,40 @@ +.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; + } +} + +code { + background-color: $color-mute-bg !important; + color: $color-fg !important; +} diff --git a/theming/rules/_svg.scss b/theming/rules/_svg.scss new file mode 100644 index 000000000..715ed178e --- /dev/null +++ b/theming/rules/_svg.scss @@ -0,0 +1,82 @@ +.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; +} + +.upper-content { + width: 88%; + text-align: end; + padding-top: 7%; + padding-right: 45%; + position: absolute; + z-index: 5; + opacity: 0; + animation: fadeInText 1s forwards ease-in-out; + animation-delay: 0.5s; + + @media screen and (max-width: 768px) { + width: 100%; + padding-top: 0%; + padding-right: 0%; + text-align: center; + } +} + +.upper-content > 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; + } +} + +.upper-content > p { + font-size: 25px; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + margin-top: 5%; +} + +@keyframes fadeInText { + to { + opacity: 1; + transform: translateY(0); + } +} 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/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/_borders.scss b/theming/variables/_borders.scss new file mode 100644 index 000000000..707edb024 --- /dev/null +++ b/theming/variables/_borders.scss @@ -0,0 +1,5 @@ +$border-radius-lg: 1rem; +$border-radius-sm: 0.5rem; +$border-width-lg: 2px; +$border-width: 1px; +$border-width-sm: 0.5px; diff --git a/theming/variables/_colorsdark.scss b/theming/variables/_colorsdark.scss new file mode 100644 index 000000000..76969cab7 --- /dev/null +++ b/theming/variables/_colorsdark.scss @@ -0,0 +1,25 @@ +$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; + +$body-color: white; +$body-bg: #201F24; +$color-fg: white; + +$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 new file mode 100644 index 000000000..102715630 --- /dev/null +++ b/theming/variables/_colorslight.scss @@ -0,0 +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; + +$color-active: lighten($color-secondary, 5%); +$link-color: $color-tertiary; +$border-hover: darken($color-secondary, 5%); + +$body-bg: white; +$light-bg-offset: $color-secondary; + diff --git a/theming/variables/_grays.scss b/theming/variables/_grays.scss new file mode 100644 index 000000000..4284ed369 --- /dev/null +++ b/theming/variables/_grays.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