diff --git a/.gitignore b/.gitignore index 860f5e90c..a307529d7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,20 @@ - +*.tmp +*.aux +*.log +*.out +*.tex +Testing/ +/*/*/jl_*/ +.vscode +_freeze +_site +.quarto /.quarto/ -_site/ \ No newline at end of file +.venv +venv + +404.html +site_libs +.DS_Store +index_files +digest.txt \ No newline at end of file diff --git a/_includes/card-listing.ejs b/_includes/card-listing.ejs new file mode 100644 index 000000000..6565a97b8 --- /dev/null +++ b/_includes/card-listing.ejs @@ -0,0 +1,52 @@ +```{=html} +
+<% for (const item of items) { %> + +
+
<%- item.title %>
+

<%- item.description %>

+ + <% if (item.category) { %> +
+ <% if (Array.isArray(item.category)) { %> + <% item.category.forEach(function(cat) { %> + <%- cat %> + <% }); %> + <% } else { %> + <%- item.category %> + <% } %> +
+ <% } %> +
+ + <% if (item.author || item.date || item['reading-time']) { %> +
+
+ <% if (item.author) { %> + + <% if (Array.isArray(item.author)) { %> + <%= item.author.map(a => a.name || a).join(', ') %> + <% } else { %> + <%= item.author %> + <% } %> + + <% } %> + <% if (item.date) { %> + + <%= new Date(item.date).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric' + }) %> + + <% } %> +
+ <% if (item['reading-time']) { %> + <%- item['reading-time'] %> + <% } %> +
+ <% } %> + +<% } %> +
+``` \ No newline at end of file diff --git a/_includes/citation/cite.qmd b/_includes/citation/cite.qmd new file mode 100644 index 000000000..cdad06b7c --- /dev/null +++ b/_includes/citation/cite.qmd @@ -0,0 +1,223 @@ + + +```{=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/featured-tutorials.yml b/_includes/featured-tutorials.yml new file mode 100644 index 000000000..b78a8148a --- /dev/null +++ b/_includes/featured-tutorials.yml @@ -0,0 +1,20 @@ +- title: "Get Started with Turing.jl" + href: "https://turinglang.org/docs/getting-started/" + description: "Our step-by-step tutorials will guide you from installation to your first probabilistic models." + category: + - "Basics" + - "Getting Started" + +- title: "Introduction: Coin Flipping" + href: "https://turinglang.org/docs/tutorials/coin-flipping/" + description: "Learn the basic concepts of Bayesian modeling by working through a simple coin-flipping example." + category: + - "Basics" + - "Modeling" + +- title: "Core Functionality" + href: "https://turinglang.org/docs/core-functionality/" + description: "This article provides an overview of the core functionality in Turing.jl, which are likely to be used across a wide range of models." + category: + - "Basics" + - "Features" diff --git a/_includes/header.qmd b/_includes/header.qmd new file mode 100644 index 000000000..2c619c18a --- /dev/null +++ b/_includes/header.qmd @@ -0,0 +1,13 @@ +```{=html} +
+
+ + +

Bayesian inference with probabilistic programming

