diff --git a/content/news/2020-08-10-introducing-bevy/index.md b/content/news/2020-08-10-introducing-bevy/index.md index 16dedda3a6..af21b482ae 100644 --- a/content/news/2020-08-10-introducing-bevy/index.md +++ b/content/news/2020-08-10-introducing-bevy/index.md @@ -162,11 +162,11 @@ Bevy ECS does both of these things about as well as it can. According to the pop #### System Iteration (in nanoseconds, less is better) -![ecs iter performance graph](ecs_iter.svg) +ecs iter performance graph #### World Setup (in nanoseconds, less is better) -![ecs iter performance graph](ecs_build.svg) +ecs iter performance graph Note that `ecs_bench` is a single threaded benchmark, so it doesn't illustrate the multi-threading capabilities of these framework. And as always, please be aware that `ecs_bench` is a micro benchmark and it doesn't illustrate the performance of a complex game. There is a lot of nuance in the ECS performance space and each of the ECS implementations above will perform differently under different workloads. @@ -1198,4 +1198,4 @@ If any of this sounds interesting to you, I encourage you to check out [Bevy on I want Bevy to become a vibrant developer community ... thats actually why I chose the name! A Bevy is a group of birds, just like we are a group of game developers. Join the Bevy! - + diff --git a/content/news/2020-09-19-bevy-0.2/index.md b/content/news/2020-09-19-bevy-0.2/index.md index b5bc960f0e..569055ea25 100644 --- a/content/news/2020-09-19-bevy-0.2/index.md +++ b/content/news/2020-09-19-bevy-0.2/index.md @@ -32,11 +32,11 @@ We decided to resolve this problem by building a custom async-friendly task syst ### Total Combined Percent CPU Usage - 8 Core Machine (smaller is better) -![threading cpu usage 8 core](bevy_tasks_1.svg) +threading cpu usage 8 core ### Total Combined Percent CPU Usage - 32 Core Machine (smaller is better) -![threading cpu usage 32 core](bevy_tasks_2.svg) +threading cpu usage 32 core ## Initial Web Platform Support diff --git a/content/news/2020-11-03-bevy-0.3/index.md b/content/news/2020-11-03-bevy-0.3/index.md index 7d21c7856e..ff7df03fd7 100644 --- a/content/news/2020-11-03-bevy-0.3/index.md +++ b/content/news/2020-11-03-bevy-0.3/index.md @@ -279,7 +279,7 @@ Bevy had a number of nice performance improvements this release: Note: these numbers are for getting a component 100,000 times, not for an individual component lookup -![getting an entity's component](ecs_get_component.svg) +getting an entity's component This is where the big wins were. By removing locks and safety checks from Query systems, we were able to _significantly_ reduce the cost of retrieving a specific entity's component from within a system. @@ -300,15 +300,15 @@ Additionally, here are some relevant [ecs_bench_suite](https://github.com/rust-g #### Component Insertion (in microseconds, smaller is better) -![component insertion](ecs_simple_insert.svg) +component insertion #### Component Add/Remove (in milliseconds, smaller is better) -![component add/remove](ecs_add_remove.svg) +component add/remove #### Fragmented Iteration (in nanoseconds, smaller is better) -![fragmented iteration](ecs_frag_iter.svg) +fragmented iteration ### Thread Local Resources diff --git a/content/news/2020-12-19-bevy-0.4/index.md b/content/news/2020-12-19-bevy-0.4/index.md index 9d5540b4c1..2b754aad5a 100644 --- a/content/news/2020-12-19-bevy-0.4/index.md +++ b/content/news/2020-12-19-bevy-0.4/index.md @@ -463,7 +463,7 @@ This _significantly_ reduces iterative compile times. Check out how long it take ### Time To Compile Change To 3d_scene Example (in seconds, less is better) -![fast_compiles](fast_compiles.svg) +fast_compiles We added a cargo feature to easily enable dynamic linking during development @@ -513,11 +513,11 @@ For the first optimization round, I incrementalized as much as I could: #### Frame Time to Draw 10,000 Static Sprites (in milliseconds, less is better) -![bevy_round1_static](bevy_round1_static.svg) +bevy_round1_static #### Frame Time to Draw 10,000 Moving Sprites (in milliseconds, less is better) -![bevy_round1_dynamic](bevy_round1_dynamic.svg) +bevy_round1_dynamic ### Optimize Text Rendering (and other immediate rendering) @@ -525,7 +525,7 @@ Text Rendering (and anything else that used the `SharedBuffers` immediate-render #### Frame Time to Draw "text_debug" Example (in milliseconds, less is better) -![text_rendering](text_rendering.svg) +text_rendering ### Mailbox Vsync diff --git a/content/news/2021-04-06-bevy-0.5/index.md b/content/news/2021-04-06-bevy-0.5/index.md index c0837892a8..a299fc12e1 100644 --- a/content/news/2021-04-06-bevy-0.5/index.md +++ b/content/news/2021-04-06-bevy-0.5/index.md @@ -147,7 +147,7 @@ app.register_component( This benchmark illustrates adding and removing a single 4x4 matrix component 10,000 times from an entity that has 5 other 4x4 matrix components. The "other" components are included to help illustrate the cost of "table storage" (used by Bevy 0.4, Bevy 0.5 (Table), and Legion), which requires moving the "other" components to a new table. -![component add/remove](add_remove_big.svg) +component add/remove You may have noticed that **Bevy 0.5 (Table)** is also _way_ faster than **Bevy 0.4**, even though they both use "table storage". This is largely a result of the new [Archetype Graph](https://github.com/bevyengine/bevy/pull/1525), which significantly cuts the cost of archetype changes. @@ -181,7 +181,7 @@ We have achieved some pretty significant performance wins as a result of the new This benchmark runs a query that matches 5 entities within a single archetype and _doesn't_ match 100 other archetypes. This is a reasonable test of "real world" queries in games, which generally have many different entity "types", most of which _don't_ match a given query. This test uses "table storage" across the board. -![sparse_frag_iter](sparse_frag_iter.svg) +sparse_frag_iter **Bevy 0.5** marks a huge improvement for cases like this, thanks to the new "stateful queries". **Bevy 0.4** needs to check every archetype each time the iterator is run, whereas **Bevy 0.5** amortizes that cost to zero. @@ -189,7 +189,7 @@ This benchmark runs a query that matches 5 entities within a single archetype an This is the [ecs_bench_suite](https://github.com/rust-gamedev/ecs_bench_suite) `frag_iter` benchmark. It runs a query on 27 archetypes with 20 entities each. However unlike the "Sparse Fragmented Iterator Benchmark", there are no "unmatched" archetypes. This test uses "table storage" across the board. -![frag_iter](frag_iter.svg) +frag_iter The gains here compared to the last benchmark are smaller because there aren't any unmatched archetypes. However **Bevy 0.5** still gets a nice boost due to better iterator/query impls, amortizing the cost of matched archetypes to zero, and for_each iterators. diff --git a/content/news/2021-08-10-bevys-first-birthday/index.md b/content/news/2021-08-10-bevys-first-birthday/index.md index 35d65e9e55..306d9ca849 100644 --- a/content/news/2021-08-10-bevys-first-birthday/index.md +++ b/content/news/2021-08-10-bevys-first-birthday/index.md @@ -20,7 +20,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year of Milestones -![milestones](milestones.svg) +milestones * **August 10**: [Bevy 0.1](/news/introducing-bevy/) * Bevy's first public release! After months of working incognito, I released Bevy to the world. It was by no means complete, but it had most of the pillars in place to show the world what Bevy is (and could be): a modern and flexible renderer built on top of a modular Render Graph, a custom ECS with unrivaled ergonomics and competitive performance, 2D and 3D rendering features, asset handling, a modular app model that blurs the lines between engine developers and app developers, a custom UI system that integrates deeply with the engine, scenes, hot reloading, and blissfully productive iterative compile times. @@ -52,7 +52,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year By The Numbers -![numbers](numbers.svg) +numbers * **255** unique Bevy contributors on [GitHub](https://github.com/bevyengine) * **10,030** [GitHub](https://github.com/bevyengine) stars @@ -70,7 +70,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## Things I'm Proud Of -![proud](proud.svg) +proud ### _Our_ Engine @@ -156,7 +156,7 @@ We're starting to see paid Bevy jobs pop up and some of them are resulting in op ## There is Always Room for Improvement -![improve](improve.svg) +improve ### Delegating Work and Responsibility @@ -227,7 +227,7 @@ Never thought I'd say those words but here we are. I have a pretty big backlog o ## The Next Year of Bevy -![next year](next_year.svg) +next year Here are some of my plans for the next year: @@ -260,4 +260,4 @@ I'm looking forward to spending the next year with you all! \- [@cart](https://github.com/cart/) - + diff --git a/content/news/2022-01-08-bevy-0.6/index.md b/content/news/2022-01-08-bevy-0.6/index.md index 4468b84ed2..ae483e9d45 100644 --- a/content/news/2022-01-08-bevy-0.6/index.md +++ b/content/news/2022-01-08-bevy-0.6/index.md @@ -105,7 +105,7 @@ As a quick callout, pipelined rendering doesn't _actually_ happen in parallel ye
authors: @cart
-![render graph](render_graph.svg) +render graph The New Bevy Renderer has a Render Graph, [much like the old Bevy renderer](/news/introducing-bevy/#render-graph). Render Graphs are a way to logically model GPU command construction in a modular way. Graph Nodes pass GPU resources like Textures and Buffers (and sometimes Entities) to each other, forming a directed acyclic graph. When a Graph Node runs, it uses its graph inputs and the Render World to construct GPU command lists. @@ -215,7 +215,7 @@ We also have big plans to make [`Material`] even better:
authors: Rob Swain (@superdump)
-[![view frustum](ViewFrustum.svg)](https://en.wikipedia.org/wiki/Viewing_frustum#/media/File:ViewFrustum.svg) +[view frustum](https://en.wikipedia.org/wiki/Viewing_frustum#/media/File:ViewFrustum.svg) Drawing things is expensive! It requires writing data from the CPU to the GPU, constructing draw calls, and running shaders. We can save a lot of time by _not_ drawing things that the camera can't see. "Frustum culling" is the act of excluding objects that are outside the bounds of the camera's "view frustum", to avoid wasting work drawing them. For large scenes, this can be the difference between a crisp 60 frames per second and chugging to a grinding halt. diff --git a/content/news/2022-07-30-bevy-0.8/index.md b/content/news/2022-07-30-bevy-0.8/index.md index 020453637e..b5c23585dc 100644 --- a/content/news/2022-07-30-bevy-0.8/index.md +++ b/content/news/2022-07-30-bevy-0.8/index.md @@ -542,7 +542,7 @@ When possible, **Bevy 0.8** now uses "unstable sorts" (currently "radix sort"), ### many_cubes stress test "opaque phase" sort times (in milliseconds, less is better) -![unstable sort](unstable_sort.svg) +unstable sort ## Vertex Colors @@ -744,7 +744,7 @@ This new representation sped up schedule construction by ~30%! ### time to prepare and compute schedule with 100 systems (in milliseconds, less is better) -![label bench](label_bench.svg) +label bench This change also removed a number of trait requirements from our label derives: diff --git a/content/news/2022-08-10-bevys-second-birthday/index.md b/content/news/2022-08-10-bevys-second-birthday/index.md index 808529849a..150de333c7 100644 --- a/content/news/2022-08-10-bevys-second-birthday/index.md +++ b/content/news/2022-08-10-bevys-second-birthday/index.md @@ -20,7 +20,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year of Milestones -![milestones](milestones.svg) +milestones * **January 1**: Alice Cecile (@alice-i-cecile) gets scoped merge rights for documentation work. * **January 8**: [Bevy 0.6](/news/bevy-0-6) @@ -47,7 +47,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year By The Numbers -![numbers](numbers.svg) +numbers * **470** unique Bevy contributors on [GitHub](https://github.com/bevyengine) (up from 255) * **17,830** [GitHub](https://github.com/bevyengine) stars (up from 10,030) @@ -67,7 +67,7 @@ Note that for consistency and clarity all of these numbers are given in "absolut ## Things I'm Proud Of -![proud](proud.svg) +proud I'll try not to repeat myself here, but note that I am still extremely proud of the [things I outlined in last year's retrospective](/news/bevys-first-birthday). @@ -130,7 +130,7 @@ Of course, my "Bevy is still young and we make breaking changes regularly" warni ## There Is Always Room For Improvement -![improve](improve.svg) +improve ### Bevy 0.6 Took Too long @@ -190,7 +190,7 @@ I think we made the right calls here: we had a lot of foundational work to do, e ## The Next Year of Bevy -![next year](next_year.svg) +next year Here are some of our "big ticket" items planned for the next year. I'm keeping this list smaller and more scoped than last year because some of these items are _huge_ efforts and I was clearly overconfident in my predictions last year. That being said, I think we now have a better understanding of where we are in our "tech tree", we've started scaling out the Bevy Org and delegating effectively, and we are more capable of prioritizing these things (instead of needing to direct efforts to other foundational pieces). I believe we will make all of these things happen. @@ -211,4 +211,4 @@ This year is going to be a big one for Bevy. I'm looking forward to spending it \- [@cart](https://github.com/cart/) - + diff --git a/content/news/2023-05-17-bevy-webgpu/webgpu.svg b/content/news/2023-05-17-bevy-webgpu/webgpu.svg index ece6eb731c..a210bf4fd9 100644 --- a/content/news/2023-05-17-bevy-webgpu/webgpu.svg +++ b/content/news/2023-05-17-bevy-webgpu/webgpu.svg @@ -68,10 +68,8 @@ stroke: #0093ff; } - @media (prefers-color-scheme: dark) { - .cls-6 { - fill: #eeeeee; - } + .cls-6 { + fill: #eeeeee; } diff --git a/content/news/2023-08-10-bevys-third-birthday/index.md b/content/news/2023-08-10-bevys-third-birthday/index.md index 915de42504..d8b3d23f6d 100644 --- a/content/news/2023-08-10-bevys-third-birthday/index.md +++ b/content/news/2023-08-10-bevys-third-birthday/index.md @@ -22,7 +22,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year of Milestones -![milestones](milestones.svg) +milestones * **August 19**: [Bevy Jam #2: Combine](https://itch.io/jam/bevy-jam-2) * The second official Bevy game jam! 404 people joined, 85 people submitted games, and people left 2,674 ratings. [USA Football League Scouting Combine XLV](https://ramirezmike2.itch.io/usa-football-league-scouting-combine-xlv) won! @@ -43,7 +43,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year By The Numbers -![numbers](numbers.svg) +numbers * **741** unique Bevy contributors on [GitHub](https://github.com/bevyengine) (up from 470) * **25,222** [GitHub](https://github.com/bevyengine) stars (up from 17,830) @@ -63,7 +63,7 @@ Note that for consistency and clarity all of these numbers are given in "absolut ## Things I'm Proud Of -![proud](proud.svg) +proud I'll try not to repeat myself here, but note that I am still extremely proud of the things I outlined in Bevy's [First Birthday](/news/bevys-first-birthday) and [Second Birthday](/news/bevys-second-birthday) posts. @@ -123,7 +123,7 @@ I am very fortunate to work with such capable people. Bevy would be a very diffe ## There Is Always Room For Improvement -![improve](improve.svg) +improve ### I Want to Write More (of my own) Code @@ -210,7 +210,7 @@ We did not replace the Bevy Book with the New Bevy Book. We _have_ however, fina ## The Next Year of Bevy -![next year](next_year.svg) +next year I am no longer outlining explicit "plans for the next year", as I have twice now been pretty bad at making predictions. The Bevy Community and I take a relatively organic and reactive approach to developing Bevy. It doesn't make sense to outline a long list of "plans" when that isn't really how development works in practice. @@ -231,4 +231,4 @@ I'm looking forward to spending another year building Bevy with you all! \- [@cart](https://github.com/cart/) - + diff --git a/content/news/2023-09-21-community-reflection-on-bevys-third-year/index.md b/content/news/2023-09-21-community-reflection-on-bevys-third-year/index.md index 59c16b6fcb..1e6cd83fd5 100644 --- a/content/news/2023-09-21-community-reflection-on-bevys-third-year/index.md +++ b/content/news/2023-09-21-community-reflection-on-bevys-third-year/index.md @@ -57,4 +57,4 @@ Here is to another year of Bevy! \- [@cart](https://github.com/cart/) - + diff --git a/content/news/2023-11-04-bevy-0.12/index.md b/content/news/2023-11-04-bevy-0.12/index.md index 888d2f571e..c5ab00cf27 100644 --- a/content/news/2023-11-04-bevy-0.12/index.md +++ b/content/news/2023-11-04-bevy-0.12/index.md @@ -202,7 +202,7 @@ Most existing user-facing asset code will either require no changes at all, or m ### Asset Preprocessing -![image process diagram](image_process.png) +image process diagram Asset preprocessing is the ability to take an input asset of a given type, process it in some way (generally during development time), and then use the result as the final asset in your application. Think of it as an "asset compiler". diff --git a/content/news/2024-03-11-bevy-foundation/index.md b/content/news/2024-03-11-bevy-foundation/index.md index 69691984f3..d498cd4b40 100644 --- a/content/news/2024-03-11-bevy-foundation/index.md +++ b/content/news/2024-03-11-bevy-foundation/index.md @@ -12,7 +12,7 @@ youtube = "cartdev" It is with excitement that I unveil to the world ... -Bevy Foundation Logo +Bevy Foundation Logo The [**Bevy Foundation**](/foundation) is the next step in our journey to build a world class free and open source game engine. **Bevy Foundation** is a non-profit organization formed in Washington State, with a pending federal 501(c)(3) tax-exemption application (more on this later). diff --git a/content/news/2024-08-10-bevys-fourth-birthday/index.md b/content/news/2024-08-10-bevys-fourth-birthday/index.md index a9fa9b2d59..5c9ebe8ca0 100644 --- a/content/news/2024-08-10-bevys-fourth-birthday/index.md +++ b/content/news/2024-08-10-bevys-fourth-birthday/index.md @@ -22,7 +22,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year of Milestones -![milestones](milestones.svg) +milestones * **November 4**: [Bevy 0.12](/news/bevy-0-12/) * We added Deferred Rendering, Bevy Asset V2, PCF Shadow Filtering, StandardMaterial Light Transmission, Material Extensions, Rusty Shader Imports, Suspend and Resume on Android, Automatic Batching and Instancing of Draw Commands, Renderer Optimizations, One Shot Systems, UI Materials, and more! @@ -44,7 +44,7 @@ For those who don't know, Bevy is a refreshingly simple data-driven game engine ## A Year By The Numbers -![numbers](numbers.svg) +numbers * **1027** unique Bevy contributors on [GitHub](https://github.com/bevyengine) (up from 741) * **34,537** [GitHub](https://github.com/bevyengine) stars (up from 25,222) @@ -63,7 +63,7 @@ Note that for consistency and clarity all of these numbers are given in "absolut ## Things I'm Proud Of -![proud](proud.svg) +proud I'll try not to repeat myself here, but note that I am still extremely proud of the things I outlined in Bevy's [First Birthday](/news/bevys-first-birthday), [Second Birthday](/news/bevys-second-birthday), and [Third Birthday](/news/bevys-third-birthday) posts. @@ -189,7 +189,7 @@ This is also a pattern I expect to see in other areas of the engine: initial rap ## There Is Always Room For Improvement -![improve](improve.svg) +improve ### Still No Editor @@ -264,7 +264,7 @@ We did [set up The Bevy Foundation](/news/bevy-foundation/)! ## The Next Year of Bevy -![next year](next_year.svg) +next year The Bevy Community and I take a relatively organic and reactive approach to developing Bevy. It doesn't make sense to outline a long list of "plans" when that isn't really how development works in practice. @@ -286,4 +286,4 @@ To many more years of Bevy! \- [@cart](https://github.com/cart/) - + diff --git a/content/news/2024-09-11-community-reflection-on-bevys-fourth-year/index.md b/content/news/2024-09-11-community-reflection-on-bevys-fourth-year/index.md index f68d1a0ce3..42af8f7370 100644 --- a/content/news/2024-09-11-community-reflection-on-bevys-fourth-year/index.md +++ b/content/news/2024-09-11-community-reflection-on-bevys-fourth-year/index.md @@ -61,4 +61,4 @@ Here is to another year of Bevy! \- [@cart](https://github.com/cart/) - + diff --git a/sass/_mixins.scss b/sass/_mixins.scss index c236eef35c..484bab4396 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -2,13 +2,13 @@ display: block; overflow: hidden; border-radius: $border-radius; - border: 2px solid #383838; - background-color: $syntax-theme-background; + border: 2px solid var(--card-border-color); + background-color: var(--card-bg-color); text-decoration: none; &:hover { - background-color: $card-hover-background; - border: 2px solid #6b6b6b; + background-color: var(--card-bg-hover-color); + border: 2px solid var(--card-border-hover-color); } } @@ -19,7 +19,6 @@ } @mixin override-anchor() { - &, &:focus, &:hover, @@ -36,9 +35,7 @@ @if ($lines ==1) { white-space: nowrap; text-overflow: ellipsis; - } - - @else { + } @else { // Ellipsis on second line // See: https://css-tricks.com/almanac/properties/l/line-clamp/ display: -webkit-box; @@ -48,17 +45,16 @@ } @mixin state-checked($id) { - ##{$id}-state:checked+[data-#{$id}-state-container] { + ##{$id}-state:checked + [data-#{$id}-state-container] { @content; } } @mixin scrollbar-v { $track-width: 4px; - $thumb-color: rgba($color-white, 0.2); scrollbar-width: thin; - scrollbar-color: $thumb-color transparent; + scrollbar-color: var(--scrollbar-thumb-color) transparent; &::-webkit-scrollbar-track { background-color: transparent; @@ -70,7 +66,7 @@ } &::-webkit-scrollbar-thumb { - background-color: $thumb-color; + background-color: var(--scrollbar-thumb-color); border-radius: $track-width; } } diff --git a/sass/_utils.scss b/sass/_utils.scss index 3002a7ff92..bc423240f4 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -5,7 +5,7 @@ // Visual outline on focused elements, for accessibility *:focus-visible { border-radius: 5px; - outline: $focus-outline; + outline: var(--focus-outline); } .section { @@ -23,15 +23,15 @@ } .warning { - color: #c8c864; + color: var(--warning-color); } body:not(.show_drafts) .public_draft:not(.active_draft) { display: none !important; } -.public_draft>div>a { - color: #c8c864 !important; +.public_draft > div > a { + color: var(--warning-color) !important; } .draft-header { @@ -45,7 +45,7 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { .anchor-link:link, .anchor-link:visited { margin-left: 0.3rem; - color: #737373; + color: var(--anchor-link-color); text-shadow: none; font-weight: 500; opacity: 0; @@ -63,8 +63,8 @@ h6 { } } -.public_draft>div>a { - color: #c8c864 !important; +.public_draft > div > a { + color: var(--warning-color) !important; } .draft-header { diff --git a/sass/_vars.scss b/sass/_vars.scss index 5768a4ce95..fbea4dc8ef 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -6,7 +6,7 @@ $size-body-mobile: 14px; // Size for mobile $bp-phone-landscape: 480px; // Mobile-landscape (and larger) $bp-tablet-portrait: 768px; // Tablet-portrait (and larger) $bp-tablet-landscape: 992px; // Tablet-landscape (and larger) -$bp-desktop: 1200px; // Laptops (and langer) +$bp-desktop: 1200px; // Laptops (and larger) $bp-phone-portrait-only: "(max-width: #{$bp-phone-landscape - 1})"; $bp-phone-landscape-up: "(min-width: #{$bp-phone-landscape})"; @@ -17,26 +17,6 @@ $bp-tablet-landscape-up: "(min-width: #{$bp-tablet-landscape})"; $bp-tablet-landscape-down: "(max-width: #{$bp-desktop - 1})"; $bp-desktop-up: "(min-width: #{$bp-desktop})"; -// Colors -$color-black: #000; -$color-white: #ececec; -$color-grey-800: #232326; -$color-grey-900: #1e1e22; -$color-pink: #9f517a; -$color-gold: #d2be4a; - -$headerbar-color: #1e1e22; -$hover-color: #ececec; -$hover-shadow-color: #d6d6d6; -$link-color: #7c90ff; -$link-hover-shadow-color: #6c82ff; -$default-color: #ececec; -$subtitle-color: #999; -$syntax-theme-background: #2b2c2f; -$syntax-theme-background-hover: #414247; -$default-image-background-color: #1b1b1b; -$card-hover-background: #2f3033; - // Animation $duration-fast: 100ms; $duration: 250ms; @@ -58,14 +38,455 @@ $border-radius: 10px; --font-family-sans: "Fira Sans", sans-serif; --font-family-mono: "Fira Mono", monospace; + // Neutrals by lightness + --color-neutral-11: #1b1b1b; + --color-neutral-13: #1e1e22; + --color-neutral-14: #232326; + --color-neutral-17: #2c2c2d; + --color-neutral-18: #2b2c2f; + --color-neutral-19: #2f3033; + --color-neutral-22: #383838; + --color-neutral-27: #414247; + --color-neutral-33: #555; + --color-neutral-33b: #535353; + --color-neutral-36: #59595e; + --color-neutral-40: #666; + --color-neutral-42: #6b6b6b; + --color-neutral-45: #737373; + --color-neutral-50: #808080; + --color-neutral-53: #868686; + --color-neutral-55: #8c8c8c; + --color-neutral-59: #969696; + --color-neutral-60: #95959d; + --color-neutral-60b: #999; + --color-neutral-60c: #8e9aa4; + --color-neutral-61: #9b9b9d; + --color-neutral-67: #aaa; + --color-neutral-69: #b1b1b1; + --color-neutral-72: #b8b8b8; + --color-neutral-73: #b9b9b9; + --color-neutral-75: #bfbfbf; + --color-neutral-78: #c8c8c8; + --color-neutral-82: #d2d2d2; + --color-neutral-88: #e1e1e1; + --color-neutral-93: #ececec; + --color-neutral-96: #f0effb; + --color-neutral-97: #f7f7f7; + + --color-black: #000; + --color-white: #fff; + + // Blues by lightness + --color-blue-21: #2f2745; + --color-blue-40: #456687; + --color-blue-43: #4a6e91; + --color-blue-47: #597899; + --color-blue-56: #6a8fb3; + --color-blue-57: #5944e0; + --color-blue-60: #799bbb; + --color-blue-71: #6c82ff; + --color-blue-74: #7c90ff; + --color-blue-85: #b3daff; + --color-blue-85b: #b1d9ff; + --color-blue-90: #cee7ff; + + --color-blue-link: var(--color-blue-74); + // Header - --header-height: 60px; - --scroll-padding-top: calc(var(--header-height) + 16px); + --layout-header-height: 60px; + --scroll-padding-top: calc(var(--layout-header-height) + 16px); @media #{$bp-desktop-up} { - --header-height: 72px; + --layout-header-height: 72px; + } + + // Dark Theme + // This eventually should go inside a `@media (prefers-color-scheme: dark) {}` + // media query block. But for now it's the default theme for everyone. The + // idea is to progressively improve the light theme quality before enabling + // "whole site level" light or dark theme. Meanwhile light theme only works in + // selected sections. + --anchor-link-color: var(--color-neutral-45); + + --asset-card-bg-gradient-start-color: var(--color-neutral-19); + --asset-card-bg-gradient-end-color: var(--color-neutral-11); + --asset-card-img-bg-color: var(--color-neutral-11); + --asset-card-tag-icon-color: var(--color-neutral-60); + --asset-card-text-color: var(--color-neutral-93); + --asset-card-title-bg-color: #{unquote('rgb(from var(--color-black) r g b / 0.5)')}; + --asset-card-title-color: var(--color-neutral-93); + --asset-card-tag-bg-color: var(--color-neutral-36); + --asset-card-tag-text-color: var(--color-neutral-93); + + --asset-suggestion-item-text-color: var(--color-neutral-93); + + --asset-version-select-bg-color: var(--color-neutral-19); + --asset-version-select-border-color: var(--color-neutral-22); + --asset-version-select-border-hover-color: var(--color-neutral-42); + + --bevy-instance-canvas-color: var(--color-neutral-18); + --bevy-instance-text-shadow-color: var(--color-black); + --bevy-instance-progress-track-color: var(--color-neutral-33); + --bevy-instance-progress-bar-color: var(--color-blue-60); + // Generated using: https://stripesgenerator.com + --bevy-instance-progress-bar-stripes: linear-gradient( + 131deg, + var(--color-blue-60) 25%, + var(--color-blue-47) 25%, + var(--color-blue-47) 50%, + var(--color-blue-60) 50%, + var(--color-blue-60) 75%, + var(--color-blue-47) 75%, + var(--color-blue-47) 100% + ); + + --button-blue-bg-color: var(--color-blue-43); + --button-blue-bg-hover-color: var(--color-blue-40); + --button-blue-border-color: var(--color-blue-56); + --button-blue-text-color: var(--color-neutral-93); + --button-pink-bg-color: #9f517a; + --button-pink-bg-hover-color: #954c72; + --button-pink-border-color: #ba789b; + --button-pink-text-color: var(--color-neutral-93); + --button-square-bg-color: var(--color-neutral-93); + + --callout-caution-accent-color: #e82f5a; + --callout-caution-bg-color: #591626; + --callout-caution-color: #eed5db; + --callout-info-accent-color: var(--color-blue-57); + --callout-info-bg-color: var(--color-blue-21); + --callout-info-color: var(--color-neutral-96); + --callout-warning-accent-color: #e4c151; + --callout-warning-bg-color: #513903; + --callout-warning-color: #fdfdec; + + --card-bg-color: var(--color-neutral-18); + --card-bg-hover-color: var(--color-neutral-19); + --card-border-color: var(--color-neutral-22); + --card-border-hover-color: var(--color-neutral-42); + --card-img-bg-color: var(--color-neutral-11); + --card-title-color: var(--color-neutral-93); + --card-sponsor-icon-color: #b13376; + + --code-bg-color: var(--color-neutral-18); + --code-incorrect-bg-color: #481e21; + --code-incorrect-border-color: darkred; + --code-incorrect-border-hover-color: red; + --code-incorrect-img-hover-filter: invert(10%) sepia(85%) saturate(7491%) + hue-rotate(5deg) brightness(116%) contrast(114%); // red + --code-incorrect-img-filter: invert(11%) sepia(57%) saturate(5143%) + hue-rotate(350deg) brightness(118%) contrast(87%); // firebrick red + --code-text-dim-color: var(--color-neutral-60c); + + --code-aaa: #c0c5ce; + --code-ccc: #c594c5; + --code-ddd: #6699cc; + --code-eee: #dfc479; + --code-fff: #eff1f5; + --code-ggg: #e79e6d; + --code-hhh: #8fa1b3; + --code-iii: #b48ead; + --code-jjj: #9fc37f; + --code-kkk: #e0858d; + --code-lll: #d08770; + --code-mmm: #a3be8c; + --code-nnn: #bf616a; + --code-ooo: #4f5b66; + --code-ppp: #96b5b4; + --code-qqq: #ab7967; + --code-rrr: #2b303b; + --code-sss: #f92672; + --code-ttt: #a6e22e; + --code-uuu: #967efb; + --code-vvv: #565656; + --code-www: #9fc37f; + --code-xxx: #56b6c2; + --code-yyy: #d19a66; + --code-zzz: #d1af8f; + + --details-bg-color: var(--color-neutral-93); + --details-text-shadow-color: var(--color-neutral-93); + + --docs-whats-a-bevy-filter: none; + + --docs-footer-border-color: var(--color-neutral-19); + --docs-footer-color: var(--color-neutral-61); + --docs-footer-dir-color: var(--color-neutral-40); + --docs-footer-dir-hover-color: var(--color-neutral-60b); + --docs-footer-edit-color: var(--color-neutral-55); + --docs-footer-edit-hover-color: var(--color-neutral-75); + --docs-footer-hover-bg-color: #{unquote('rgb(from var(--color-neutral-93) r g b / 0.01)')}; + --docs-footer-hover-color: var(--color-neutral-93); + + --donate-text-color: var(--color-neutral-82); + --donate-link-color: var(--color-blue-link); + --donate-description-color: var(--color-neutral-78); + --donate-level-corporate-color: var(--color-neutral-59); + --donate-level-amount-color: #bababa; + --donate-level-bronze-color: #9f7d6c; + --donate-level-silver-color: #bbb; + --donate-level-gold-color: #c0b04bff; + --donate-level-platinum-color: #c5c5c5; + --donate-level-titanium-color: #848484; + --donate-level-diamond-color: #a3daeb; + --donate-level-patron-color: #dcdcdc; + --donate-metric-color: var(--color-neutral-93); + --donate-tier-reward-color: var(--color-neutral-59); + + --example-nav-link-color: var(--color-neutral-67); + --example-nav-link-hover-color: var(--color-white); + + --feature-image-bg-color: var(--color-neutral-18); + + --focus-outline: solid var(--color-blue-85b) 3px; + + --footer-image-filter: grayscale(1) brightness(800%); + + --foundation-logo-filter: none; + + --header-message-color: var(--color-neutral-53); + + --heading-meta-text-color: var(--color-neutral-60b); + --heading-meta-item-color: var(--color-neutral-72); + + --html-bg-color: var(--color-neutral-13); + --html-text-color: var(--color-neutral-93); + + --image-compare-text-shadow-color: var(--color-black); + --image-compare-gap-color: var(--color-neutral-93); + --image-compare-outline-color: var(--color-neutral-13); + --image-compare-thumb-bg-color: var(--color-neutral-53); + --image-compare-thumb-bg-hover-color: var(--color-neutral-73); + --image-compare-thumb-outline-color: var(--color-white); + + --kbd-border-color: var(--color-neutral-50); + + --layout-header-bg-color: var(--color-neutral-13); + --layout-content-bg-color: var(--color-neutral-14); + --layout-header-border-color: var(--color-neutral-17); + + --link-card-img-bg-color: var(--color-neutral-11); + --link-card-title-color: var(--color-neutral-93); + --link-card-subtitle-color: var(--color-neutral-60b); + --link-card-text-color: var(--color-neutral-93); + + --main-menu-active-color: var(--color-blue-85); + --main-menu-backdrop-color: #{unquote('rgb(from var(--color-black) r g b / 0.2)')}; + --main-menu-link-hover-color: #{unquote('rgb(from var(--color-white) r g b / 0.05)')}; + --main-menu-link-outline: var(--focus-outline); + --main-menu-mobile-bg-color: var(--color-neutral-13); + --main-menu-mobile-box-shadow-color: #{unquote('rgb(from var(--color-black) r g b / 0.3)')}; + --main-menu-text-color: var(--color-neutral-93); + + --media-content-blockquote-bg-color: var(--color-neutral-18); + --media-content-blockquote-text-color: var(--color-neutral-69); + --media-content-button-text-color: var(--color-white); + --media-content-code-bg-color: var(--color-neutral-18); + --media-content-code-text-color: var(--color-neutral-78); + --media-content-link-code-color: #e4c151; + --media-content-link-code-hover-bg-color: var(--color-neutral-27); + --media-content-link-color: var(--color-blue-link); + --media-content-text-color: var(--color-neutral-82); + + --menu-switch-bg-color: #{unquote('rgb(from var(--color-white) r g b / 0.05)')}; + --menu-switch-option-active-bg-color: var(--color-neutral-13); + --menu-switch-option-active-text-color: var(--color-white); + --menu-switch-option-text-color: var(--color-neutral-61); + + --migration-guide-hr-color-legacy: var(--color-neutral-33b); + --migration-guide-hr-color: var(--color-white); + --migration-guide-legacy-area-tags-color: var(--color-neutral-50); + --migration-guide-title-color: var(--color-neutral-93); + + --news-feature-authors-color: var(--color-neutral-60b); + --news-fun-list-color: #a0c5e7; + --news-feature-image-subtitle: var(--color-neutral-60b); + --news-social-link-color: var(--color-blue-link); + --news-subtitle-color: var(--color-neutral-60b); + + --on-this-page-color: var(--color-neutral-53); + --on-this-page-hover-color: var(--color-neutral-73); + --on-this-page-active-color: var(--color-neutral-93); + + --people-role-lead-color: rgb(200, 200, 50); + --people-role-maintainer-color: rgb(242, 103, 255); + --people-role-sme-color: rgb(80, 200, 50); + + --scrollbar-thumb-color: #{unquote('rgb(from var(--color-white) r g b / 0.2)')}; + + --sponsors-name-color: var(--color-neutral-59); + --sponsors-link-color: var(--color-blue-link); + --sponsors-amount-color: var(--color-neutral-59); + --sponsors-past-donor-color: var(--color-neutral-59); + + --table-border-color: var(--color-neutral-60b); + --table-border-radius: 4px; + --table-header-color: var(--color-neutral-13); + + --tabs-bg-color: var(--color-white); + --tabs-highlight-color: var(--color-blue-link); + + --todo-bg-color: rgba(191, 170, 64, 0.3); + --todo-border-color: rgba(223, 191, 32, 0.5); + + --tree-menu-chevron-filter: brightness(70%); + --tree-menu-label-active-bg-color: #{unquote('rgb(from var(--color-neutral-93) r g b / 0.1)')}; + --tree-menu-label-active-color: var(--color-neutral-93); + --tree-menu-label-color: var(--color-neutral-61); + --tree-menu-toc-bg-color: #{unquote('rgb(from var(--color-black) r g b / 0.25)')}; + --tree-menu-toggle-hover-color: #{unquote('rgb(from var(--color-neutral-93) r g b / 0.1)')}; + + --warning-color: #c8c864; + + .invertable { } } -// Accessibility -$focus-outline: solid #b1d9ff 3px; +// Light Theme +// We default to a dark theme even when the user prefers a light theme, as the +// light theme quality is not good enough. So, only some selected sections are +// styled in light mode. +.light-mode { + @media (prefers-color-scheme: light) { + --color-blue-link: var(--color-blue-57); + + --callout-caution-accent-color: #ed0c41; + --callout-caution-bg-color: #fccad5; + --callout-caution-color: #2a0109; + --callout-info-accent-color: var(--color-blue-57); + --callout-info-bg-color: var(--color-blue-90); + --callout-info-color: #040126; + --callout-warning-accent-color: #f0d106; + --callout-warning-bg-color: #fdedc9; + --callout-warning-color: #362a02; + + --code-bg-color: var(--color-neutral-93); + --code-incorrect-border-color: red; + --code-text-dim-color: var(--color-neutral-61); + + --code-aaa: #5078a4; + --code-ccc: #b041a3; + --code-ddd: #498bcc; + --code-eee: #c58908; + --code-fff: #eff1f5; + --code-ggg: #d67b3e; + --code-hhh: #6e91b5; + --code-iii: #ae3698; + --code-jjj: #64ae23; + --code-kkk: #d1767d; + --code-lll: #d08770; + --code-mmm: #81ba50; + --code-nnn: #bf616a; + --code-ooo: #4f5b66; + --code-ppp: #68b1af; + --code-qqq: #ab7967; + --code-rrr: #2b303b; + --code-sss: #f92672; + --code-ttt: #a6e22e; + --code-uuu: #967efb; + --code-vvv: #565656; + --code-www: #5ea91c; + --code-xxx: #2aa5a9; + --code-yyy: #cd5d12; + --code-zzz: #ce8c4e; + + --details-bg-color: var(--color-neutral-17); + --details-text-shadow-color: var(--color-neutral-17); + + --docs-whats-a-bevy-filter: invert(85%); + + --docs-footer-border-color: var(--color-neutral-82); + --docs-footer-color: var(--color-neutral-33); + --docs-footer-dir-color: var(--color-neutral-53); + --docs-footer-dir-hover-color: var(--color-neutral-33); + --docs-footer-edit-color: var(--color-neutral-50); + --docs-footer-edit-hover-color: var(--color-neutral-33); + --docs-footer-hover-bg-color: #{unquote('rgb(from var(--color-black) r g b / 0.01)')}; + --docs-footer-hover-color: var(--color-black); + + --focus-outline: solid var(--color-blue-57) 3px; + + --footer-image-filter: grayscale(1) brightness(10%); + + --heading-meta-text-color: var(--color-neutral-50); + --heading-meta-item-color: var(--color-neutral-22); + + --html-bg-color: var(--color-neutral-82); + --html-text-color: var(--color-neutral-13); + + --layout-content-bg-color: var(--color-neutral-97); + --layout-header-border-color: var(--color-neutral-45); + + @media #{$bp-tablet-landscape-down} { + --main-menu-active-color: var(--color-blue-57); + --main-menu-link-hover-color: #{unquote('rgb(from var(--color-black) r g b / 0.03)')}; + --main-menu-text-color: var(--color-neutral-33); + } + + --main-menu-mobile-bg-color: var(--color-neutral-97); + + --media-content-blockquote-bg-color: var(--color-neutral-93); + --media-content-blockquote-text-color: var(--color-neutral-18); + --media-content-code-bg-color: var(--color-neutral-93); + --media-content-code-text-color: var(--color-neutral-17); + --media-content-link-code-color: #d77c08; + --media-content-link-code-hover-bg-color: var(--color-neutral-88); + --media-content-text-color: var(--color-neutral-27); + + --menu-switch-bg-color: var(--color-neutral-88); + --menu-switch-option-active-bg-color: var(--color-white); + --menu-switch-option-active-text-color: var(--color-black); + --menu-switch-option-text-color: var(--color-neutral-33); + + --migration-guide-hr-color-legacy: var(--color-neutral-50); + --migration-guide-hr-color: var(--color-black); + --migration-guide-legacy-area-tags-color: var(--color-neutral-50); + --migration-guide-title-color: var(--color-neutral-13); + + --on-this-page-color: var(--color-neutral-45); + --on-this-page-hover-color: var(--color-black); + --on-this-page-active-color: var(--color-black); + + --scrollbar-thumb-color: #{unquote('rgb(from var(--color-black) r g b / 0.2)')}; + + --todo-bg-color: rgba(191, 170, 64, 0.3); + --todo-border-color: rgba(223, 191, 32, 0.5); + + --tree-menu-chevron-filter: invert(65%); + --tree-menu-label-active-bg-color: var(--color-neutral-88); + --tree-menu-label-active-color: var(--color-black); + --tree-menu-label-color: var(--color-neutral-33); + --tree-menu-toc-bg-color: var(--color-neutral-93); + --tree-menu-toggle-hover-color: var(--color-neutral-75); + + --warning-color: rgb(179, 158, 24); + + .invertable { + filter: invert(90%) hue-rotate(180deg); + } + + // News Hacks + .news-content__hero-image, + .img-in-card { + @media (prefers-color-scheme: light) { + padding: 16px; + background-color: var(--color-neutral-14); + border-radius: $border-radius; + } + } + + .news-image-subtitle { + color: var(--color-white); + + a { + &, + &:focus, + &:hover, + &:active &:link, + &:visited { + color: var(--color-blue-71) !important; + } + } + } + } +} diff --git a/sass/components/_asset-card.scss b/sass/components/_asset-card.scss index d63ecbcd2b..744d857051 100644 --- a/sass/components/_asset-card.scss +++ b/sass/components/_asset-card.scss @@ -9,7 +9,7 @@ $asset-card-padding: 0.4rem; "banner" "desc" "tags"; - color: $color-white; + color: var(--asset-card-text-color); &__banner { grid-area: banner; @@ -18,9 +18,11 @@ $asset-card-padding: 0.4rem; aspect-ratio: 16 / 9; align-self: start; - background: linear-gradient(0deg, - $card-hover-background 0%, - $default-image-background-color 100%); + background: linear-gradient( + 0deg, + var(--asset-card-bg-gradient-start-color) 0%, + var(--asset-card-bg-gradient-end-color) 100% + ); img { width: 100%; @@ -28,7 +30,7 @@ $asset-card-padding: 0.4rem; display: block; object-fit: contain; - background-color: $default-image-background-color; + background-color: var(--asset-card-img-bg-color); } } @@ -40,7 +42,8 @@ $asset-card-padding: 0.4rem; padding: $asset-card-padding; font-weight: bold; font-size: 1.2rem; - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--asset-card-title-bg-color); + color: var(--asset-card-title-color); } &__description { @@ -82,7 +85,7 @@ $asset-card-padding: 0.4rem; svg { height: 1.2rem; width: 1.2rem; - fill: rgb(149, 149, 157); + fill: var(--asset-card-tag-icon-color); } } @@ -99,20 +102,17 @@ $asset-card-padding: 0.4rem; &__tag-list { display: flex; align-items: center; - gap: .2em; + gap: 0.2em; } &__tag { display: flex; justify-content: center; - padding: .2em .4em; - border-radius: .2em; - font-size: .85em; - background: rgb(89, 89, 94); - - &--supported { - background-color: rgb(110, 110, 247); - } + padding: 0.2em 0.4em; + border-radius: 0.2em; + font-size: 0.85em; + color: var(--asset-card-tag-text-color); + background: var(--asset-card-tag-bg-color); } } diff --git a/sass/components/_bevy-instance.scss b/sass/components/_bevy-instance.scss index fc74f67669..5450e9ed54 100644 --- a/sass/components/_bevy-instance.scss +++ b/sass/components/_bevy-instance.scss @@ -19,7 +19,7 @@ &__progress-file { margin-bottom: 4px; font-weight: normal; - text-shadow: 1px 1px 1px #000; + text-shadow: 1px 1px 1px var(--bevy-instance-text-shadow-color); font-size: 0.85rem; word-break: break-all; } @@ -28,7 +28,7 @@ width: 100%; height: 4px; border-radius: 4px; - background-color: #555; + background-color: var(--bevy-instance-progress-track-color); &:not(:last-child) { margin-bottom: 2px; @@ -38,7 +38,7 @@ &__progress-bar { height: 4px; min-width: 4px; - background-color: #799bbb; + background-color: var(--bevy-instance-progress-bar-color); border-radius: 4px; width: 0px; @@ -54,8 +54,8 @@ } // Generated using: https://stripesgenerator.com - background-image: linear-gradient(131deg, #799bbb 25%, #597899 25%, #597899 50%, #799bbb 50%, #799bbb 75%, #597899 75%, #597899 100%); - background-size: 26.50px 30.49px; + background-image: var(--bevy-instance-progress-bar-stripes); + background-size: 26.5px 30.49px; // Animate background animation-duration: 1s; @@ -70,6 +70,6 @@ width: 100% !important; height: auto !important; border-radius: $border-radius; - background: #2b2c2f; + background: var(--bevy-instance-canvas-color); } } diff --git a/sass/components/_button-square.scss b/sass/components/_button-square.scss index 292e0c8f1d..1593d647d9 100644 --- a/sass/components/_button-square.scss +++ b/sass/components/_button-square.scss @@ -6,21 +6,18 @@ &:hover { &:before { - $padding: 8px; - content: ""; position: absolute; - top: $padding; - right: $padding; - bottom: $padding; - left: $padding; - background-color: rgba($color-white, 0.05); + inset: 8px; + background-color: unquote( + "rgb(from var(--button-square-bg-color) r g b / 0.05)" + ); border-radius: $border-radius; } } &--header { - width: calc(var(--header-height) - 8px); - height: var(--header-height); + width: calc(var(--layout-header-height) - 8px); + height: var(--layout-header-height); } } diff --git a/sass/components/_button.scss b/sass/components/_button.scss index 9a5546b6ce..9a59e5e1c8 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -1,18 +1,25 @@ .button { - $color-blue: #4a6e91; + --button-bg-color: var(--button-blue-bg-color); + --button-bg-hover-color: var(--button-blue-bg-hover-color); + --button-border-color: var(--button-blue-border-color); + --button-text-color: var(--button-blue-text-color); display: inline-flex; align-items: center; - background-color: $color-blue; - border: 3px solid lighten($color-blue, 13%); + background-color: var(--button-bg-color); + border: 3px solid var(--button-border-color); padding: 6px 8px; border-radius: $border-radius; font-size: 1.2rem; font-weight: 500; transition: transform $duration-fast; + img { + border-radius: 0 !important; + } + &:hover { - background-color: darken($color-blue, 3%); + background-color: var(--button-bg-hover-color); } &:active { @@ -22,11 +29,12 @@ &, &:hover, &:visited { - color: $color-white; + color: var(--button-text-color); text-decoration: none; } &__icon { + flex-shrink: 0; height: 1.1em; width: auto; vertical-align: middle; @@ -35,11 +43,9 @@ } &--pink { - background-color: $color-pink; - border-color: lighten($color-pink, 13%); - - &:hover { - background-color: darken($color-pink, 3%); - } + --button-bg-color: var(--button-pink-bg-color); + --button-bg-hover-color: var(--button-pink-bg-hover-color); + --button-border-color: var(--button-pink-border-color); + --button-text-color: var(--button-pink-text-color); } } diff --git a/sass/components/_callout.scss b/sass/components/_callout.scss index cb4e0156f7..d48b2d08b7 100644 --- a/sass/components/_callout.scss +++ b/sass/components/_callout.scss @@ -6,11 +6,11 @@ border-top: 4px solid var(--callout-accent-color); color: var(--callout-color); - >:first-child { + > :first-child { margin-top: 0; } - >:last-child { + > :last-child { margin-bottom: 0; } @@ -20,20 +20,20 @@ &, &--info { - --callout-accent-color: #5944e0; - --callout-bg-color: #2f2745; - --callout-color: #f0effb; + --callout-accent-color: var(--callout-info-accent-color); + --callout-bg-color: var(--callout-info-bg-color); + --callout-color: var(--callout-info-color); } &--caution { - --callout-accent-color: #e82f5a; - --callout-bg-color: #591626; - --callout-color: #eed5db; + --callout-accent-color: var(--callout-caution-accent-color); + --callout-bg-color: var(--callout-caution-bg-color); + --callout-color: var(--callout-caution-color); } &--warning { - --callout-accent-color: #e4c151; - --callout-bg-color: #513903; - --callout-color: #fdfdec; + --callout-accent-color: var(--callout-warning-accent-color); + --callout-bg-color: var(--callout-warning-bg-color); + --callout-color: var(--callout-warning-color); } } diff --git a/sass/components/_card.scss b/sass/components/_card.scss index cb53ab42a6..4747dbbe2b 100644 --- a/sass/components/_card.scss +++ b/sass/components/_card.scss @@ -11,8 +11,8 @@ position: absolute; right: 0px; top: 0px; - height: 2.0em; - width: 2.0em; + height: 2em; + width: 2em; border-radius: 0px $border-radius 0px $border-radius; overflow: hidden; display: flex; @@ -26,7 +26,7 @@ } .card-sponsor-icon { - fill: $color-pink; + fill: var(--card-sponsor-icon-color); } .card-image { @@ -34,7 +34,7 @@ overflow: hidden; object-fit: cover; display: flex; - background-color: $default-image-background-color; + background-color: var(--card-img-bg-color); border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius; align-content: center; @@ -62,40 +62,18 @@ } .card-text-dense { - line-height: 1.0rem; + line-height: 1rem; } .card-text-dense { - line-height: 1.0rem; -} - -.card-subtitle { - display: block; - font-weight: 200; - font-size: 1.4rem; - font-style: italic; - color: $subtitle-color; - text-decoration: none; -} - -.card-description { - display: block; - position: relative; - font-weight: 300; - font-size: 1.3rem; - color: $default-color; - text-decoration: none; - margin-top: 0.4rem; - overflow: hidden; - text-overflow: ellipsis; - height: 100px; + line-height: 1rem; } .card-title { display: block; font-weight: 500; - font-size: 2.0rem; - color: $default-color; + font-size: 2rem; + color: var(--card-title-color); font-style: normal; text-decoration: none; } diff --git a/sass/components/_docs-footer.scss b/sass/components/_docs-footer.scss index 9ce5d7d434..8637cb4121 100644 --- a/sass/components/_docs-footer.scss +++ b/sass/components/_docs-footer.scss @@ -1,6 +1,4 @@ .docs-footer { - $border-color: #2f3033; - $secondary-text-color: #8c8c8c; --docs-footer-gap: 12px; margin: 32px 0; @@ -16,8 +14,7 @@ grid-template-columns: 1fr; grid-template-areas: "next" - "prev" - ; + "prev"; @media #{$bp-tablet-portrait-up} { grid-template-columns: 1fr 1fr; @@ -27,20 +24,20 @@ &__link { display: flex; - border: 2px solid $border-color; + border: 2px solid var(--docs-footer-border-color); border-radius: 8px; padding: 16px 8px; @include override-anchor { - color: #9b9b9d; + color: var(--docs-footer-color); } &:hover { - background-color: rgba($color-white, 0.01); - color: $color-white; + background-color: var(--docs-footer-hover-bg-color); + color: var(--docs-footer-hover-color); .docs-footer__dir { - color: #999; + color: var(--docs-footer-dir-hover-color); } } @@ -58,7 +55,7 @@ grid-area: next; text-align: right; padding-right: 16px; - + .docs-footer__label { padding: 0 12px 0 8px; } @@ -73,7 +70,7 @@ &__dir { margin-bottom: 4px; - color: #666; + color: var(--docs-footer-dir-color); text-transform: uppercase; font-size: 0.8rem; line-height: 1; @@ -85,7 +82,7 @@ } &__edit-wrapper { - border-top: 2px solid $border-color; + border-top: 2px solid var(--docs-footer-border-color); text-align: center; padding-top: var(--docs-footer-gap); } @@ -95,13 +92,13 @@ align-items: center; padding: 8px; font-size: 0.9rem; - + @include override-anchor { - color: $secondary-text-color; + color: var(--docs-footer-edit-color); } &:hover { - color: lighten($secondary-text-color, 20%); + color: var(--docs-footer-edit-hover-color); } .icon { diff --git a/sass/components/_example.scss b/sass/components/_example.scss index be7dc343d6..199a2215f0 100644 --- a/sass/components/_example.scss +++ b/sass/components/_example.scss @@ -30,11 +30,11 @@ font-size: 1rem; @include override-anchor { - color: #aaa; + color: var(--example-nav-link-color); } &:hover { - color: $color-white; + color: var(--example-nav-link-hover-color); } } diff --git a/sass/components/_footer.scss b/sass/components/_footer.scss index bed9f9bd34..ad29bda199 100644 --- a/sass/components/_footer.scss +++ b/sass/components/_footer.scss @@ -11,7 +11,7 @@ padding: 12px; img { - filter: grayscale(1) brightness(800%); + filter: var(--footer-image-filter); transition: scale $duration, opacity $duration; opacity: 0.65; } diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 078557c9c5..041293e572 100644 --- a/sass/components/_header.scss +++ b/sass/components/_header.scss @@ -8,7 +8,7 @@ &__content { width: 100%; max-width: $max-width; - height: var(--header-height); + height: var(--layout-header-height); display: flex; align-items: center; justify-content: space-between; @@ -38,7 +38,7 @@ display: none; font-size: 1.28rem; font-weight: 500; - color: #868686; + color: var(--header-message-color); margin-left: 12px; white-space: nowrap; @@ -81,7 +81,7 @@ } &:hover { - filter: brightness(80%) + filter: brightness(80%); } } } diff --git a/sass/components/_heading-meta.scss b/sass/components/_heading-meta.scss index ee7f074650..835ddb151d 100644 --- a/sass/components/_heading-meta.scss +++ b/sass/components/_heading-meta.scss @@ -1,14 +1,14 @@ .heading-meta { margin-top: -0.8rem !important; font-style: italic; - color: $subtitle-color; + color: var(--heading-meta-text-color); display: flex; gap: 5px; font-size: 1rem; flex-wrap: wrap; &__item { - color: #b8b8b8 !important; + color: var(--heading-meta-item-color) !important; } &__title { diff --git a/sass/components/_image_compare.scss b/sass/components/_image_compare.scss index dcdd719b19..179fe0ff0d 100644 --- a/sass/components/_image_compare.scss +++ b/sass/components/_image_compare.scss @@ -15,12 +15,12 @@ div.image-compare { --text-padding: 10px; --gap: 3px; --range-thumb-diametre: 16px; - background-color: $color-white; // gap color; + background-color: var(--image-compare-gap-color); // gap color; position: relative; border-radius: 10px; width: 100%; - outline: solid 1px $color-grey-900; // fixes border leaking background color + outline: solid 1px var(--image-compare-outline-color); // fixes border leaking background color outline-offset: -1px; // calculated @@ -32,7 +32,7 @@ div.image-compare { font-weight: bolder; font-size: 1.8rem; width: calc(100% - var(--text-padding)); - text-shadow: 0 0 2px $color-black; + text-shadow: 0 0 2px var(--image-compare-text-shadow-color); } &::before { @@ -90,13 +90,13 @@ div.image-compare { width: var(--range-thumb-diametre); height: var(--range-thumb-diametre); border-radius: 50%; - outline: solid 3px $color-white; + outline: solid 3px var(--image-compare-thumb-outline-color); outline-offset: -2.9px; - background-color: darken($color-white, 40%); + background-color: var(--image-compare-thumb-bg-color); &:hover, &:active { - background-color: darken($color-white, 20%); + background-color: var(--image-compare-thumb-bg-hover-color); } } diff --git a/sass/components/_layout.scss b/sass/components/_layout.scss index dd9d6b1164..c00e6180ce 100644 --- a/sass/components/_layout.scss +++ b/sass/components/_layout.scss @@ -7,18 +7,18 @@ position: fixed; top: 0px; width: 100%; - height: var(--header-height); - background-color: $color-grey-900; - border-bottom: 2px solid #2c2c2d; + height: var(--layout-header-height); + background-color: var(--layout-header-bg-color); + border-bottom: 2px solid var(--layout-header-border-color); z-index: $z-layout-header; } &__content { width: 100%; - padding-top: var(--header-height); + padding-top: var(--layout-header-height); padding-bottom: 64px; flex-grow: 1; - background-color: $color-grey-800; + background-color: var(--layout-content-bg-color); } } diff --git a/sass/components/_link-card.scss b/sass/components/_link-card.scss index fc915c1451..8c478af196 100644 --- a/sass/components/_link-card.scss +++ b/sass/components/_link-card.scss @@ -16,7 +16,7 @@ &__img-wrapper { @include flex-center; - background-color: $default-image-background-color; + background-color: var(--link-card-img-bg-color); padding: 1rem; @media #{$bp-phone-landscape-up} { @@ -54,9 +54,9 @@ &__title { margin: 0; line-height: 1.1; - font-size: 2.0rem; + font-size: 2rem; font-weight: 500; - color: $default-color; + color: var(--link-card-title-color); font-style: normal; margin-bottom: 4px; } @@ -65,14 +65,14 @@ font-size: 1.4rem; font-weight: 200; font-style: italic; - color: $subtitle-color; + color: var(--link-card-subtitle-color); } &__description { margin: 0.4rem 0 0; font-size: 1.3rem; font-weight: 300; - color: $default-color; + color: var(--link-card-text-color); text-decoration: none; &--ellipsis { diff --git a/sass/components/_main-menu-backdrop.scss b/sass/components/_main-menu-backdrop.scss index 3d836acb19..7bb7f89f2b 100644 --- a/sass/components/_main-menu-backdrop.scss +++ b/sass/components/_main-menu-backdrop.scss @@ -6,15 +6,15 @@ width: 100%; height: 100%; z-index: $z-main-menu-backdrop; - background-color: rgba($color-black, 0.2); + background-color: var(--main-menu-backdrop-color); cursor: pointer; - opacity: 0.0; + opacity: 0; transition: opacity $duration * 2; } @include state-checked("mobile-menu") { .main-menu-backdrop { visibility: visible; - opacity: 1.0; + opacity: 1; } } diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss index 69c4a5a3e0..e425775fbb 100644 --- a/sass/components/_main-menu.scss +++ b/sass/components/_main-menu.scss @@ -12,10 +12,8 @@ &__link { @include flex-center; - $color-blue: #b1d9ff; - position: relative; - height: var(--header-height); + height: var(--layout-header-height); font-size: 1.3rem; font-weight: 500; text-decoration: none; @@ -23,19 +21,18 @@ &, &:visited, &:active { - color: $color-white; + color: var(--main-menu-text-color); } &:hover { - color: $color-blue; + color: var(--main-menu-active-color); } &--active { - &, &:visited, &:active { - color: $color-blue; + color: var(--main-menu-active-color); } } @@ -48,7 +45,7 @@ // Instead we have the outline on the text inside the link &:focus-visible span { border-radius: 5px; - outline: $focus-outline; + outline: var(--main-menu-link-outline); } } } @@ -67,12 +64,12 @@ width: $mobile-menu-width; bottom: -$bottom-buffer; padding-bottom: $bottom-buffer; - background-color: $color-grey-900; + background-color: var(--main-menu-mobile-bg-color); z-index: $z-main-menu; transform: translateX(0); - opacity: 0.0; + opacity: 0; transition: transform $duration, opacity $duration; - box-shadow: 0px 0px 16px rgba(#000, 0.3); + box-shadow: 0px 0px 16px var(--main-menu-mobile-box-shadow-color); &--with-page-menu { --main-menu-switch-height: 56px; @@ -87,9 +84,9 @@ align-items: center; justify-content: space-between; padding-left: $padding; - height: var(--header-height); - background-color: $color-grey-800; - border-bottom: 2px solid #313131; + height: var(--layout-header-height); + background-color: var(--layout-header-bg-color); + border-bottom: 2px solid var(--layout-header-border-color); a { display: flex; @@ -105,7 +102,9 @@ &__content { position: relative; - height: calc(100% - var(--header-height) - var(--main-menu-switch-height)); + height: calc( + 100% - var(--layout-header-height) - var(--main-menu-switch-height) + ); overflow-x: hidden; } @@ -135,7 +134,7 @@ } &__link:hover { - background-color: rgba($color-white, 0.05); + background-color: var(--main-menu-link-hover-color); border-radius: $border-radius; } } @@ -143,7 +142,7 @@ @include state-checked("mobile-menu") { .main-menu { transform: translateX($mobile-menu-width); - opacity: 1.0; + opacity: 1; } } @@ -163,7 +162,6 @@ // MODE: Desktop Menu @media #{$bp-desktop-up} { .main-menu { - &__header, &__page-menu-switch, &__page-menu, @@ -175,7 +173,7 @@ @include flex-center; padding: 0 8px; - height: var(--header-height); + height: var(--layout-header-height); font-size: 1.3rem; font-weight: 500; text-decoration: none; diff --git a/sass/components/_menu-switch.scss b/sass/components/_menu-switch.scss index de836969d5..6082b3433e 100644 --- a/sass/components/_menu-switch.scss +++ b/sass/components/_menu-switch.scss @@ -10,7 +10,7 @@ $menu-switch-padding: 4px; grid-template-columns: 1fr 1fr; gap: $padding; border-radius: $height; - background-color: rgba($color-white, 0.05); + background-color: var(--menu-switch-bg-color); padding: $padding; height: $height; cursor: pointer; @@ -24,7 +24,7 @@ $menu-switch-padding: 4px; height: $pill-height; width: calc(50% - #{$padding * 2}); border-radius: $pill-height; - background-color: $color-grey-900; + background-color: var(--menu-switch-option-active-bg-color); z-index: 0; transition: transform $duration; } @@ -39,11 +39,11 @@ $menu-switch-padding: 4px; text-align: center; &--main-menu { - opacity: 1.0; + color: var(--menu-switch-option-active-text-color); } &--page-menu { - opacity: 0.5; + color: var(--menu-switch-option-text-color); } } } @@ -56,11 +56,11 @@ $menu-switch-padding: 4px; &__option { &--main-menu { - opacity: 0.5; + color: var(--menu-switch-option-text-color); } &--page-menu { - opacity: 1.0; + color: var(--menu-switch-option-active-text-color); } } } diff --git a/sass/components/_on-this-page.scss b/sass/components/_on-this-page.scss index df166da62b..0c95f35841 100644 --- a/sass/components/_on-this-page.scss +++ b/sass/components/_on-this-page.scss @@ -16,11 +16,10 @@ } a { - $color: #868686; display: block; text-wrap: balance; padding-block: 4px; - color: $color; + color: var(--on-this-page-color); text-decoration: none; word-break: break-word; @@ -30,12 +29,11 @@ } &:hover { - color: lighten($color, 20); + color: var(--on-this-page-hover-color); } - &[data-active=true] { - color: $color-white; + &[data-active="true"] { + color: var(--on-this-page-active-color); } - } } diff --git a/sass/components/_page-with-menu.scss b/sass/components/_page-with-menu.scss index 48f6f30d7b..5c7b44660b 100644 --- a/sass/components/_page-with-menu.scss +++ b/sass/components/_page-with-menu.scss @@ -31,8 +31,8 @@ @include scrollbar-v; position: sticky; - top: calc(var(--header-height) + #{$margin-top}); - height: calc(100vh - var(--header-height) - #{$margin-top * 2}); + top: calc(var(--layout-header-height) + #{$margin-top}); + height: calc(100vh - var(--layout-header-height) - #{$margin-top * 2}); overflow-y: auto; padding-bottom: $margin-top; } diff --git a/sass/components/_sponsors.scss b/sass/components/_sponsors.scss index 2885b61097..01a9e31764 100644 --- a/sass/components/_sponsors.scss +++ b/sass/components/_sponsors.scss @@ -34,58 +34,59 @@ &__name { display: block; margin: 0 10px 10px; - color: rgb(150, 150, 150); + color: var(--sponsors-name-color); font-size: 1.25rem; } - &__link { - display: block; - margin: 0 15px 15px; - color: $link-color; - font-size: 1.5rem; - } + &__link { + display: block; + margin: 0 15px 15px; + color: var(--sponsors-link-color); + font-size: 1.5rem; + } - &__amount { - margin-top: -4px; - font-size: 1.2rem; - color: rgb(150, 150, 150); - } + &__amount { + margin-top: -4px; + font-size: 1.2rem; + color: var(--sponsors-amount-color); + } - &__content { - display: flex; - max-width: none; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - margin: 0 auto; - } + &__content { + display: flex; + max-width: none; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin: 0 auto; + } - &__logo { - object-fit: contain; - width: 100%; - transition: transform .2s; /* Animation */ - } + &__logo { + object-fit: contain; + width: 100%; + transition: transform 0.2s; /* Animation */ + } - &__logo:hover { - transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ - } + &__logo:hover { + transform: scale( + 1.05 + ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ + } } .sponsors-section { - margin-top: 3rem; - text-align: center; - font-size: 1.5rem !important; - line-height: 2.2rem !important; + margin-top: 3rem; + text-align: center; + font-size: 1.5rem !important; + line-height: 2.2rem !important; } - .past-donors-title { font-size: 2.8rem; margin-bottom: 16px; } .past-donor { - font-size: 1.0rem; - color: rgb(150, 150, 150); + font-size: 1rem; + color: var(--sponsors-past-donor-color); } diff --git a/sass/components/_syntax-theme.scss b/sass/components/_syntax-theme.scss index c0f2c9f19c..37f7773c4d 100644 --- a/sass/components/_syntax-theme.scss +++ b/sass/components/_syntax-theme.scss @@ -1,52 +1,49 @@ .z-code { - color: #c0c5ce; - background-color: $syntax-theme-background; + color: var(--code-aaa); + background-color: var(--code-bg-color); } div.incorrect { - $incorrect_block_background_color: #481e21; - position: relative; - background-color: $incorrect_block_background_color; - border-left: 10px solid darkred; - border-radius: 10px; - padding-right: 55px; + position: relative; + background-color: var(--code-incorrect-bg-color); + border-left: 10px solid var(--code-incorrect-border-color); + border-radius: 10px; + padding-right: 55px; - .z-code, - .z-code code { - background-color: $incorrect_block_background_color; - } + .z-code, + .z-code code { + background-color: var(--code-incorrect-bg-color); + } } div.incorrect:hover { - border-color: red; + border-color: var(--code-incorrect-border-hover-color); - img { - /* SVG filter color for red */ - filter: invert(10%) sepia(85%) saturate(7491%) hue-rotate(5deg) brightness(116%) contrast(114%); - } + img { + filter: var(--code-incorrect-img-hover-filter); + } } div.incorrect-image { - position: absolute; - z-index: 99; - right: 20px; - top: 10px; + position: absolute; + z-index: 99; + right: 20px; + top: 10px; - img { - width: 35px; - height: 35px; - /* SVG filter color for firebrick red */ - filter: invert(11%) sepia(57%) saturate(5143%) hue-rotate(350deg) brightness(118%) contrast(87%); - } + img { + width: 35px; + height: 35px; + filter: var(--code-incorrect-img-filter); + } } .z-variable.z-parameter.z-function { - color: #c0c5ce; + color: var(--code-aaa); } .z-comment, .z-punctuation.z-definition.z-comment { - color: #8e9aa4; + color: var(--code-text-dim-color); } .z-punctuation.z-definition.z-string, @@ -55,209 +52,208 @@ div.incorrect-image { .z-punctuation.z-definition.z-parameters, .z-punctuation.z-definition.z-string, .z-punctuation.z-definition.z-array { - color: #c0c5ce; + color: var(--code-aaa); } .z-none { - color: #c0c5ce; + color: var(--code-aaa); } .z-keyword.z-operator { - color: #c0c5ce; + color: var(--code-aaa); } .z-keyword { - color: #c594c5ff; + color: var(--code-ccc); } .z-variable { - color: #c0c5ce; + color: var(--code-aaa); } .z-entity.z-name.z-function, .z-meta.z-require, .z-support.z-function.z-any-method { - color: #6699ccff; + color: var(--code-ddd); } .z-support.z-class, .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class { - color: #dfc479; + color: var(--code-eee); } .z-meta.z-class { - color: #eff1f5; + color: var(--code-fff); } .z-keyword.z-other.z-special-method { - color: #8fa1b3; + color: var(--code-hhh); } .z-storage { - color: #b48ead; + color: var(--code-iii); } .z-support.z-function { - color: #6699ccff; + color: var(--code-ddd); } .z-string, .z-constant.z-other.z-symbol, .z-entity.z-other.z-inherited-class { - color: #9fc37f; + color: var(--code-jjj); } .z-none { - color: #e79e6d; + color: var(--code-ggg); } .z-constant { - color: #e79e6d; + color: var(--code-ggg); } .z-entity.z-name.z-tag { - color: #e0858d; + color: var(--code-kkk); } .z-entity.z-other.z-attribute-name { - color: #d08770; + color: var(--code-lll); } .z-entity.z-other.z-attribute-name.z-id, .z-punctuation.z-definition.z-entity { - color: #8fa1b3; + color: var(--code-hhh); } .z-meta.z-selector { - color: #b48ead; + color: var(--code-iii); } .z-markup.z-heading .z-punctuation.z-definition.z-heading, .z-entity.z-name.z-section { - color: #8fa1b3; + color: var(--code-hhh); } .z-keyword.z-other.z-unit { - color: #e79e6d; + color: var(--code-ggg); } .z-markup.z-bold, .z-punctuation.z-definition.z-bold { - color: #dfc479; - font-weight: bold; + color: var(--code-eee); + font-weight: bold; } .z-markup.z-italic, .z-punctuation.z-definition.z-italic { - color: #b48ead; - font-style: italic; + color: var(--code-iii); + font-style: italic; } .z-markup.z-raw.z-inline { - color: #a3be8c; + color: var(--code-mmm); } .z-string.z-other.z-link { - color: #bf616a; + color: var(--code-nnn); } .z-meta.z-link { - color: #e79e6d; + color: var(--code-ggg); } .z-markup.z-list { - color: #bf616a; + color: var(--code-nnn); } .z-markup.z-quote { - color: #e79e6d; + color: var(--code-ggg); } .z-meta.z-separator { - color: #c0c5ce; - background-color: #4f5b66; + color: var(--code-aaa); + background-color: var(--code-ooo); } .z-markup.z-inserted, .z-markup.z-inserted.z-git_gutter { - color: #a3be8c; + color: var(--code-mmm); } .z-markup.z-deleted, .z-markup.z-deleted.z-git_gutter { - color: #bf616a; + color: var(--code-nnn); } .z-markup.z-changed, .z-markup.z-changed.z-git_gutter { - color: #b48ead; + color: var(--code-iii); } .z-markup.z-ignored, .z-markup.z-ignored.z-git_gutter { - color: #4f5b66; + color: var(--code-ooo); } .z-markup.z-untracked, .z-markup.z-untracked.z-git_gutter { - color: #4f5b66; + color: var(--code-ooo); } .z-constant.z-other.z-color { - color: #96b5b4; + color: var(--code-ppp); } .z-string.z-regexp { - color: #96b5b4; + color: var(--code-ppp); } .z-constant.z-character.z-escape { - color: #96b5b4; + color: var(--code-ppp); } .z-punctuation.z-section.z-embedded, .z-variable.z-interpolation { - color: #ab7967; + color: var(--code-qqq); } .z-invalid.z-illegal { - color: #2b303b; - background-color: #bf616a; + color: var(--code-rrr); + background-color: var(--code-nnn); } .z-markup.z-deleted.z-git_gutter { - color: #f92672; + color: var(--code-sss); } .z-markup.z-inserted.z-git_gutter { - color: #a6e22e; + color: var(--code-ttt); } .z-markup.z-changed.z-git_gutter { - color: #967efb; + color: var(--code-uuu); } .z-markup.z-ignored.z-git_gutter { - color: #565656; + color: var(--code-vvv); } .z-markup.z-untracked.z-git_gutter { - color: #565656; + color: var(--code-vvv); } - // RUST OVERRIDES .z-meta.z-generic.z-rust, .z-entity.z-name.z-struct.z-rust, .z-entity.z-name.z-enum.z-rust, .z-entity.z-name.z-impl.z-rust { - color: #dfc479; + color: var(--code-eee); } .z-punctuation.z-definition.z-generic.z-rust { - color: #c0c5ce; + color: var(--code-aaa); } .z-storage.z-type.z-function, @@ -265,44 +261,43 @@ div.incorrect-image { .z-storage.z-type.z-struct.z-rust, .z-punctuation.z-accessor.z-rust, .z-storage.z-modifier.z-rust { - color: #c594c5ff; + color: var(--code-ccc); } .z-support.z-macro.z-rust { - color: #6699ccff; + color: var(--code-ddd); } .z-punctuation.z-definition.z-string { - color: #9fc37f; + color: var(--code-www); } .z-entity.z-name.z-trait.z-rust { - color: #56b6c2; + color: var(--code-xxx); } .z-meta.z-annotation.z-rust, .z-variable.z-annotation.z-rust { - color: #d19a66; + color: var(--code-yyy); } .z-meta.z-annotation.z-parameters.z-rust, .z-variable.z-function.z-rust { + .z-begin, + .z-end, + .z-punctuation { + color: var(--code-yyy); + } - .z-begin, - .z-end, - .z-punctuation { - color: #d19a66; - } - - color: #d1af8f; + color: var(--code-zzz); } // SHELL OVERRIDES .z-variable.z-function.z-shell, .z-support.z-function.z-shell { - color: #6699ccff; + color: var(--code-ddd); } .z-variable.z-parameter.z-option { - color: #c594c5ff; + color: var(--code-ccc); } diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss index a67e64488e..6c498b9c13 100644 --- a/sass/components/_tabs.scss +++ b/sass/components/_tabs.scss @@ -19,11 +19,11 @@ border-radius: 8px; &:hover { - background-color: rgba(#fff, 0.05); + background-color: unquote("rgb(from var(--tabs-bg-color) r g b / 0.05)"); } &:active { - background-color: rgba(#fff, 0.1); + background-color: unquote("rgb(from var(--tabs-bg-color) r g b / 0.1)"); } &:after { @@ -47,7 +47,7 @@ } .tabs__radio:checked + .tabs__label:after { - background-color: $link-color; + background-color: var(--tabs-highlight-color); } .tabs__radio:checked + .tabs__label + .tabs__panel { diff --git a/sass/components/_themed-picture.scss b/sass/components/_themed-picture.scss new file mode 100644 index 0000000000..0030456ab9 --- /dev/null +++ b/sass/components/_themed-picture.scss @@ -0,0 +1,28 @@ +// This BEM component is used as an alternative to the more direct approach of +// using `media="(prefers-color-scheme: light)"` on a `source` element. The +// issue is that we're white-listing the pages that allow the light-theme. So we +// need to obview `.light-mode` class and not `prefers-color-scheme` media +// query. +.themed-picture { + &__light { + display: none !important; + } + + &__dark { + display: inline-block; + } +} + +.light-mode { + @media (prefers-color-scheme: light) { + .themed-picture { + &__light { + display: inline-block !important; + } + + &__dark { + display: none !important; + } + } + } +} diff --git a/sass/components/_todo.scss b/sass/components/_todo.scss index 187f40cf9c..e64c6be7dd 100644 --- a/sass/components/_todo.scss +++ b/sass/components/_todo.scss @@ -1,6 +1,6 @@ .todo { - background-color: hsla(50, 50, 50, 0.3); - border: double hsla(50, 75, 50, 0.5) 6px; + background-color: var(--todo-bg-color); + border: double var(--todo-border-color) 6px; border-radius: 10px; padding: 4px; @@ -10,4 +10,4 @@ font-size: 2rem; font-weight: bold; } -} \ No newline at end of file +} diff --git a/sass/components/_tree-menu.scss b/sass/components/_tree-menu.scss index d65333bf87..143f183990 100644 --- a/sass/components/_tree-menu.scss +++ b/sass/components/_tree-menu.scss @@ -1,5 +1,4 @@ .tree-menu { - $hover-color: rgba($color-white, 0.1); $item-height: 32px; $border-radius: 4px; $h-padding: 12px; @@ -27,11 +26,14 @@ border-radius: $border-radius; overflow: hidden; // prevent the radii from getting messed up margin-bottom: 2px; - opacity: 0.6; + color: var(--tree-menu-label-color); &:hover { - opacity: 1.0; - background-color: $hover-color; + background-color: var(--tree-menu-label-active-bg-color); + + .tree-menu__link { + color: var(--tree-menu-label-active-color); + } } &--with-chevron { @@ -53,7 +55,7 @@ text-wrap: balance; &, &:focus, &:active, &:hover, &:link, &:visited { - color: $color-white; + color: var(--tree-menu-label-color); } } @@ -64,25 +66,28 @@ width: 44px; cursor: pointer; user-select: none; + color: var(--tree-menu-label-color); &:hover { - background-color: $hover-color; + background-color: var(--tree-menu-toggle-hover-color); } } &__chevron { transition: transform $duration; transform: rotate(-90deg); + filter: var(--tree-menu-chevron-filter); } &__item--active { // Target just the first label, ignore subsection labels > .tree-menu__label { - background-color: $hover-color; - opacity: 1.0; + background-color: var(--tree-menu-label-active-bg-color); + &, + .tree-menu__toggle, .tree-menu__link { - color: $color-white; + color: var(--tree-menu-label-active-color); } } } @@ -101,6 +106,6 @@ &__toc { grid-row: 2; grid-column: 1 / span 2; - background-color: rgba($color-black, 0.25); + background-color: var(--tree-menu-toc-bg-color); } } diff --git a/sass/elements/_details.scss b/sass/elements/_details.scss index fde1f58320..2dc2ff4baf 100644 --- a/sass/elements/_details.scss +++ b/sass/elements/_details.scss @@ -1,24 +1,27 @@ details { $h-padding: 10px; - $border: 2px solid $subtitle-color; - // border: $border; border-radius: $border-radius; padding: 0 $h-padding; margin-block: 1em; - background-color: rgba($color-white, 0.1); + background-color: unquote("rgb(from var(--details-bg-color) r g b / 0.1)"); overflow: hidden; // prevent clobbering corner radii - & h1, & h2, & h3, & h4, & h5, & h6 { + & h1, + & h2, + & h3, + & h4, + & h5, + & h6 { margin: 0; display: inline; } - >summary { + > summary { cursor: pointer; // this should be the default padding-block: calc($h-padding/2); &:hover { - text-shadow: 0 0 0.9px $default-color, 0 0 0.9px $default-color; + text-shadow: 0 0 0.9px var(--details-text-shadow-color), 0 0 0.9px var(--details-text-shadow-color); } } @@ -27,47 +30,25 @@ details { // also, to avoid these styles, put the block in a
$big-blocks: ":is(pre.z-code, .callout)"; - >#{$big-blocks} { + > #{$big-blocks} { // push big blocks to the edge and remove their corners margin-inline: -$h-padding; padding-inline: $h-padding !important; border-radius: 0 !important; } - >summary+#{$big-blocks} { + > summary + #{$big-blocks} { // remove margin on leading... margin-top: 0; } - >#{$big-blocks}:last-child { + > #{$big-blocks}:last-child { // ...and trailing big blocks margin-bottom: 0; } - // tighten trailing

- >p:last-child { + > p:last-child { margin-bottom: $h-padding; } - - &.lowprofile { - border: none; - border-radius: 0; - background-color: transparent; - - >summary { - font-weight: normal; - } - - // since there's no background colour this looks normal - //

has it's own margin - :last-child { - margin-bottom: 0; - } - - &[open] { - border-left: $border; - padding-left: calc($h-padding - 2px); - } - } } diff --git a/sass/elements/_html.scss b/sass/elements/_html.scss index 9695f20e24..051d712d1e 100644 --- a/sass/elements/_html.scss +++ b/sass/elements/_html.scss @@ -1,9 +1,9 @@ html { - color: $default-color; + color: var(--html-text-color); color-scheme: dark; font-family: var(--font-family-sans); font-size: calc-rem($size-body-mobile); - background-color: $color-grey-900; + background-color: var(--html-bg-color); scroll-padding-top: var(--scroll-padding-top); * { diff --git a/sass/elements/_kbd.scss b/sass/elements/_kbd.scss index d7aa27164e..8e93b2658f 100644 --- a/sass/elements/_kbd.scss +++ b/sass/elements/_kbd.scss @@ -2,7 +2,7 @@ kbd { font-size: 0.8rem; padding: 0.1rem; line-height: 1; - border-color: grey; + border-color: var(--kbd-border-color); border-radius: 0.3rem; border-style: solid; border-width: 1px; diff --git a/sass/elements/_table.scss b/sass/elements/_table.scss index 28d5d176d2..d887454c00 100644 --- a/sass/elements/_table.scss +++ b/sass/elements/_table.scss @@ -1,31 +1,31 @@ table { border-spacing: 0; - border: 2px solid $subtitle-color; - border-radius: $border-radius; + border: 2px solid var(--table-border-color); + border-radius: var(--table-border-radius); } thead { - background-color: $color-grey-900; + background-color: var(--table-header-color); } tr td { padding: 0.5rem; - border-top: 2px solid $subtitle-color; + border-top: 2px solid var(--table-border-color); } tr td:not(:first-child) { - border-left: 2px solid $subtitle-color; + border-left: 2px solid var(--table-border-color); } table tr:first-child { - border-top-left-radius: $border-radius; - border-top-right-radius: $border-radius; - + border-top-left-radius: var(--table-border-radius); + border-top-right-radius: var(--table-border-radius); + th:first-child { - border-top-left-radius: $border-radius; + border-top-left-radius: var(--table-border-radius); } - + th:last-child { - border-top-right-radius: $border-radius; + border-top-right-radius: var(--table-border-radius); } } diff --git a/sass/pages/_assets.scss b/sass/pages/_assets.scss index f41f4ce20b..376efef096 100644 --- a/sass/pages/_assets.scss +++ b/sass/pages/_assets.scss @@ -38,14 +38,14 @@ .asset-version-select { border-radius: $border-radius; - border: 2px solid #383838; - background-color: $syntax-theme-background; - font-size: 1.0rem; - padding: .4rem; + border: 2px solid var(--asset-version-select-border-color); + background-color: var(--asset-version-select-bg-color); + font-size: 1rem; + padding: 0.4rem; + margin-left: 8px; &:hover { - background-color: $card-hover-background; - border: 2px solid #6b6b6b; + border: 2px solid var(--asset-version-select-border-hover-color); } .item-grid { @@ -69,14 +69,13 @@ .asset-version-select { border-radius: $border-radius; - border: 2px solid #383838; - background-color: $syntax-theme-background; - font-size: 1.0rem; - padding: .4rem; + border: 2px solid var(--asset-version-select-border-color); + background-color: var(--asset-version-select-bg-color); + font-size: 1rem; + padding: 0.4rem; &:hover { - background-color: $card-hover-background; - border: 2px solid #6b6b6b; + border: 2px solid var(--asset-version-select-bg-hover-color); } } } @@ -99,13 +98,14 @@ text-align: center; justify-content: center; align-items: center; - color: $default-color; + color: var(--asset-suggestion-item-text-color); height: 48px; &__img_wrapper { display: flex; align-items: center; - padding: $asset-card-padding 0px $asset-card-padding calc($asset-card-padding * 2); + padding: $asset-card-padding 0px $asset-card-padding + calc($asset-card-padding * 2); } &__text { diff --git a/sass/pages/_content.scss b/sass/pages/_content.scss index caf6991635..e072626473 100644 --- a/sass/pages/_content.scss +++ b/sass/pages/_content.scss @@ -5,7 +5,7 @@ $content-font-size: 1.22rem; font-size: $content-font-size; font-weight: 400; line-height: 1.43; - color: #d2d2d2; + color: var(--media-content-text-color); font-style: normal; text-decoration: none; word-break: break-word; @@ -55,29 +55,30 @@ $content-font-size: 1.22rem; a:link code { font-family: var(--font-family-mono); font-variant-ligatures: none; - color: #e4c151; + color: var(--media-content-link-code-color); font-style: normal; text-decoration: none; } + a:hover code { + background-color: var(--media-content-link-code-hover-bg-color); + } + code { font-family: var(--font-family-mono); font-variant-ligatures: none; font-size: 1.05rem; - color: #c8c8c8; - background-color: $syntax-theme-background; + color: var(--media-content-code-text-color); + background-color: var(--media-content-code-bg-color); border-radius: $border-radius; - padding-bottom: 3px; - padding-top: 3px; - padding-left: 8px; - padding-right: 8px; + padding: 3px 8px; text-decoration: none; } blockquote { font-size: 1.1rem; - color: #b1b1b1; - background-color: $syntax-theme-background; + color: var(--media-content-blockquote-text-color); + background-color: var(--media-content-blockquote-bg-color); border-radius: $border-radius; padding: 8px; margin: 0px; @@ -93,22 +94,17 @@ $content-font-size: 1.22rem; padding-left: 2.5rem; } - - a:hover code { - background-color: $syntax-theme-background-hover; - } - a.button { - color: $color-white; + color: var(--media-content-button-text-color); } a { text-decoration: none; - color: $link-color; + color: var(--media-content-link-color); } a:hover { - text-shadow: 0 0 0.9px $link-hover-shadow-color, 0 0 0.9px $link-hover-shadow-color; + text-shadow: 0 0 0.9px currentColor, 0 0 0.9px currentColor; } pre code { @@ -118,7 +114,3 @@ $content-font-size: 1.22rem; padding-right: 0px; } } - -.fun-list { - color: #a0c5e7; -} diff --git a/sass/pages/_docs.scss b/sass/pages/_docs.scss index 27e23bf7fe..c0517e3dfe 100644 --- a/sass/pages/_docs.scss +++ b/sass/pages/_docs.scss @@ -4,14 +4,6 @@ min-height: 500px; } -.docs-page-subtitle { - font-size: 1.3rem; - font-weight: 800; - color: #999999; - font-style: italic; - vertical-align: middle; -} - .docs-content { position: relative; width: 100%; @@ -39,7 +31,7 @@ } .docs-whats-a-bevy { - background-color: #00000000 !important; + filter: var(--docs-whats-a-bevy-filter); height: 2.4rem !important; border-radius: unset !important; } diff --git a/sass/pages/_donate.scss b/sass/pages/_donate.scss index f7bfa02724..4fb2e24d1b 100644 --- a/sass/pages/_donate.scss +++ b/sass/pages/_donate.scss @@ -2,13 +2,17 @@ div.donate-sponsor { position: absolute; bottom: 0.4rem; right: 0.8rem; + + svg { + margin-right: 4px; + } } .donate-page { font-size: 1.22rem; font-weight: 400; line-height: 1.43; - color: #d2d2d2; + color: var(--donate-text-color); font-style: normal; text-decoration: none; word-break: break-word; @@ -31,7 +35,7 @@ div.donate-sponsor { a:visited { text-decoration: none; - color: $link-color; + color: var(--donate-link-color); } } @@ -58,7 +62,7 @@ div.donate-sponsor { margin-top: 10px; font-size: 1.3rem; font-weight: 500; - color: rgb(200, 200, 200); + color: var(--donate-description-color); } .donate-header-padding { @@ -77,7 +81,7 @@ div.donate-sponsor { margin-bottom: 1rem; line-height: 40px; border-bottom-width: 4px; - border-bottom-color: $color-white; + border-bottom-color: var(--donate-metric-color); border-bottom-style: solid; } @@ -136,7 +140,7 @@ div.donate-sponsor { } .donate-level-corporate { - color: rgb(150, 150, 150); + color: var(--donate-level-corporate-color); font-weight: 500; font-size: 1.2rem; margin-top: -6px; @@ -156,36 +160,36 @@ div.donate-sponsor { .donate-level-amount { margin-top: -0.8rem; - color: #bababa; + color: var(--donate-level-amount-color); font-weight: 500; } .donate-level-bronze { - color: #9f7d6c; + color: var(--donate-level-bronze-color); } .donate-level-silver { - color: #bbb; + color: var(--donate-level-silver-color); } .donate-level-gold { - color: #c0b04bff; + color: var(--donate-level-gold-color); } .donate-level-platinum { - color: #c5c5c5; + color: var(--donate-level-platinum-color); } .donate-level-titanium { - color: #848484; + color: var(--donate-level-titanium-color); } .donate-level-diamond { - color: #a3daeb; + color: var(--donate-level-diamond-color); } .donate-level-patron { - color: #dcdcdc; + color: var(--donate-level-patron-color); } .donate-corporate-button { @@ -218,7 +222,7 @@ div.donate-sponsor { border-width: 1px; border-style: solid; border-radius: $border-radius; - color: rgb(150, 150, 150); + color: var(--donate-tier-reward-color); line-height: 1.4rem; padding-left: 8px; padding-right: 8px; diff --git a/sass/pages/_features.scss b/sass/pages/_features.scss index d414eb4f3e..ec4ac796e6 100644 --- a/sass/pages/_features.scss +++ b/sass/pages/_features.scss @@ -48,7 +48,7 @@ .feature-image { height: 24rem; - background-color: #2b2c2f; + background-color: var(--feature-image-bg-color); border-radius: 4rem; display: flex; align-items: center; @@ -123,7 +123,7 @@ } .platinum-sponsor-image { - height: 7.0rem; + height: 7rem; margin: 1rem; } diff --git a/sass/pages/_foundation.scss b/sass/pages/_foundation.scss index e35d073f91..dd10c1f4c6 100644 --- a/sass/pages/_foundation.scss +++ b/sass/pages/_foundation.scss @@ -7,6 +7,7 @@ max-width: 100%; margin-top: 2.2rem; margin-bottom: 0.8rem; + filter: var(--foundation-logo-filter); } .foundation-board-info { diff --git a/sass/pages/_migration_guide.scss b/sass/pages/_migration_guide.scss index 4acb2b5890..21de87dfe7 100644 --- a/sass/pages/_migration_guide.scss +++ b/sass/pages/_migration_guide.scss @@ -2,7 +2,7 @@ h1, h2, h3 { - color: #eee; + color: var(--migration-guide-title-color); } h2 { @@ -29,11 +29,11 @@ } hr { - $color: rgba(#fff, 0.05); + $color: "rgb(from var(--migration-guide-hr-color) r g b / 0.05)"; height: 1px; - color: $color; - background: $color; + color: unquote($color); + background: unquote($color); font-size: 0; border: 0; margin-block: 2rem; @@ -45,14 +45,14 @@ margin-top: 2rem; padding-top: 2rem; margin-bottom: 0.1rem; - border-top: solid darken($color-white, 60%) 1px; + border-top: solid var(--migration-guide-hr-color-legacy) 1px; } .migration-guide-area-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; - color: gray; + color: var(--migration-guide-legacy-area-tags-color); } .migration-guide-area-tag { diff --git a/sass/pages/_news.scss b/sass/pages/_news.scss index 2da5a54ff8..0b31422811 100644 --- a/sass/pages/_news.scss +++ b/sass/pages/_news.scss @@ -10,7 +10,7 @@ font-size: 1.22rem; font-weight: 200; font-style: italic; - color: $subtitle-color; + color: var(--news-subtitle-color); } .news-content { @@ -37,19 +37,23 @@ .news-social-link { font-size: 1.1rem; - color: $default-color; + color: var(--news-social-link-color); } .release-feature-authors { margin-top: -0.8rem !important; font-style: italic; - color: $subtitle-color; + color: var(--news-feature-authors-color); } .news-image-subtitle { - color: $subtitle-color; + color: var(--news-feature-image-subtitle); font-style: italic; - font-size: 1.0rem; + font-size: 1rem; margin-top: -0.3rem; text-align: center; } + +.fun-list { + color: var(--news-fun-list-color); +} diff --git a/sass/pages/_people.scss b/sass/pages/_people.scss index c560387c42..e2f39a9d20 100644 --- a/sass/pages/_people.scss +++ b/sass/pages/_people.scss @@ -54,28 +54,28 @@ } .people-role-inline { - font-size: 1.0rem; + font-size: 1rem; margin-right: 0.2rem; } .people-role-top-level { display: block; float: left; - font-size: 1.0rem; + font-size: 1rem; margin-right: 0.2rem; } .people-role-project-lead { - border-color: rgb(200, 200, 50); - color: rgb(200, 200, 50); + border-color: var(--people-role-lead-color); + color: var(--people-role-lead-color); } .people-role-maintainer { - border-color: rgb(242, 103, 255); - color: rgb(242, 103, 255); + border-color: var(--people-role-maintainer-color); + color: var(--people-role-maintainer-color); } .people-role-sme { - border-color: rgb(80, 200, 50); - color: rgb(80, 200, 50); + border-color: var(--people-role-sme-color); + color: var(--people-role-sme-color); } diff --git a/sass/site.scss b/sass/site.scss index 614683cfd4..e4cd932ae8 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -50,6 +50,7 @@ @import "components/pr-list"; @import "components/sponsors"; @import "components/syntax-theme"; +@import "components/themed-picture"; @import "components/tabs"; @import "components/tree-menu"; @import "components/asset-card"; diff --git a/static/assets/bevy_logo_dark-inverted.svg b/static/assets/bevy_logo_dark-inverted.svg new file mode 100644 index 0000000000..d899005b3c --- /dev/null +++ b/static/assets/bevy_logo_dark-inverted.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/on-this-page.js b/static/on-this-page.js index c6d0fee4a3..09d38a7e82 100644 --- a/static/on-this-page.js +++ b/static/on-this-page.js @@ -26,7 +26,7 @@ function otp_set_active(id_or_node){ } let headerHeight = getComputedStyle(document.body).getPropertyValue( - "--header-height" + "--layout-header-height" ); let otp_observer = new IntersectionObserver( diff --git a/templates/404.html b/templates/404.html index c315fc3c64..699d86d722 100644 --- a/templates/404.html +++ b/templates/404.html @@ -6,6 +6,7 @@

404

Bevy logo + height="130" + class="invertable">
{% endblock content %} diff --git a/templates/docs.html b/templates/docs.html index 27e0f8acc6..a18de5503c 100644 --- a/templates/docs.html +++ b/templates/docs.html @@ -2,6 +2,8 @@ {% import "macros/docs.html" as docs_macros %} {% import "macros/base.html" as base_macros %} +{% block theme %}light-mode{% endblock theme %} + {% block head_extensions %} {% set_global ancestor_is_public_draft = false %} @@ -93,9 +95,6 @@ {% endfor %}

{{ section_or_page.extra.long_title | default(value=section_or_page.title) | safe }} - {% if section_or_page.extra.subtitle %} - {{ section_or_page.extra.subtitle }} - {% endif %}

{{ section_or_page.content | safe }} diff --git a/templates/index.html b/templates/index.html index d9a1a607ac..6c3c498ff9 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,11 +6,22 @@ {% endblock head_extensions %} {% block content %}
- Bevy logo + + Bevy logo + Bevy logo +
A refreshingly simple data-driven game engine built in Rust
@@ -299,7 +310,23 @@

Free and Open Source

Ready to start building Bevy apps? Get started fast with The Quick Start Guide!
- Bevy logo + + Bevy logo + Bevy logo + + diff --git a/templates/layouts/base.html b/templates/layouts/base.html index 26e6568f48..093491b90f 100644 --- a/templates/layouts/base.html +++ b/templates/layouts/base.html @@ -76,7 +76,7 @@ {% set newline = " " %} - + @@ -112,11 +112,14 @@
{{ base_macros::page_header_message(section_or_page=section_or_page) }} @@ -128,11 +131,14 @@ data-page-menu-switch-state-container>
- +
diff --git a/templates/news-page.html b/templates/news-page.html index a5e47be23f..9010168da1 100644 --- a/templates/news-page.html +++ b/templates/news-page.html @@ -48,7 +48,7 @@

{% endif %}

{% if page.extra.image and page.extra.show_image %} -
+
{% if page.extra.image_subtitle %} {{ page.extra.image_subtitle }} {% else %}