diff --git a/_includes/header.qmd b/_includes/header.qmd
new file mode 100644
index 000000000..70e87d5b2
--- /dev/null
+++ b/_includes/header.qmd
@@ -0,0 +1,39 @@
+```{=html}
+
+```
+
+```{=html}
+
+ Bayesian inference with probabilistic programming
+
+
+```
\ No newline at end of file
diff --git a/_includes/news.qmd b/_includes/news.qmd
new file mode 100644
index 000000000..6a556ecc9
--- /dev/null
+++ b/_includes/news.qmd
@@ -0,0 +1,256 @@
+---
+listing:
+- id: news
+ contents:
+ - "news/posts/*/index.qmd"
+ max-items: 10
+ sort: date desc
+ type: grid
+ grid-columns: 3
+ categories: false
+ sort-ui: false
+ filter-ui: false
+ fields: [title, description, date, reading-time, author]
+ image-height: "200"
+---
+
+### News
+
+::: {#news}
+
+:::
+
+[See all news →](news/)
+
+
+```{=html}
+
+
+
+```
\ No newline at end of file
diff --git a/_quarto.yml b/_quarto.yml
index 16db4adaa..681a3acfa 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -1,7 +1,7 @@
project:
type: website
preview:
- # Change port if it's busy in your system or just remove this line so that It will automatically use any free port
+ # Change port if it's busy in your system or just comment below line so that It will automatically use any free port
port: 4200
browser: true
@@ -16,9 +16,7 @@ website:
type: overlay
navbar:
logo: "assets/images/turing-logo.svg"
- logo-href: https://turinglang.org/
- background: "#073c44"
- foreground: "#ffffff"
+ # logo-href: https://turinglang.org/ -- Keep this commented so clicking on logo in dev mode doesn't redirect to the site
left:
- text: Get Started
href: https://turinglang.org/docs/getting-started/
@@ -39,18 +37,10 @@ website:
href: https://github.com/TuringLang
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 © 2018–2025 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.
+ © 2025 under the terms of the MIT License.
back-to-top-navigation: true
repo-url: https://github.com/TuringLang/turinglang.github.io/
@@ -64,6 +54,7 @@ format:
light: cosmo
dark: [cosmo, theming/theme-dark.scss]
css: theming/styles.css
+ highlight-style: github
toc: true
smooth-scroll: true
code-overflow: wrap
diff --git a/index.qmd b/index.qmd
index d2bf8a679..9e183742d 100644
--- a/index.qmd
+++ b/index.qmd
@@ -1,55 +1,171 @@
---
-# pagetitle: "Turing"
toc: false
-page-layout: custom
+page-layout: full
section-divs: false
hide-description: true
description: |
Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language.
---
-::: {.hero-banner}
-::: {.grid}
-::: {.g-col-1}
+{{< include _includes/header.qmd >}}
+
+::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-4 .section-end-space}
+
+::: {.panel}
+##### Expressive {.panel-title .pb-1}
+Turing models are easy to write and communicate — their syntax closely resembles mathematical notation.
:::
-::: {.g-col-8}
-# Turing.jl: Bayesian inference with probabilistic programming.
+::: {.panel}
+##### General-purpose {.panel-title .pb-1}
+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.
+::: {.panel}
+##### Composable {.panel-title .pb-1}
+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.
+:::::
-### Modular and composable
-Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem.
+::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-3 .pb-2}
-::: {.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"}
-:::
+::: {.example-text style="text-align:right;padding:0.5rem;"}
-::: {.g-col-3}
-:::
-:::
-:::
+Hello, World in Turing
+
+Some text about how easy it is to [get going](https://turinglang.org/docs/tutorials/00-introduction/).
:::
-::: {style="position: relative; display: flex; justify-content: center;"}
-::: {.grid}
-::: {.g-col-1}
+::: {.example-code}
+```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)
+
+end;
+```
:::
-::: {.g-col-8}
-## Community Resources
-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).
+:::::
+
+::::: {.d-flex .flex-row-reverse .flex-wrap .panel-wrapper .gap-3 .pt-2 .section-end-space}
+
+::: {.example-text style="padding:0.5rem;"}
+
+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.
:::
-::: {.g-col-3}
+
+::: {.example-code}
+```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
+```
:::
+
+:::::
+
+{{< include _includes/news.qmd >}}
+
+```{=html}
+
+ Learn more
+
+
+```
+
+::: {.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
+
+
+
+
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/news/index.qmd b/news/index.qmd
index 3b1d47dc4..5bce7790a 100644
--- a/news/index.qmd
+++ b/news/index.qmd
@@ -10,7 +10,7 @@ listing:
categories: true
feed: true
page-layout: full
-title-block-banner: "#EDF3F9"
+title-block-banner: true
title-block-banner-color: "black"
search: false
---
\ 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/styles.css b/theming/styles.css
index 446151cda..3d7966d14 100644
--- a/theming/styles.css
+++ b/theming/styles.css
@@ -1,45 +1,290 @@
-/* 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;
-}
- */
-
.navbar a:hover {
- text-decoration: none;
+ text-decoration: none;
}
.cell-output {
- border: 1px dashed;
+ border: 1px dashed;
}
.cell-output-stdout code {
- word-break: break-wor !important;
- white-space: pre-wrap !important;
+ word-break: break-word !important;
+ white-space: pre-wrap !important;
}
-
.cell-output-display svg {
- height: fit-content;
- width: fit-content;
+ height: fit-content;
+ width: fit-content;
}
.cell-output-display img {
- max-width: 100%;
- max-height: 100%;
- object-fit: contain;
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
}
.nav-footer-center {
- display: flex;
+ display: flex;
+ justify-content: center;
+}
+
+.line-graph {
+ 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;
+}
+
+@keyframes fadeInText {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.upper-content>h1 {
+ font-size: 5rem;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+
+.upper-content>p {
+ font-size: 25px;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+ margin-top: 5%;
+}
+
+@media screen and (max-width: 992px) {
+ .upper-content>h1 {
+ font-size: 3.5rem;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .upper-content {
+ width: 100%;
+ padding-top: 0%;
+ padding-right: 0%;
+ text-align: center;
+ }
+}
+
+.content-panel {
+ padding: 1.5rem;
+}
+
+.section-end-space {
+ padding-bottom: 6rem;
+}
+
+.section-start-space {
+ padding-top: 6rem;
+}
+
+.responsive-heading {
+ font-size: clamp(2rem, 6vw, 6rem);
+}
+
+.panel-wrapper {
+ justify-content: space-between;
+}
+
+.example-code {
+ flex: 0 1 45%;
+}
+
+.example-text {
+ flex: 0 1 53%;
+}
+
+@media screen and (max-width: 992px) {
+ .panel-wrapper {
justify-content: center;
+ }
+
+ .example-code,
+ .example-text {
+ flex: 0 1 100%;
+ }
+}
+
+a {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+.button,
+.button--fill {
+ display: inline-block;
+ padding: 10px 24px;
+ border-radius: 50px;
+ font-weight: 600;
+ text-align: center;
+ cursor: pointer;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ text-decoration: none;
+ border-style: solid;
+ border-width: 2px;
+}
+
+.button:hover,
+.button--fill:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ text-decoration: none;
+}
+
+.panel {
+ border-radius: 12px;
+ padding: 2rem;
+ min-height: 150px;
+ min-width: 300px;
+ max-width: 31%;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ border-top: 4px solid;
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
+}
+
+.panel:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+}
+
+.panel-title {
+ font-size: 1.4rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+}
+
+.panel--nopad {
+ padding: 0rem;
+}
+
+.card,
+.pseudolisting {
+ border-radius: 0.5rem;
+ padding: 1rem;
+ transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.card .card-title,
+.pseudolisting .h5 {
+ font-weight: 700;
+}
+
+.pseudolisting {
+ display: block;
+ text-decoration: none;
}
+
+.pseudolisting:hover {
+ text-decoration: none;
+}
+
+.button {
+ background-color: #ffffff;
+ border-color: #e9ecef;
+ color: #495057;
+}
+
+.button--fill {
+ background-color: #4DB6AC;
+ border-color: transparent;
+ color: #ffffff;
+}
+
+.button--fill:hover {
+ background-color: #26A69A;
+}
+
+.panel {
+ background-color: #ffffff;
+ border-top-color: #4DB6AC;
+}
+
+.panel-title {
+ color: #212529;
+}
+
+.panel,
+.panel p {
+ color: #6c757d;
+ font-size: 17px;
+ font-weight: 400;
+}
+
+.card,
+.pseudolisting,
+#carousel-container .quarto-grid-item.card.news-item {
+ background-color: #f8f9fa;
+ border: 1px solid #e9ecef;
+ color: #212529;
+}
+
+.card:hover,
+.pseudolisting:hover,
+#carousel-container .quarto-grid-item.card.news-item:hover {
+ background-color: #e9ecef;
+ border-color: #dee2e6;
+}
+
+.card .card-title {
+ color: #212529;
+}
+
+.card .card-text {
+ color: #6c757d;
+}
+
+.sourceCode,
+code {
+ color: #212529;
+ border-radius: 0.5rem;
+}
\ No newline at end of file
diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss
index 9c4361b91..62d60cbf1 100644
--- a/theming/theme-dark.scss
+++ b/theming/theme-dark.scss
@@ -4,76 +4,45 @@
$theme: "cosmo" !default;
-// Manually-added colors
+// --- Consolidated Variables ---
-$background-nav: #192222;
-$background-body: #131818;
-$foreground: #1bb3ac;
-$foreground-dark: #073c44;
-$links:#2aa198;
+// Base colors for the entire site
+$background-nav: #22272e;
+$background-body: #1c2128; // Using the darker background from new theme
+$foreground: #ffffff;
+$links: #34b8bf;
$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
+// Text colors
+$text-muted: #bcbcbc;
+$li-color: #bcbcbc;
+
+// Landing Page specific colors
+$lp-cyan: #39d3d7;
+$lp-teal: #4DB6AC;
+
+// Component & Code block colors
+$code-block-bg: #22272e;
+$panel-bg: #22272e;
+$btn-border-color: #444c56;
+
+// Bootstrap color overrides
+$white: #ffffff !default;
+$gray-800: #22272e;
+$gray-900: #1c2128;
+$red: #ff0039 !default;
+$green: #3fb618 !default;
+
+$primary: $links-hover !default;
+$secondary: $gray-800 !default;
+$success: $green !default;
+$danger: $red !default;
+
+// Global settings
+$min-contrast-ratio: 2.6 !default;
$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
+$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;
$navbar-bg: $background-nav;
$navbar-fg: $foreground;
@@ -82,66 +51,92 @@ $footer-fg: $foreground;
$body-color: $white;
$body-bg: $background-body;
-a {
- color: $links !important;
-}
-a:hover {
- color: $links-hover !important;
-}
+/*-- scss:rules --*/
-code, p code, li code {
- background-color: $code-background-color !important;
- color: $links;
+// --- Global Styles ---
+p {
+ color: $text-muted !important;
}
li {
- color: $li !important;
+ color: $li-color !important;
}
-.menu-text:hover {
- color: $links-hover !important;
-}
+a {
+ color: $links;
-.quarto-title-banner {
- background-color: $foreground-dark !important;
+ &:hover {
+ color: $links-hover !important;
+ }
}
-.title {
- color: $white !important;
+// Landing Page Buttons
+.button {
+ background-color: transparent !important;
+ border-color: $btn-border-color !important;
+ color: $body-color !important;
+
+ &:hover {
+ background-color: lighten($gray-800, 5%) !important;
+ border-color: $lp-cyan !important;
+ }
}
-.listing-description a {
- color: $li !important;
+.button--fill {
+ background-color: $lp-teal !important;
+ border-color: transparent !important;
+ color: #ffffff !important;
+
+ &:hover {
+ background-color: darken($lp-teal, 5%) !important;
+ box-shadow: 0 4px 15px rgba($lp-teal, 0.2) !important;
+ }
}
-p {
- color: $li !important;
+// Landing Page Panels
+.panel {
+ background-color: $panel-bg !important;
+ border-top-color: $lp-teal !important;
+ border-left: 1px solid $btn-border-color !important;
+ border-right: 1px solid $btn-border-color !important;
+ border-bottom: 1px solid $btn-border-color !important;
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
+ color: $text-muted !important;
+
+ .panel-title {
+ color: $body-color !important;
+ }
}
+// Misc Quarto and site-specific rules
+.quarto-title-banner {
+ background-color: $background-nav !important;
+}
-.team-member, .input-group-text {
- background-color: $background-nav !important;
+.title {
+ color: $white !important;
}
-.level4, .listing-category {
- color: $foreground !important;
+.team-member,
+.input-group-text {
+ background-color: $background-nav !important;
}
-::selection {
- color: $links-hover;
- background: $background-nav;
+.level4,
+.listing-category {
+ color: $foreground !important;
}
-.tooltip {
- --bs-tooltip-color: $black !important;
- --bs-tooltip-bg: $white !important;
+.badge.deprecated {
+ color: $white !important;
+ background-color: $red !important;
}
// table background & text
.packages-table {
- background-color: $background-body !important;
- color: $li !important;
+ color: $text-muted !important;
+ background-color: $background-nav !important;
}
// cell borders
@@ -152,7 +147,7 @@ p {
// header row
.packages-table thead {
- background-color: $gray-900 !important;
+ background-color: $background-nav !important;
}
// zebra stripes
@@ -169,4 +164,60 @@ p {
.badge.deprecated {
color: $white !important;
background-color: $red !important;
-}
\ No newline at end of file
+}
+
+code {
+ background-color: $code-block-bg !important;
+ color: $li-color !important;
+}
+
+.card {
+ background-color: #f8f9fa !important;
+}
+
+// --- Mixins ---
+@mixin raw-card {
+ border-radius: $border-radius-sm;
+ padding: 1rem;
+ --bs-card-spacer-x: 0rem !important;
+ --bs-card-spacer-y: 0rem !important;
+ color: $body-color !important;
+ background-color: $code-block-bg !important;
+ border: solid $code-block-bg 1px !important;
+ transition: background-color 0.3s ease, border-color 0.3s ease !important;
+}
+
+@mixin card($hover-border) {
+ @include raw-card;
+
+ .card-title {
+ color: $body-color !important;
+ font-weight: 700;
+ }
+
+ &:hover {
+ background-color: lighten($code-block-bg, 5%) !important;
+ border-color: $hover-border !important;
+ }
+}
+
+// Card and Pseudolisting styles
+.card {
+ @include card($lp-cyan);
+
+ .card-text {
+ color: $text-muted;
+ }
+}
+
+.pseudolisting {
+ @extend .card;
+
+ &:hover {
+ text-decoration: none;
+ }
+}
+
+.aa-DetachedOverlay li.aa-Item[aria-selected=true] .search-item * {
+ color: white !important;
+}