+
+ Get Started + View on GitHub +
+
+
+``` \ No newline at end of file diff --git a/_quarto.yml b/_quarto.yml index 16db4adaa..867100723 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 @@ -15,10 +15,8 @@ website: location: navbar type: overlay navbar: - logo: "assets/images/turing-logo.svg" - logo-href: https://turinglang.org/ - background: "#073c44" - foreground: "#ffffff" + logo: "assets/logo/turing-logo.svg" + # 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/ @@ -37,33 +35,19 @@ website: - icon: github text: Turing GitHub href: https://github.com/TuringLang - - page-footer: - background: "#073c44" - left: | - Turing is created by Hong Ge, and lovingly maintained by the core team of volunteers.
- The contents of this website are © 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 back-to-top-navigation: true repo-url: https://github.com/TuringLang/turinglang.github.io/ - repo-actions: [edit, issue] + # repo-actions: [edit, issue] repo-link-target: _blank page-navigation: true format: html: theme: - light: cosmo + light: [cosmo, theming/theme-light.scss] dark: [cosmo, theming/theme-dark.scss] - css: theming/styles.css + highlight-style: github toc: true smooth-scroll: true code-overflow: wrap @@ -79,6 +63,52 @@ format: "url" : "https://turinglang.org/", } + include-after-body: + - text: | + # Global Variables to use in any qmd files using: # {{< meta site-url >}} diff --git a/assets/images/brands/Turing_Logo_1000x400px_Black.webp b/assets/images/brands/Turing_Logo_1000x400px_Black.webp new file mode 100644 index 000000000..68d3caa7e Binary files /dev/null and b/assets/images/brands/Turing_Logo_1000x400px_Black.webp differ diff --git a/assets/images/brands/Turing_Logo_1000x400px_White.webp b/assets/images/brands/Turing_Logo_1000x400px_White.webp new file mode 100644 index 000000000..b1f168278 Binary files /dev/null and b/assets/images/brands/Turing_Logo_1000x400px_White.webp differ diff --git a/assets/images/brands/university-cambridge-logo-black-example-640x132.png b/assets/images/brands/university-cambridge-logo-black-example-640x132.png new file mode 100644 index 000000000..b49e59aa9 Binary files /dev/null and b/assets/images/brands/university-cambridge-logo-black-example-640x132.png differ diff --git a/assets/images/brands/university-cambridge-logo-white-example-640x133.png b/assets/images/brands/university-cambridge-logo-white-example-640x133.png new file mode 100644 index 000000000..99a75d96f Binary files /dev/null and b/assets/images/brands/university-cambridge-logo-white-example-640x133.png differ diff --git a/assets/images/team/shravan-goswami.jpeg b/assets/images/team/shravan-goswami.jpeg deleted file mode 100644 index 822215e4c..000000000 Binary files a/assets/images/team/shravan-goswami.jpeg and /dev/null differ diff --git a/assets/images/team/shravan-goswami.jpg b/assets/images/team/shravan-goswami.jpg new file mode 100644 index 000000000..49091c070 Binary files /dev/null and b/assets/images/team/shravan-goswami.jpg differ diff --git a/assets/logo/turing-logo-dark.svg b/assets/logo/turing-logo-dark.svg new file mode 100644 index 000000000..87dab0a03 --- /dev/null +++ b/assets/logo/turing-logo-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/logo/turing-logo-light.svg b/assets/logo/turing-logo-light.svg new file mode 100644 index 000000000..d787e8b11 --- /dev/null +++ b/assets/logo/turing-logo-light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/turing-logo-wide.svg b/assets/logo/turing-logo-wide.svg similarity index 100% rename from assets/images/turing-logo-wide.svg rename to assets/logo/turing-logo-wide.svg diff --git a/assets/images/turing-logo.svg b/assets/logo/turing-logo.svg similarity index 100% rename from assets/images/turing-logo.svg rename to assets/logo/turing-logo.svg diff --git a/assets/logo/turing-text-logo.svg b/assets/logo/turing-text-logo.svg new file mode 100644 index 000000000..d787e8b11 --- /dev/null +++ b/assets/logo/turing-text-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/index.qmd b/index.qmd index d2bf8a679..00c9d11d3 100644 --- a/index.qmd +++ b/index.qmd @@ -1,55 +1,275 @@ --- -# pagetitle: "Turing" +pagetitle: The Turing Language toc: false page-layout: custom section-divs: false hide-description: true description: | Turing.jl is a probabilistic programming language and Bayesian modelling framework for the Julia programming language. +listing: + - id: news-and-updates + contents: "news/posts/*/index.qmd" + template: _includes/card-listing.ejs + sort: "date desc" + max-items: 6 + include: + on_landing: true + - id: featured-tutorials + contents: + - "./_includes/featured-tutorials.yml" + template: _includes/card-listing.ejs + max-items: 6 --- -::: {.hero-banner} -::: {.grid} -::: {.g-col-1} +:::::: {.side-space} + + +::: {.logo-header} + +{{< include _includes/header.qmd >}} + +::: + + + +:::: {.section-start-space} + +### What is Turing.jl? +

Turing.jl is a Julia library for general-purpose probabilistic programming.

+ +:::: + +::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-4 .section-end-space} + +::: {.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. +::: + +::: {.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. +::: + +::::: + + + +:::: {.section-header .section-start-space} + +::: {#start} + +### Start Your Journey +

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

+ +::: + +```{=html} +Research Papers on Turing.jl → +``` + +:::: + +::::: {.d-flex .flex-row .flex-wrap .panel-wrapper .gap-4 .section-end-space} + +:::: {.panel .box} + +::: {style="font-size: 2.5rem; text-align: center;"} +```{=html} +🚀 +``` +::: + +##### New to Turing? {.panel-title .pb-1 .text-center} +

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

+ +::: {.d-flex .flex-column .align-items-center .gap-2 .pt-3} +```{=html} +Get Started +Beginner's Walkthrough +``` +::: + +:::: + +:::: {.panel .box} + +::: {style="font-size: 2.5rem; text-align: center;"} +```{=html} +🔬 +``` +::: + +##### For Researchers {.panel-title .pb-1 .text-center} + +

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

+ +::: {.d-flex .flex-column .align-items-center .gap-2 .pt-3} + +```{=html} +Explore Ecosystem +Cite Turing.jl +``` + +::: + +:::: + +:::: {.panel .box} + +::: {style="font-size: 2.5rem; text-align: center;"} +```{=html} +💻 +``` +::: + +##### For Developers {.panel-title .pb-1 .text-center} + +

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

+ +::: {.d-flex .flex-column .align-items-center .gap-2 .pt-3} + +```{=html} +View on GitHub +Join the Slack Channel +``` ::: -::: {.g-col-8} -# Turing.jl: Bayesian inference with probabilistic programming. +:::: + +::::: -### Intuitive -Turing models are easy to write and communicate — syntax is close to mathematical notations. +::: {.mobile-only-button-container} +```{=html} +Research Papers on Turing.jl → +``` +::: + -### General-purpose -Turing supports models with discrete parameters and stochastic control flow. + +:::: {.section-header .section-start-space} -### Modular and composable -Turing is modular, written entirely in Julia, and is interoperable with the powerful Julia ecosystem. +::: {#core-packages-header-content} +### Core Packages {#core-packages} +

The Turing ecosystem is built on a foundation of powerful, composable packages.

