diff --git a/_includes/brands.qmd b/_includes/brands.qmd new file mode 100644 index 000000000..4a9734517 --- /dev/null +++ b/_includes/brands.qmd @@ -0,0 +1,73 @@ +```{=html} +
+ + +
+

Supported by world-class institutions

+

+ Turing.jl is currently being developed at leading research organisations. +

+
+ +
+ + + + + +
+
+``` \ No newline at end of file diff --git a/_includes/citation/cite.qmd b/_includes/citation/cite.qmd new file mode 100644 index 000000000..911d8c637 --- /dev/null +++ b/_includes/citation/cite.qmd @@ -0,0 +1,120 @@ +```{=html} +
+

Turing.jl is an MIT Licensed Open Source Project

+

If you use Turing.jl in your research, please consider citing our papers.

+ + +
+ + +``` \ No newline at end of file diff --git a/_includes/header.qmd b/_includes/header.qmd new file mode 100644 index 000000000..ef8f921a0 --- /dev/null +++ b/_includes/header.qmd @@ -0,0 +1,41 @@ +```{=html} +
+
+
Turing.jl
+
+
+ + + + + +
+
+``` + +```{=html} + + Bayesian inference with probabilistic programming + +
+ + Tutorials + +
+
+
+ + Slack + + + Discourse + + + GitHub + +
+
+``` 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..045ca7343 100644 --- a/index.qmd +++ b/index.qmd @@ -1,5 +1,4 @@ --- -# pagetitle: "Turing" toc: false page-layout: custom section-divs: false @@ -8,48 +7,84 @@ 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} - -# Turing.jl: Bayesian inference with probabilistic programming. +::: {.logo-header} -### Intuitive -Turing models are easy to write and communicate — syntax is close to mathematical notations. +{{< include _includes/header.qmd >}} -### 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. +:::::: {.side-space} +::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-4 .section-end-space} -::: {.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"} +::: {.panel .box} +##### Expressive {.panel-title .pb-1} +Turing models are easy to write and communicate, with syntax that is close to the mathematical specification of the model. ::: -::: {.g-col-3} -::: -::: +::: {.panel .box} +##### General-purpose {.panel-title .pb-1} +Turing supports models with discrete parameters and stochastic control flow. ::: +::: {.panel .box} +##### Composable {.panel-title .pb-1} +Turing is written entirely in Julia, and is interoperable with its powerful ecosystem. ::: -::: {style="position: relative; display: flex; justify-content: center;"} -::: {.grid} -::: {.g-col-1} -::: -::: {.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). +```{=html} +
+

Start Your Journey

+

Whether you're new to Bayesian modeling or an experienced researcher, find the resources you need.

+
-::: -::: {.g-col-3} -::: -::: -::: +
+ +
+
🚀
+
New to Turing?
+

Begin with the basics. Our step-by-step tutorials will guide you from installation to your first probabilistic models.

+
+ Get Started + View Introductory Concepts +
+
+ +
+
🔬
+
For Researchers
+

Dive into advanced models, explore the rich package ecosystem, and learn how to cite Turing.jl in your work.

+
+ Explore Ecosystem + Cite Turing.jl +
+
+ +
+
💻
+
For Developers
+

Join our community, contribute to the project on GitHub, and connect with fellow developers on Slack.