-::: {.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"} ::: -::: {.g-col-3} +```{=html} +Explore Ecosystem → +``` + +:::: + +::::: {.core-packages-grid .section-end-space} + +::: {.package-card .box #core-card} + +##### [DynamicPPL.jl ](https://turinglang.org/DynamicPPL.jl/){.panel-title} + +

A domain-specific language and backend for probabilistic programming languages, used by [Turing.jl.](https://github.com/TuringLang/Turing.jl)

+ ::: + +::: {.package-card .box #core-card} + +##### [JuliaBUGS.jl ](https://turinglang.org/JuliaBUGS.jl/){.panel-title} + +

A modern implementation of the [BUGS](https://en.wikipedia.org/wiki/Bayesian_inference_using_Gibbs_sampling) probabilistic programming language in Julia.

+ ::: + +::: {.package-card .box #core-card} + +##### [TuringGLM.jl ](https://turinglang.org/TuringGLM.jl/){.panel-title} + +

Bayesian Generalized Linear models using [`@formula`](https://turinglang.org/TuringGLM.jl/stable/#@formula) syntax and returns an instantiated [Turing](https://github.com/TuringLang/Turing.jl) model.

+ ::: + +::: {.package-card .box #core-card} + +##### [AdvancedHMC.jl ](https://turinglang.org/AdvancedHMC.jl/){.panel-title} + +

A robust, modular and efficient implementation of advanced HMC algorithms. ([abs](https://proceedings.mlr.press/v118/xu20a.html), [pdf](https://proceedings.mlr.press/v118/xu20a/xu20a.pdf))

+ ::: -::: {style="position: relative; display: flex; justify-content: center;"} -::: {.grid} -::: {.g-col-1} +::::: + +::: {.mobile-only-button-container} +```{=html} +Explore Ecosystem → +``` ::: -::: {.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). + + +:::: {.section-header .section-start-space} + +::: {#news} + +### News & Updates {#news-updates} + +

Read the latest from the Turing team.

+ +::: + +```{=html} +View more → +``` +:::: + +::: {#news-and-updates} +::: + +::: {.mobile-only-button-container} +```{=html} +View more → +``` +::: + + + + +::: {.section-header .section-start-space} + +::: {#tutorials} + +### Featured Tutorials {#featured-tutorials} + +

A selection of tutorials to get you started.

::: -::: {.g-col-3} +```{=html} +View all tutorials → +``` ::: + +::: {#featured-tutorials} ::: + +::: {.mobile-only-button-container} +```{=html} +View all tutorials → +``` ::: + + + +
+ +{{< include _includes/citation/cite.qmd >}} + +
+ + +:::::: diff --git a/library/index.qmd b/library/index.qmd index f6cc00435..c13947309 100644 --- a/library/index.qmd +++ b/library/index.qmd @@ -2,59 +2,6 @@ title: "Turing Libraries" search: false toc: false -include-in-header: - - text: | - - - listing: - id: libraries-main template: table.ejs 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..06d220ed0 100644 --- a/news/news.css +++ b/news/news.css @@ -8,28 +8,4 @@ .quarto-post { max-height:fit-content; -} - -/* @media (max-width: 768px) { - .quarto-post { - max-height: 200px; - } -} - -@media (max-width: 566px) { - .quarto-post { - max-height: 240px; - } -} - -@media (max-width: 512px) and (min-width: 310px) { - .quarto-post { - max-height: 260px; - } -} - -@media (max-width: 310px) { - .quarto-post { - max-height: 300px; - } -} */ \ No newline at end of file +} \ No newline at end of file diff --git a/news/posts/2019-12-14-initial-post/index.qmd b/news/posts/2019-12-14-initial-post/index.qmd index 36b7858c0..2b13f5341 100644 --- a/news/posts/2019-12-14-initial-post/index.qmd +++ b/news/posts/2019-12-14-initial-post/index.qmd @@ -11,6 +11,7 @@ author: affiliation: - name: University of Oregon date: 12/14/2019 +on_landing: true --- All good open source projects should have a blog, and Turing is one such project. Later on, members of the Turing team may be populating this feed with posts on topics like diff --git a/news/posts/2020-05-04-Imperial-Report13-analysis/index.qmd b/news/posts/2020-05-04-Imperial-Report13-analysis/index.qmd index 865c91099..f281a24e6 100644 --- a/news/posts/2020-05-04-Imperial-Report13-analysis/index.qmd +++ b/news/posts/2020-05-04-Imperial-Report13-analysis/index.qmd @@ -45,6 +45,7 @@ include-in-header: - text: | resources: data/* +on_landing: true --- The Turing.jl team is currently exploring possibilities in an attempt to help with the ongoing SARS-CoV-2 crisis. As preparation for this and to get our feet wet, we decided to perform a replication study of the [Imperial Report 13](https://www.imperial.ac.uk/mrc-global-infectious-disease-analysis/covid-19/report-13-europe-npi-impact/), which attempts to estimate the real number of infections and impact of non-pharmaceutical interventions on COVID-19. In the report, the inference was performed using the probabilistic programming language (PPL) Stan. We have explicated their model and inference in Turing.jl, a Julia-based PPL. We believe the results and analysis of our study are relevant for the public, and for other researchers who are actively working on epidemiological models. To that end, our implementation and results are available [here](https://github.com/cambridge-mlg/Covid19). diff --git a/news/posts/2022-02-17-gsoc/index.qmd b/news/posts/2022-02-17-gsoc/index.qmd index 5dcd040f0..0ea20869c 100644 --- a/news/posts/2022-02-17-gsoc/index.qmd +++ b/news/posts/2022-02-17-gsoc/index.qmd @@ -13,6 +13,7 @@ author: - name: the TuringLang team url: /team/ date: 02/17/2022 +on_landing: true --- It is another year of the [Google Summer of Code](https://summerofcode.withgoogle.com/) time, and we have compiled an updated list of exciting Turing projects! diff --git a/news/posts/2025-06-20-newsletter-9/index.qmd b/news/posts/2025-06-20-newsletter-9/index.qmd index 73b491c0e..69b6feae9 100644 --- a/news/posts/2025-06-20-newsletter-9/index.qmd +++ b/news/posts/2025-06-20-newsletter-9/index.qmd @@ -7,6 +7,7 @@ author: - name: The TuringLang team url: /team/ date: 2025-06-20 +on_landing: true --- **Google Summer of Code** diff --git a/news/posts/2025-07-11-newsletter-10/index.qmd b/news/posts/2025-07-11-newsletter-10/index.qmd index bcc290603..4a605f219 100644 --- a/news/posts/2025-07-11-newsletter-10/index.qmd +++ b/news/posts/2025-07-11-newsletter-10/index.qmd @@ -7,6 +7,7 @@ author: - name: The TuringLang team url: /team/ date: 2025-07-11 +on_landing: true --- **LKJCholesky** 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/team/team.ejs b/team/team.ejs index 65e852daf..46a0dabc3 100644 --- a/team/team.ejs +++ b/team/team.ejs @@ -64,12 +64,8 @@
<% } %> <% if (member.gsoc_report) { %> - Contributions & Report - -
+ Contributions & Report +
<% } %> ``` diff --git a/team/team.yml b/team/team.yml index df54459a1..b05850161 100644 --- a/team/team.yml +++ b/team/team.yml @@ -208,7 +208,7 @@ - mail: markus@mhauru.org - name: Shravan Goswami - image: shravan-goswami.jpeg + image: shravan-goswami.jpg university: Uka Tarsadia University links: - website: https://shravangoswami.com/ diff --git a/theming/rules/_citations.scss b/theming/rules/_citations.scss new file mode 100644 index 000000000..661035265 --- /dev/null +++ b/theming/rules/_citations.scss @@ -0,0 +1,48 @@ +.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; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.citation-entry { + padding: 1.5rem !important; + margin-bottom: 0; + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.citation-content { + flex-grow: 1; +} + +.citation-text { + font-size: 0.95rem; + line-height: 1.6; + color: $text-muted; + margin: 0; + + em { + font-style: italic; + } +} + +.citation-title { + font-weight: 600; + color: $text-color; +} + +.citation-actions { + display: flex; + gap: 0.5rem; + flex-shrink: 0; +} diff --git a/theming/rules/_footer.scss b/theming/rules/_footer.scss new file mode 100644 index 000000000..183b209f0 --- /dev/null +++ b/theming/rules/_footer.scss @@ -0,0 +1,127 @@ +/* Custom Footer */ +.custom-footer { + background-color: $navbar-bg; + color: $text-muted; + font-size: 0.9rem; + padding: 3rem 2rem 2rem; + border-top: 1px solid $btn-border-color; + + .footer-container { + max-width: 1350px; + margin: 0 auto; + } + + .footer-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 2rem; + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: 1px solid $btn-border-color; + } + + .footer-links-wrapper { + display: flex; + flex-wrap: wrap; + gap: 2rem; + flex: 2 1 400px; + } + + .footer-column { + flex: 1 1 auto; + + h5 { + font-weight: 600; + color: $panel-bg; + margin-bottom: 1.25rem; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.08em; + } + + a { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; + color: $text-muted; + text-decoration: none; + transition: color 0.2s ease; + + &:hover { + color: $links-hover; + text-decoration: none; + } + + i { + font-size: 1.1rem; + line-height: 1; + width: 20px; + text-align: center; + } + } + } + + .partner-logo { + flex: 1; + + img { + max-width: 100%; + height: 50px; + object-fit: contain; + transition: transform 0.2s ease; + } + + &:hover img { + transform: scale(1.05); + } + } + + .footer-brands { + flex: 1 1 320px; + + p { + font-size: 0.9rem; + line-height: 1.6; + margin-top: -0.5rem; + margin-bottom: 1.5rem; + } + + .logo-grid { + display: flex; + gap: 2rem; + align-items: center; + } + } + + .footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.85rem; + flex-wrap: wrap; + gap: 1rem; + + p { + margin: 0; + line-height: 1.6; + } + + a { + color: $links; + font-weight: 500; + text-decoration: none; + border-bottom: 1px solid $btn-border-color; + &:hover { + border-bottom-color: $links-hover; + } + } + } +} + +.footer-source-link { + display: flex; + align-items: center; + gap: 0.5rem; +} diff --git a/theming/rules/_forms.scss b/theming/rules/_forms.scss new file mode 100644 index 000000000..0c6d8c256 --- /dev/null +++ b/theming/rules/_forms.scss @@ -0,0 +1,24 @@ +.quarto-listing-sort, .quarto-listing-filter { + .input-group-text { + background-color: $background-body; + border-color: $btn-border-color; + color: $text-muted; + } + + .form-select, .form-control { + background-color: $background-body; + border-color: $btn-border-color; + color: $text-color; + + &:focus { + border-color: $links; + box-shadow: 0 0 0 0.25rem rgba($links, 0.25); + background-color: $background-body; + color: $text-color; + } + } + + .form-select { + background-image: $form-select-bg-image; + } +} diff --git a/theming/rules/_hoverables-dark.scss b/theming/rules/_hoverables-dark.scss new file mode 100644 index 000000000..c230633df --- /dev/null +++ b/theming/rules/_hoverables-dark.scss @@ -0,0 +1,182 @@ +.box { + border-radius: 12px; + padding: 2rem; + transition: + transform 0.2s ease, + box-shadow 0.2s ease, + background-color 0.3s ease, + border-color 0.3s ease; + box-shadow: 0 5px 20px darken($box-shadow-color, 30%); + background-color: $panel-bg; + border: 1px solid $btn-border-color; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px darken($box-shadow-color, 50%); // intended is rgba(0, 0, 0, 0.08) + border-color: transparent; + } + + &--splash { + background-color: lighten($teal, 15%); // #eef7f7 intended + } + + code { + background-color: lighten($code-block-bg, 5%) !important; + } +} + +.button { + 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; + background-color: $panel-bg; + border-color: $btn-border-color; + color: $text-color; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px darken($box-shadow-color, 50%); + text-decoration: none; + color: $white !important; + border-color: transparent; + } + + &--fill { + background-color: $teal; + border-color: transparent; + color: $white !important; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px darken($box-shadow-color, 50%); + text-decoration: none; + border-color: lighten($teal, 15%); + background-color: darken($teal, 5%); + } + } +} + +.card { + border: 2px solid $btn-border-color; + color: $text-color; + + &:hover { + background-color: lighten($panel-bg, 10%); + border-color: transparent; + } + + .card-title { + color: $text-color; + } + + .card-text { + color: $text-muted; + } +} + +/* UNIFIED CARD GRID */ + +.unified-card { + display: flex; + flex-direction: column; + text-decoration: none; + background-color: $panel-bg; + border-radius: 12px; + padding: 0; + overflow: hidden; + transition: all 0.3s ease; + flex: 1 1 320px; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px darken($box-shadow-color, 5%); + text-decoration: none; + border-color: transparent; + position: relative; + z-index: 10; + } +} + +.turing-license-link code { + color: $teal-license !important; + text-decoration: none !important; + + &:hover { + color: lighten($teal-license, 5%) !important; + } +} + +.citation-icon-btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + border: 2px solid $btn-border-color; + background-color: lighten($panel-bg, 7%); + color: $text-muted; + cursor: pointer; + transition: all 0.2s ease; + padding: 0; + text-decoration: none; + + svg { + width: 16px; + height: 16px; + fill: currentColor; + } + + &:hover { + background-color: lighten($panel-bg, 7%); + border-color: transparent; + color: $teal; + transform: translateY(-1px); + box-shadow: 0 2px 8px $box-shadow-color; + text-decoration: none; + } + + .citation-copied { + background-color: $green; + border-color: $green; + color: $panel-bg; + font-size: 1.2rem; + font-weight: bold; + + &:hover { + background-color: $green; + border-color: $green; + color: $panel-bg; + transform: translateY(0); + box-shadow: none; + } + } +} + +.link-muted { + color: $text-muted; + + &:hover { + color: $links-hover; + text-decoration: underline; + } +} + +a { + text-decoration: none; + color: $links; + + &:hover { + text-decoration: underline; + color: $links-hover; + } +} diff --git a/theming/rules/_hoverables-light.scss b/theming/rules/_hoverables-light.scss new file mode 100644 index 000000000..ddb8a72d1 --- /dev/null +++ b/theming/rules/_hoverables-light.scss @@ -0,0 +1,173 @@ +.box { + border-radius: 12px; + padding: 2rem; + transition: + transform 0.2s ease, + box-shadow 0.2s ease, + background-color 0.3s ease, + border-color 0.3s ease; + box-shadow: 0 5px 20px darken($box-shadow-color, 30%); + background-color: $panel-bg; + border: 1px solid $btn-border-color; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px darken($box-shadow-color, 50%); + border-color: transparent; + } + + &--splash { + background-color: lighten($teal, 15%); + } +} + +.button { + 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; + background-color: $panel-bg; + border-color: $btn-border-color; + color: $text-color; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px darken($box-shadow-color, 50%); + border-color: transparent; + text-decoration: none; + } + + &--fill { + background-color: $teal; + border-color: darken($teal, 5%); + color: $white; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px darken($box-shadow-color, 50%); + text-decoration: none; + border-color: transparent; + } + } +} + +.card { + border: 2px solid $btn-border-color; + color: $text-color; + + &:hover { + background-color: lighten($panel-bg, 10%); + border-color: transparent; + } + + .card-title { + color: $text-color; + } + + .card-text { + color: $text-muted; + } +} + +/* UNIFIED CARD GRID */ + +.unified-card { + display: flex; + flex-direction: column; + text-decoration: none; + background-color: $panel-bg; + border-radius: 12px; + padding: 0; + overflow: hidden; + transition: all 0.3s ease; + flex: 1 1 320px; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px darken($box-shadow-color, 5%); + text-decoration: none; + border-color: transparent; + position: relative; + z-index: 10; + } +} + +.turing-license-link code { + color: $teal-license !important; + text-decoration: none !important; + + &:hover { + color: lighten($teal-license, 5%) !important; + } +} + +.citation-icon-btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + border: 2px solid $btn-border-color; + background-color: lighten($panel-bg, 7%); + color: $text-muted; + cursor: pointer; + transition: all 0.2s ease; + padding: 0; + text-decoration: none; + + svg { + width: 16px; + height: 16px; + fill: currentColor; + } + + &:hover { + background-color: lighten($panel-bg, 7%); + border-color: transparent; + color: $teal; + transform: translateY(-1px); + box-shadow: 0 2px 8px $box-shadow-color; + text-decoration: none; + } + + .citation-copied { + background-color: $green; + border-color: $green; + color: $panel-bg; + font-size: 1.2rem; + font-weight: bold; + + &:hover { + background-color: $green; + border-color: $green; + color: $panel-bg; + transform: translateY(0); + box-shadow: none; + } + } +} + +.link-muted { + color: $text-muted; + + &:hover { + text-decoration: underline; + } +} + +a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} diff --git a/theming/rules/_layouts.scss b/theming/rules/_layouts.scss new file mode 100644 index 000000000..c73f81223 --- /dev/null +++ b/theming/rules/_layouts.scss @@ -0,0 +1,261 @@ +.hero-section { + padding: 4rem 1rem; + padding-bottom: 0%; + text-align: center; +} + +.hero-content { + max-width: 800px; + margin: 0 auto 3rem auto; +} + +.hero-logo { + max-width: 55%; + height: auto; + margin-bottom: 1.5rem; + margin-left: auto; + margin-right: auto; +} + +.hero-subtitle { + font-size: clamp(1.1rem, 3vw, 1.5rem); + color: #34495e; + margin-bottom: 2.5rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.hero-cta-buttons { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +// Not hoverable? Maybe have to move? Maybe not. +.btn-lg { + padding: 14px 32px; + font-size: 1.1rem; +} + +.section-end-space { + padding-bottom: 2rem; +} + +.section-start-space { + padding-top: 2rem; +} + +.content-panel { + padding: 1.5rem; +} + +.panel { + color: $text-muted; + font-size: 17px; + font-weight: 400; + min-height: 150px; + min-width: 300px; + max-width: 31%; + + /* Does this bit achieve anything? I think it's inherited? + p { + color: $text-muted; + font-size: 17px; + font-weight: 400; + } + */ + + .panel-title { + color: $text-color !important; + font-size: 1.4rem; + font-weight: 700; + margin-bottom: 1rem; + } +} + +.panel-wrapper { + justify-content: center; +} + +.navbar { + background-color: $navbar-bg; + + .nav-link, + .navbar-title, + .quarto-navigation-tool { + color: $navbar-color !important; + transition: color 0.2s ease; + + &:hover { + color: $links-hover !important; + } + } + + a:hover { + text-decoration: none; + } +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + + h3 { + margin-bottom: 0; + } +} + +.side-space { + max-width: 1350px; + margin-left: auto; + margin-right: auto; + padding-left: 4rem; + padding-right: 4rem; +} + +.example-code { + flex: 0 1 45%; +} + +.example-text { + flex: 0 1 53%; +} + +/* === Core Packages Section === */ +.core-packages-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; + justify-content: center; + padding-left: 1rem; + padding-right: 1rem; +} + +.package-card { + text-align: left; + + p { + margin-bottom: 0%; + } + + h5 { + text-align: center; + } + + .panel-title { + color: $text-color; + font-weight: 600; + font-size: 1.25rem; + } +} + +.logo-header { + padding: 0%; + margin-bottom: 0%; +} + +.mobile-only-button-container { + display: none; +} + +// UNIFIED CARD GRID +.unified-card-grid { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + align-items: stretch; + padding: 0 1rem; + padding-top: 0.5rem; +} + +.unified-card-body { + padding: 1rem; + flex-grow: 1; + display: flex; + flex-direction: column; + padding-bottom: 0%; +} + +.unified-card-title { + font-size: 1.2rem; + line-height: 1.4; + font-weight: 600; + color: $text-color; + margin-bottom: 0.75rem; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.unified-card-text { + font-size: 0.95rem; + line-height: 1.6; + color: $text-muted; + margin-bottom: 1rem; + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.unified-card-categories { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 0.75rem; +} + +.category-tag { + background-color: $btn-border-color !important; + color: $text-muted !important; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 500; + white-space: nowrap; +} + +.unified-card-footer { + padding: 1rem 1.5rem; + border-top: 1px solid lighten($panel-bg, 7%); + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.85rem; + color: $text-muted; + background-color: $background-body; +} + +.unified-card-meta { + display: flex; + flex-direction: column; + gap: 0.25rem; + min-width: 0; + flex-grow: 1; +} + +.unified-card-author { + font-weight: 600; + color: $text-color; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.unified-card-date { + font-size: 0.8rem; + color: $text-muted; +} + +.unified-card-reading-time { + font-weight: 600; + color: $teal; + white-space: nowrap; + font-size: 0.8rem; +} diff --git a/theming/rules/_library.scss b/theming/rules/_library.scss new file mode 100644 index 000000000..c5a867620 --- /dev/null +++ b/theming/rules/_library.scss @@ -0,0 +1,91 @@ +.packages-table { + width: 100%; + border-collapse: collapse; + background-color: $panel-bg; + color: $text-color; + + th, + td { + padding: 0.75rem 1rem; + text-align: left; + border-bottom: 1px solid $btn-border-color; + } + + thead { + background-color: $background-body; + } + + tbody tr:nth-child(odd) { + background-color: lighten($background-body, 1%); + } + + @media (min-width: 769px) { + tbody tr:hover { + background-color: if(lightness($panel-bg) > 50, darken($panel-bg, 4%), lighten($panel-bg, 5%)); + } + } + + th { + font-weight: 600; + } + + .badge.deprecated { + display: inline-block; + margin-left: 0.5em; + padding: 0.2em 0.4em; + font-size: 0.75em; + font-weight: 600; + border-radius: 0.2em; + color: $deprecated-fg; + background-color: $deprecated-bg; + } +} + +@media (max-width: 768px) { + .packages-table { + background-color: transparent; + border: none; + box-shadow: none; + + thead { + display: none; + } + + tr:nth-child(odd) { + background-color: lighten($background-body, 1%); + } + + tr { + display: block; + margin-bottom: 1rem; + border: 2px solid $btn-border-color; + border-radius: $border-radius-sm; + padding: 0.5rem; + background-color: $panel-bg; + } + + td { + display: grid; + grid-template-columns: 100px 1fr; + gap: 1rem; + align-items: center; + text-align: left; + border-bottom: 1px solid transparent; + padding: 0.75rem 0.5rem; + + &::before { + content: attr(data-label); + font-weight: 600; + color: $text-muted; + } + } + + tr td:last-child { + padding-bottom: 0.75rem; + } + + tr td:not(:last-child) { + border-bottom: 1px solid $btn-border-color; + } + } +} diff --git a/theming/rules/_news.scss b/theming/rules/_news.scss new file mode 100644 index 000000000..e06be6d70 --- /dev/null +++ b/theming/rules/_news.scss @@ -0,0 +1,51 @@ +.quarto-post { + padding: 1.25rem 0.5rem; + border: none; + border-bottom: 1px solid $btn-border-color; + border-radius: 0; + transition: none; + + &:hover { + .listing-title a { + color: $links-hover; + } + } +} + +.listing-title a { + text-decoration: none; + color: $text-color; + transition: color 0.2s ease; +} + +.listing-description p { + color: $text-muted; +} + +.metadata a { + text-decoration: none; + color: inherit; +} + +.listing-category { + background-color: $btn-border-color !important; + color: $text-muted !important; + margin-top: 0.25rem !important; + border: none !important; + transition: background-color 0.2s ease, color 0.2s ease; + + &:hover { + background-color: $links !important; + color: $panel-bg !important; + } +} + +.quarto-listing-category .category.active { + font-weight: bold; + color: $links; +} + +.quarto-listing-category .category:not(.active):hover { + color: $links-hover; + cursor: pointer; +} diff --git a/theming/rules/_quarto-tweaks.scss b/theming/rules/_quarto-tweaks.scss new file mode 100644 index 000000000..d6b335f9c --- /dev/null +++ b/theming/rules/_quarto-tweaks.scss @@ -0,0 +1,54 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + color: $text-color !important; + border-bottom-color: $btn-border-color; +} + +p { + color: $text-muted !important; +} + +.sourceCode, +code { + background-color: $code-block-bg !important; + color: $text-muted !important; + border-radius: $border-radius-sm; +} + +.quarto-container { + background-color: $background-body; +} + +.cell-output { + border: $border-width dashed; +} + +.cell-output-stdout code { + word-break: break-word !important; + white-space: pre-wrap !important; +} + +.cell-output-display { + svg { + height: fit-content; + width: fit-content; + } + + img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } +} + +.quarto-post { + border-bottom: 1px solid $btn-border-color !important +} + +.quarto-title-banner { + background-color: $navbar-bg !important; +} diff --git a/theming/rules/_responsive.scss b/theming/rules/_responsive.scss new file mode 100644 index 000000000..beac865c3 --- /dev/null +++ b/theming/rules/_responsive.scss @@ -0,0 +1,142 @@ +@media (max-width: 1200px) { + .core-packages-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 992px) { + .custom-footer { + .footer-links-wrapper { + flex-basis: 100%; + justify-content: center; + } + + .footer-grid { + justify-content: center; + } + + .footer-brands { + flex-grow: 0; + text-align: center; + + .logo-grid { + justify-content: center; + } + } + + .footer-column { + flex-grow: 0; + } + } +} + +@media (max-width: 768px) { + .side-space { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .section-header { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + + .section-header .desktop-only-button { + display: none; + } + + .mobile-only-button-container { + display: block; + margin-top: 0.3rem; + text-align: center; + + .button { + display: inline-block; + width: auto; + } + } + + .core-packages-grid { + grid-template-columns: 1fr; + } + + .unified-card { + flex-basis: 90%; + } + + .unified-card-title { + font-size: 1.1rem; + } + + .unified-card-text { + font-size: 0.9rem; + } + + .unified-card-body { + padding: 1.25rem; + padding-bottom: 0%; + } + + .unified-card-footer { + padding: 0.75rem 1.25rem; + } + + .unified-card-meta { + gap: 0.15rem; + } + + .citation-entry { + flex-direction: column; + align-items: flex-start; + } + + .citation-actions { + margin-top: 1rem; + align-self: flex-end; + } + + .custom-footer .footer-bottom { + flex-direction: column; + gap: 1.5rem; + text-align: center; + } +} + +@media (max-width: 576px) { + .unified-card-title { + font-size: 1rem; + } + + .unified-card-text { + font-size: 0.85rem; + } + + .custom-footer { + .footer-links-wrapper { + flex-direction: column; + text-align: center; + align-items: center; + } + + .footer-column { + width: 100%; + max-width: 350px; + + a { + justify-content: center; + } + } + .partner-logo { + flex-basis: auto; + width: 100%; + max-width: 220px; + } + + .footer-brands .logo-grid { + flex-direction: column; + gap: 1.5rem; + align-items: center; + } + } +} diff --git a/theming/rules/_search.scss b/theming/rules/_search.scss new file mode 100644 index 000000000..a949c1ce2 --- /dev/null +++ b/theming/rules/_search.scss @@ -0,0 +1,69 @@ +.aa-DetachedOverlay { + background-color: rgba($background-body, 0.95); + + .aa-Form { + border: none; + background-color: transparent; + } + + .aa-Input { + color: $text-color; + background-color: transparent; + } + + .aa-SubmitIcon, .aa-ClearIcon, .aa-LoadingIcon { + color: $text-muted; + } + + .aa-DetachedCancelButton { + color: $links; + background-color: transparent; + &:hover { + color: $links-hover; + } + } + + .aa-Panel { + background-color: $background-body; + } + + .search-result-header { + color: $text-color; + font-weight: 600; + } + + .search-result-title { + color: $text-color; + } + + .search-result-section { + color: $links; + } + + .search-result-text { + color: $text-muted; + } + + .search-match { + color: $links-hover; + background-color: transparent; + font-weight: 600; + } + + .aa-Item[aria-selected="true"] { + .search-item * { + color: $white !important; + } + + .search-item { + .search-result-section, .search-match { + color: lighten($links, 30%) !important; + } + } + } + + .search-result-more { + color: $links; + font-weight: 500; + } +} diff --git a/theming/rules/_team.scss b/theming/rules/_team.scss new file mode 100644 index 000000000..dad6e103f --- /dev/null +++ b/theming/rules/_team.scss @@ -0,0 +1,10 @@ +.team-member, .input-group-text { + background-color: $navbar-bg !important; +} + +a.gsoc-report svg { + width: .6em; + height: .6em; + margin-left: 3px; + transform: translateY(0px) +} \ No newline at end of file diff --git a/theming/styles.css b/theming/styles.css deleted file mode 100644 index 446151cda..000000000 --- a/theming/styles.css +++ /dev/null @@ -1,45 +0,0 @@ -/* 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; -} - -.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/theme-dark.scss b/theming/theme-dark.scss index 9c4361b91..f54f90524 100644 --- a/theming/theme-dark.scss +++ b/theming/theme-dark.scss @@ -1,172 +1,34 @@ /*-- scss:defaults --*/ -// Cosmo 5.3.3 -// Bootswatch -$theme: "cosmo" !default; +@import "variables/grays"; +@import "variables/colors-dark"; +@import "variables/borders"; -// Manually-added colors +/*-- scss:rules --*/ +@import "rules/layouts"; +@import "rules/news"; +@import "rules/team"; +@import "rules/footer"; +@import "rules/citations"; +@import "rules/library"; +@import "rules/search"; +@import "rules/forms"; +@import "rules/quarto-tweaks"; +@import "rules/responsive"; +@import "rules/hoverables-dark"; -$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; +.hero-logo-light { + display: none; } -.menu-text:hover { - color: $links-hover !important; +.hero-logo-dark { + display: block; } -.quarto-title-banner { - background-color: $foreground-dark !important; +.custom-footer .brands-light-mode-logo { + display: none !important; } -.title { - color: $white !important; +.custom-footer .brands-dark-mode-logo { + display: inline !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; -} - -// table background & text -.packages-table { - background-color: $background-body !important; - color: $li !important; -} - -// cell borders -.packages-table th, -.packages-table td { - border-bottom-color: $gray-900 !important; -} - -// header row -.packages-table thead { - background-color: $gray-900 !important; -} - -// zebra stripes -.packages-table tbody tr:nth-child(odd) { - background-color: darken($gray-900, 5%) !important; -} - -// hover state -.packages-table tbody tr:hover { - background-color: lighten($background-nav, 5%) !important; -} - -// “Deprecated” badge styling -.badge.deprecated { - color: $white !important; - background-color: $red !important; -} \ No newline at end of file diff --git a/theming/theme-light.scss b/theming/theme-light.scss new file mode 100644 index 000000000..3242b3f3a --- /dev/null +++ b/theming/theme-light.scss @@ -0,0 +1,34 @@ +/*-- scss:defaults --*/ + +@import "variables/grays"; +@import "variables/colors-light"; +@import "variables/borders"; + +/*-- scss:rules --*/ +@import "rules/layouts"; +@import "rules/footer"; +@import "rules/news"; +@import "rules/team"; +@import "rules/citations"; +@import "rules/library"; +@import "rules/search"; +@import "rules/forms"; +@import "rules/responsive"; +@import "rules/quarto-tweaks"; +@import "rules/hoverables-light"; + +.hero-logo-light { + display: block; +} + +.hero-logo-dark { + display: none; +} + +.custom-footer .brands-light-mode-logo { + display: inline !important; +} + +.custom-footer .brands-dark-mode-logo { + display: none !important; +} diff --git a/theming/variables/_borders.scss b/theming/variables/_borders.scss new file mode 100644 index 000000000..58953a789 --- /dev/null +++ b/theming/variables/_borders.scss @@ -0,0 +1,2 @@ +$border-radius-sm: 0.5rem; +$border-width: 1px; diff --git a/theming/variables/_colors-dark.scss b/theming/variables/_colors-dark.scss new file mode 100644 index 000000000..905bdce6f --- /dev/null +++ b/theming/variables/_colors-dark.scss @@ -0,0 +1,34 @@ +$teal: #4db6ac; +$green: #229954; + +// This is very similar to the "normal" teal. Can we collapse those into the same? +$teal-license: #34b8bf; + +$links: $teal-license; +$links-hover: lighten($links, 10%); + +$box-shadow-color: rgba(0, 0, 0, 0.4); + +$code-block-bg: #212529; + +$panel-bg: $gray-900; + +$background-body: #1c2128; + +$body-bg: $background-body; +$navbar-bg: lighten($background-body, 2%); +$navbar-color: $white; + +$btn-border-color: $gray-700; + +$text-color: $white; +$text-muted: $gray-500; + +$body-color: $white; +$navbar-fg: $white; +$footer-fg: $white; + +$deprecated-fg: #f5c6cb; +$deprecated-bg: #491217; + +$form-select-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); \ No newline at end of file diff --git a/theming/variables/_colors-light.scss b/theming/variables/_colors-light.scss new file mode 100644 index 000000000..fc138978e --- /dev/null +++ b/theming/variables/_colors-light.scss @@ -0,0 +1,29 @@ +$teal: #4db6ac; +$green: #229954; + +// This is very similar to the "normal" teal. Can we collapse those into the same? +$teal-license: #34b8bf; + +$links: $teal-license; +$links-hover: lighten($links, 10%); + +$box-shadow-color: rgba(0, 0, 0, 0.06); + +$code-block-bg: $gray-100; + +$panel-bg: $white; + +$background-body: $gray-100; + +$text-color: $gray-700; +$text-muted: $gray-600; + +$btn-border-color: $gray-200; +$body-bg: $background-body; +$navbar-bg: $white; +$navbar-color: $text-muted; + +$deprecated-fg: #721c24; +$deprecated-bg: #f8d7da; + +$form-select-bg-image: null; \ No newline at end of file diff --git a/theming/variables/_grays.scss b/theming/variables/_grays.scss new file mode 100644 index 000000000..dfa4c528d --- /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; \ No newline at end of file