+
+ View on GitHub + Join the Slack Channel +
+
+ +
+``` + +
+ +{{< include _includes/brands.qmd >}} + +
+ +
+ +{{< include _includes/citation/cite.qmd >}} + +
+ +:::::: 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/news/news.css b/news/news.css index 07eb7337f..dfea67fca 100644 --- a/news/news.css +++ b/news/news.css @@ -10,6 +10,10 @@ max-height:fit-content; } +.quarto-title-banner { + background-color: #ffffff; +} + /* @media (max-width: 768px) { .quarto-post { max-height: 200px; 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..75ff20add 100644 --- a/theming/styles.css +++ b/theming/styles.css @@ -1,45 +1,349 @@ -/* css styles */ -/* .cell-output { - background-color: #f1f3f5; -} */ - -/* .cell-output img { - max-width: 100%; - height: auto; -} */ +.quarto-container { + background-color: #f8f9fa; +} -/* .cell-output-display pre { - word-break: break-wor !important; - white-space: pre-wrap !important; +.navbar { + background-color: #ffffff; } - */ .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: 3%; + 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: 1.5rem; + padding-right: 0%; + text-align: center; + } +} + +.logo-header { + padding: 0%; + margin-bottom: 0%; + /* background-color: #eef7f7; */ +} + +.content-panel { + padding: 1.5rem; +} + +.section-end-space { + padding-bottom: 2rem; +} + +.section-start-space { + padding-top: 2rem; +} + +.responsive-heading { + font-size: clamp(2rem, 6vw, 6rem); +} + +.panel-wrapper { + justify-content: center; +} + +.example-code { + flex: 0 1 45%; +} + +.example-text { + flex: 0 1 53%; +} + +@media screen and (max-width: 992px) { + .panel-wrapper { justify-content: center; + } +} + +@media screen and (max-width: 768px) { + .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; +} + +/* === Universal Box Styling === */ +.box { + border-radius: 12px; + padding: 2rem; + transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); + background-color: #ffffff; +} + +.box:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); +} + +.box--splash { + background-color: #eef7f7; /* Keeping this for use in future */ +} + +.panel { + min-height: 150px; + min-width: 300px; + max-width: 31%; +} + +.panel:hover { + transform: none; + box-shadow: none; +} + +.panel-title { + font-size: 1.4rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.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-title { + color: #212529; +} + +.panel, +.panel p { + color: #6c757d; + font-size: 17px; + font-weight: 400; +} + +.card { + border: 1px solid #e9ecef; + color: #212529; +} + +.card: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; +} + +/* Citation Styles */ +.citation-container { + margin: auto; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} +.citation-list { + list-style: none; + padding: 0; + margin: 0; +} +.citation-entry { + margin-bottom: 1.5rem; +} + +.citation-text { + font-size: 1rem; + line-height: 1.7; + color: #555; + margin: 0; +} +.citation-text em { + font-style: italic; +} +.citation-title { + font-weight: 600; + color: #222; +} +.citation-actions { + margin-top: 1.25rem; + display: flex; + gap: 0.75rem; + align-items: center; +} +.citation-bibtex-data { + display: none; +} +.button--primary { + color: #34b8bf; + border-color: #34b8bf; + background-color: #fff; +} +.button--primary:hover { + background-color: #34b8bf; + color: #fff; +} +.button.citation-copied { + background-color: #229954; + border-color: #229954; + color: #fff; + transform: translateY(0); + box-shadow: none; +} +.turing-license-link code { + color: #34b8bf !important; + text-decoration: none !important; +} +.turing-license-link code:hover { + color: #31dce6 !important; +} + +.side-space { + padding-left: 4rem; + padding-right: 4rem; +} \ No newline at end of file diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss index 9c4361b91..a9f4e3ad0 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,46 +51,36 @@ $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; -} +/*-- scss:rules --*/ -li { - color: $li !important; +// --- Global Styles --- +.quarto-container { + background-color: $background-body !important; } -.menu-text:hover { - color: $links-hover !important; +.navbar { + background-color: $navbar-bg !important; } -.quarto-title-banner { - background-color: $foreground-dark !important; +p { + color: $text-muted !important; } -.title { - color: $white !important; +li { + color: $li-color !important; } -.listing-description a { - color: $li !important; -} +a { + color: $links; -p { - color: $li !important; + &:hover { + color: $links-hover !important; + } } - .team-member, .input-group-text { - background-color: $background-nav !important; + background-color: $background-nav !important; } .level4, .listing-category { @@ -141,7 +100,7 @@ p { // table background & text .packages-table { background-color: $background-body !important; - color: $li !important; + color: $li-color !important; } // cell borders @@ -157,7 +116,7 @@ p { // zebra stripes .packages-table tbody tr:nth-child(odd) { - background-color: darken($gray-900, 5%) !important; + background-color: darken($background-nav, 5%) !important; } // hover state @@ -169,4 +128,97 @@ p { .badge.deprecated { color: $white !important; background-color: $red !important; +} + +// Universal Box Styling for Dark Mode +.box { + background-color: $panel-bg !important; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important; + + &:hover { + background-color: lighten($panel-bg, 3%) !important; + } +} + +.box--splash { + background-color: lighten($panel-bg, 2%) !important; // Keeping this for use in future +} + +// 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; + } +} + +.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; + } +} + +// Landing Page Panels +.panel { + color: $text-muted !important; + + .panel-title { + color: $body-color !important; + } +} + +// Misc Quarto and site-specific rules +.quarto-title-banner { + background-color: $background-nav !important; +} + +.title { + color: $white !important; +} + +code { + background-color: $code-block-bg !important; + color: $li-color !important; +} + +// Dark mode styles for the citation section +.citation-entry { + border-color: $btn-border-color !important; +} + +.citation-text { + color: $text-muted !important; +} + +.citation-title { + color: $body-color !important; +} + +.button--primary { + background-color: transparent !important; + color: $links !important; + border-color: $links !important; + + &:hover { + background-color: $links !important; + color: $panel-bg !important; + } +} + +// Brands Logo Switch +.brands-light-mode-logo { + display: none !important; +} + +.brands-dark-mode-logo { + display: inline !important; } \ No newline at end of file