diff --git a/TODOs.md b/TODOs.md new file mode 100644 index 0000000000..f06b5825a8 --- /dev/null +++ b/TODOs.md @@ -0,0 +1,38 @@ +TODOs for the light mode theme: + +- [x] Invert SVGs +- [x] Invert most images +- [x] Get body text legible +- [x] Get all text legible +- [x] Remove un-necessary `-inverted.svg` files +- [x] Fix images: + - [x] Hamburger menu + - [x] /404.html + - [x] news + - [x] news/introducing-bevy/ + - [x] and other instances of `bevy_logo_dark.svg`. + - [x] charts on ~~news/bevy-0-2/, 0-3/, 0-4/, 0-5/, 0-6/, 0-8/, 0-12/~~, + - [x] news/community-reflection-on-bevys-third-year/ + - [x] frontmatter + - Rather than individually addressing each image, I simply changed the CSS + - [ ] ~~bevy birthday~~ + - [ ] ~~scaling bevy~~ + - [ ] ~~webgpu.svg~~ + - [ ] ~~foundation~~ +- [x] Give the colors another pass; make it look good! + - [x] Donate page + - [x] Error/Warn/Info boxes + - [x] The rest! +- [x] Merge in from `main` +- [x] Check new pages: + - [x] Bevy fourth birthday + - [x] `contributing/` + - [x] Generate assets and look through those, too + - [x] generate_assets + - [x] generate_examples + - [x] generate_errors +- [ ] Update preview +- [ ] Theme toggle: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ + - [ ] Make MVP as separate project: Three-state Javascript toggle, defaults to dark, except without JS, defaults to prefers-system color scheme + - [ ] Retrofit into existing theme +- [ ] Ping BD103 on the PR once it's ready: diff --git a/content/news/2020-08-10-introducing-bevy/index.md b/content/news/2020-08-10-introducing-bevy/index.md index 16dedda3a6..2a6dd7bc04 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..3e09e611c5 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..4e07a11fbe 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..27d6d94e7a 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..9a0f8aae26 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..1e7458996a 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..e16a601426 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..28b2cef6d9 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..3be8660583 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..c61edd2983 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..a2de2f9ec1 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..ee77716df4 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..a7ea60d754 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..7c56ede463 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/_functions.scss b/sass/_functions.scss index d642f566a9..3ce7eba991 100644 --- a/sass/_functions.scss +++ b/sass/_functions.scss @@ -4,3 +4,7 @@ @function calc-rem($size) { @return math.div($size, $size-body) * 1rem; } + +@function color($color, $n) { + @return map-get(map-get($colors, $color), $n); +} 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 b7e9acdfab..7e00a45587 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -4,8 +4,9 @@ // Visual outline on focused elements, for accessibility *:focus-visible { - border-radius: 5px; - outline: $focus-outline; + border-radius: 4px; + outline: var(--focus-outline); + outline-offset: 4px; } .section { @@ -30,7 +31,7 @@ body:not(.show_drafts) .public_draft:not(.active_draft) { display: none !important; } -.public_draft>div>a { +.public_draft > div > a { color: #c8c864 !important; } @@ -45,12 +46,13 @@ 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; + font-weight: 300; + text-decoration: none; } -.public_draft>div>a { +.public_draft > div > a { color: #c8c864 !important; } diff --git a/sass/_vars.scss b/sass/_vars.scss index 5768a4ce95..8aa5b6bdb4 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; @@ -52,12 +32,77 @@ $mobile-menu-width: 300px; $content-top-margin: 30px; $border-radius: 10px; +// Colors +// Generated with the help of https://www.tints.dev +// TODO: We could just use CSS variables once "relative colors" has wider +// support (in 2025?). As this would allow us lighten/darken directly using CSS +// vars. See: https://caniuse.com/?search=relative%20colors and +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors +$color-white: #fff; +$color-black: #000; +$color-blue-link: #7c90ff; +$colors: ( + neutral: ( + 50: #efeff0, + 100: #dfdfe2, + 200: #bfbfc4, + 300: #8f8f98, + 400: #6f6f7a, + 500: #4e4e57, + 600: #39393e, + 700: #232326, + 800: #1e1e22, + 900: #0c0c0d, + 950: #050505, + ), + blue: ( + 50: #e8f2fc, + 100: #d4e6f7, + 200: #adcceb, + 300: #8ab3db, + 400: #6a99c8, + 500: #4b80b4, + 600: #456687, + 700: #2d4d6c, + 800: #1b334b, + 900: #0c1a27, + 950: #050d14, + ), +); + // CSS Vars :root { // Typography --font-family-sans: "Fira Sans", sans-serif; --font-family-mono: "Fira Mono", monospace; + // Colors + --color-black: #{$color-black}; + --color-white: #{$color-white}; + --color-blue-link: #{$color-blue-link}; + --color-neutral-50: #{color(neutral, 50)}; + --color-neutral-100: #{color(neutral, 100)}; + --color-neutral-200: #{color(neutral, 200)}; + --color-neutral-300: #{color(neutral, 300)}; + --color-neutral-400: #{color(neutral, 400)}; + --color-neutral-500: #{color(neutral, 500)}; + --color-neutral-600: #{color(neutral, 600)}; + --color-neutral-700: #{color(neutral, 700)}; + --color-neutral-800: #{color(neutral, 800)}; + --color-neutral-900: #{color(neutral, 900)}; + --color-neutral-950: #{color(neutral, 950)}; + --color-blue-50: #{color(blue, 50)}; + --color-blue-100: #{color(blue, 100)}; + --color-blue-200: #{color(blue, 200)}; + --color-blue-300: #{color(blue, 300)}; + --color-blue-400: #{color(blue, 400)}; + --color-blue-500: #{color(blue, 500)}; + --color-blue-600: #{color(blue, 600)}; + --color-blue-700: #{color(blue, 700)}; + --color-blue-800: #{color(blue, 800)}; + --color-blue-900: #{color(blue, 900)}; + --color-blue-950: #{color(blue, 950)}; + // Header --header-height: 60px; --scroll-padding-top: calc(var(--header-height) + 16px); @@ -65,7 +110,288 @@ $border-radius: 10px; @media #{$bp-desktop-up} { --header-height: 72px; } + + // Theme + // (shared between light and dark) + --header-bg-color: var(--color-neutral-800); + --table-border-radius: 4px; + + --image-compare-text-color: var(--color-neutral-100); + --image-compare-text-shadow: #{rgba($color-black, 0.75)}; + + --main-menu-active-color: var(--color-blue-200); + --main-menu-backdrop-color: #{rgba($color-black, 0.2)}; + --main-menu-link-hover-color: #{rgba($color-white, 0.05)}; + --main-menu-text-color: var(--color-white); + + // 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-500); + --content-bg-color: var(--color-neutral-700); + --docs-whats-a-bevy-filter: none; + --focus-outline: solid #{color(blue, 300)} 3px; + --footer-image-filter: grayscale(1) brightness(800%); + --foundation-logo-filter: none; + --header-border-color: #2c2c2d; + --heading-color: var(--color-neutral-50); + --hr-color: var(--color-neutral-900); + --html-bg-color: var(--color-neutral-800); + --link-color: var(--color-blue-link); + --scrollbar-thumb-color: #{rgba($color-white, 0.2)}; + --text-color: #d2d2d2; + --text-dim-color: var(--color-neutral-300); + + --asset-card-title-bg-color: #{rgba($color-black, 0.5)}; + --asset-card-title-color: var(--color-white); + --asset-tag-bg-color: var(--color-neutral-600); + --asset-tag-text-color: var(--color-white); + + --button-blue-bg-color: var(--color-blue-600); + --button-blue-bg-hover-color: #{darken(color(blue, 600), 3%)}; + --button-blue-border-color: var(--color-blue-400); + --button-blue-text-color: var(--color-white); + --button-pink-bg-color: #9f517a; + --button-pink-bg-hover-color: #954c72; + --button-pink-border-color: #ba789b; + --button-pink-text-color: var(--color-white); + + --callout-caution-accent-color: #e82f5a; + --callout-caution-bg-color: #591626; + --callout-caution-color: #eed5db; + --callout-info-accent-color: var(--color-blue-400); + --callout-info-bg-color: #2f2745; + --callout-info-color: var(--color-blue-100); + --callout-warning-accent-color: #e4c151; + --callout-warning-bg-color: #513903; + --callout-warning-color: #fdfdec; + + --card-bg-color: #{lighten(color(neutral, 700), 3%)}; + --card-bg-hover-color: #{lighten(color(neutral, 700), 6%)}; + --card-border-color: var(--color-neutral-600); + --card-border-hover-color: var(--color-neutral-500); + --card-bg-gradient-start-color: var(--color-neutral-600); + --card-bg-gradient-end-color: var(--color-neutral-800); + --card-img-bg-color: #{darken(color(neutral, 800), 2%)}; + + --code-bg-color: #{lighten(color(neutral, 700), 3%)}; + --code-bg-hover-color: #{lighten(color(neutral, 700), 6%)}; + --code-incorrect-border-color: red; + --code-link-color: #e4c151; + --code-text-color: var(--color-neutral-200); + --code-text-dim-color: var(--color-neutral-400); + + --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; + + --docs-footer-color: var(--color-neutral-300); + --docs-footer-dir-color: var(--color-neutral-400); + --docs-footer-dir-hover-color: var(--color-neutral-300); + --docs-footer-hover-color: var(--color-neutral-100); + --docs-footer-hover-bg-color: #{rgba($color-white, 0.01)}; + --docs-footer-border-color: var(--color-neutral-600); + + --example-nav-link-color: var(--color-neutral-100); + --example-nav-link-hover-color: var(--color-white); + + --menu-switch-bg-color: #{rgba($color-white, 0.05)}; + --menu-switch-option-active-bg-color: var(--color-neutral-800); + --menu-switch-option-active-text-color: var(--color-white); + --menu-switch-option-text-color: var(--color-neutral-300); + + --on-this-page-color: var(--color-neutral-300); + --on-this-page-hover-color: var(--color-white); + --on-this-page-active-color: var(--color-white); + + --table-border-color: var(--color-neutral-500); + --table-header-color: var(--color-neutral-800); + --table-header-text-color: var(--heading-color); + + --tree-menu-chevron-filter: brightness(70%); + --tree-menu-label-active-bg-color: var(--color-neutral-600); + --tree-menu-label-active-color: var(--color-white); + --tree-menu-label-color: var(--color-neutral-300); + --tree-menu-toc-bg-color: #{darken(color(neutral, 600), 5%)}; + --tree-menu-toggle-hover-color: var(--color-neutral-500); + + .inverted { + } } -// 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) { + --anchor-link-color: var(--color-neutral-200); + --content-bg-color: #{darken($color-white, 3%)}; + --docs-whats-a-bevy-filter: invert(85%); + --focus-outline: solid #{color(blue, 500)} 3px; + --footer-image-filter: grayscale(1) brightness(0%); + --foundation-logo-filter: invert(80%); + --header-border-color: var(--color-neutral-400); + --heading-color: var(--color-neutral-950); + --hr-color: var(--color-neutral-100); + --html-bg-color: var(--color-neutral-100); + --link-color: #4a33d9; + --scrollbar-thumb-color: #{rgba($color-black, 0.2)}; + --text-color: var(--color-neutral-700); + --text-dim-color: var(--color-neutral-400); + + --asset-card-title-bg-color: #{rgba($color-white, 0.7)}; + --asset-card-title-color: var(--color-black); + --asset-tag-bg-color: var(--color-neutral-100); + --asset-tag-text-color: var(--color-neutral-600); + + --button-blue-bg-color: var(--color-blue-600); + --button-blue-bg-hover-color: #{darken(color(blue, 600), 3%)}; + --button-blue-border-color: var(--color-blue-400); + --button-blue-text-color: var(--color-white); + --button-pink-bg-color: #9f517a; + --button-pink-bg-hover-color: #954c72; + --button-pink-border-color: #ba789b; + --button-pink-text-color: var(--color-white); + + --callout-caution-accent-color: #ed0c41; + --callout-caution-bg-color: #fccad5; + --callout-caution-color: #2a0109; + --callout-info-accent-color: var(--color-blue-400); + --callout-info-bg-color: var(--color-blue-100); + --callout-info-color: #040126; + --callout-warning-accent-color: #f0d106; + --callout-warning-bg-color: #fdedc9; + --callout-warning-color: #362a02; + + --card-bg-color: var(--color-white); + --card-bg-hover-color: #{darken($color-white, 3%)}; + --card-border-color: var(--color-neutral-100); + --card-border-hover-color: var(--color-neutral-200); + --card-bg-gradient-start-color: var(--color-neutral-200); + --card-bg-gradient-end-color: var(--color-neutral-300); + --card-img-bg-color: var(--color-neutral-700); + + --code-bg-color: #{darken(color(neutral, 50), 3%)}; + --code-bg-hover-color: #{darken(color(neutral, 50), 6%)}; + --code-incorrect-border-color: red; + --code-link-color: #d58c00; + --code-text-color: var(--color-neutral-900); + --code-text-dim-color: var(--color-neutral-300); + + --code-aaa: #5078a4; + --code-ccc: #b45eb4; + --code-ddd: #498bcc; + --code-eee: #d49d06; + --code-fff: #eff1f5; + --code-ggg: #d67b3e; + --code-hhh: #6e91b5; + --code-iii: #ae3698; + --code-jjj: #6eba2c; + --code-kkk: #e0858d; + --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: #d0721a; + --code-zzz: #df9754; + + --docs-footer-border-color: var(--color-neutral-100); + --docs-footer-color: var(--color-neutral-600); + --docs-footer-dir-color: var(--color-neutral-400); + --docs-footer-dir-hover-color: var(--color-neutral-500); + --docs-footer-hover-bg-color: #{rgba($color-black, 0.02)}; + --docs-footer-hover-color: var(--color-black); + + --example-nav-link-color: var(--color-neutral-400); + --example-nav-link-hover-color: var(--color-black); + + @media #{$bp-tablet-landscape-down} { + --main-menu-active-color: var(--color-blue-600); + --main-menu-link-hover-color: #{rgba($color-black, 0.03)}; + --main-menu-text-color: var(--color-neutral-500); + } + + --menu-switch-bg-color: var(--color-neutral-100); + --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-500); + + --on-this-page-color: var(--color-neutral-300); + --on-this-page-hover-color: var(--color-black); + --on-this-page-active-color: var(--color-black); + + --table-border-color: var(--color-neutral-300); + --table-header-color: var(--color-neutral-200); + --table-header-text-color: var(--heading-color); + + --tree-menu-chevron-filter: invert(65%); + --tree-menu-label-active-bg-color: var(--color-neutral-100); + --tree-menu-label-active-color: var(--color-black); + --tree-menu-label-color: var(--color-neutral-600); + --tree-menu-toc-bg-color: #{lighten(color(neutral, 100), 5%)}; + --tree-menu-toggle-hover-color: var(--color-neutral-200); + + .inverted { + 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-700); + border-radius: $border-radius; + } + } + + .news-image-subtitle { + color: var(--color-white); + + a { + &, + &:focus, + &:hover, + &:active &:link, + &:visited { + color: var(--color-blue-300) !important; + } + } + } + } +} diff --git a/sass/components/_asset-card.scss b/sass/components/_asset-card.scss index d63ecbcd2b..4200729584 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(--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(--card-bg-gradient-start-color) 0%, + var(--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(--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 { @@ -99,17 +102,18 @@ $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); + padding: 0.2em 0.4em; + border-radius: 0.2em; + font-size: 0.85em; + color: var(--asset-tag-text-color); + background: var(--asset-tag-bg-color); &--supported { background-color: rgb(110, 110, 247); diff --git a/sass/components/_button-square.scss b/sass/components/_button-square.scss index 292e0c8f1d..3737bddcdf 100644 --- a/sass/components/_button-square.scss +++ b/sass/components/_button-square.scss @@ -6,14 +6,9 @@ &:hover { &:before { - $padding: 8px; - content: ""; position: absolute; - top: $padding; - right: $padding; - bottom: $padding; - left: $padding; + inset: 8px; background-color: rgba($color-white, 0.05); border-radius: $border-radius; } 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 dc5e18f191..7c531bda64 100644 --- a/sass/components/_callout.scss +++ b/sass/components/_callout.scss @@ -6,30 +6,30 @@ 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; } &, &--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..25c6354690 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: #b13376; } .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,11 +62,11 @@ } .card-text-dense { - line-height: 1.0rem; + line-height: 1rem; } .card-text-dense { - line-height: 1.0rem; + line-height: 1rem; } .card-subtitle { @@ -74,7 +74,7 @@ font-weight: 200; font-size: 1.4rem; font-style: italic; - color: $subtitle-color; + color: var(--text-dim-color); text-decoration: none; } @@ -83,7 +83,7 @@ position: relative; font-weight: 300; font-size: 1.3rem; - color: $default-color; + color: var(--text-color); text-decoration: none; margin-top: 0.4rem; overflow: hidden; @@ -94,8 +94,8 @@ .card-title { display: block; font-weight: 500; - font-size: 2.0rem; - color: $default-color; + font-size: 2rem; + color: var(--text-color); font-style: normal; text-decoration: none; } diff --git a/sass/components/_docs-footer.scss b/sass/components/_docs-footer.scss index 9ce5d7d434..aa84fdb908 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-color); } &:hover { - color: lighten($secondary-text-color, 20%); + color: var(--docs-footer-hover-color); } .icon { diff --git a/sass/components/_example.scss b/sass/components/_example.scss index 5f31eb3bd8..f70361a81f 100644 --- a/sass/components/_example.scss +++ b/sass/components/_example.scss @@ -9,8 +9,7 @@ grid-template-columns: 1fr 1fr; grid-template-areas: "title title" - "back github" - ; + "back github"; @media #{$bp-tablet-portrait-up} { margin: 24px 0 8px; @@ -31,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 262493137d..fd31f049bb 100644 --- a/sass/components/_footer.scss +++ b/sass/components/_footer.scss @@ -9,7 +9,7 @@ &__social { img { - filter: grayscale(1) brightness(800%); + filter: var(--footer-image-filter); &:hover { scale: 110%; } diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 078557c9c5..483486500d 100644 --- a/sass/components/_header.scss +++ b/sass/components/_header.scss @@ -81,7 +81,7 @@ } &:hover { - filter: brightness(80%) + filter: brightness(80%); } } } diff --git a/sass/components/_image_compare.scss b/sass/components/_image_compare.scss index dcdd719b19..66908b2cf1 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(--color-white); // gap color; position: relative; border-radius: 10px; width: 100%; - outline: solid 1px $color-grey-900; // fixes border leaking background color + outline: solid 1px var(--color-neutral-900); // fixes border leaking background color outline-offset: -1px; // calculated @@ -32,7 +32,8 @@ 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 4px var(--image-compare-text-shadow); + color: var(--image-compare-text-color); } &::before { @@ -90,13 +91,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(--color-white); outline-offset: -2.9px; - background-color: darken($color-white, 40%); + background-color: var(--color-neutral-600); &:hover, &:active { - background-color: darken($color-white, 20%); + background-color: var(--color-neutral-500); } } diff --git a/sass/components/_layout.scss b/sass/components/_layout.scss index dd9d6b1164..f0c5d00c2b 100644 --- a/sass/components/_layout.scss +++ b/sass/components/_layout.scss @@ -8,8 +8,8 @@ top: 0px; width: 100%; height: var(--header-height); - background-color: $color-grey-900; - border-bottom: 2px solid #2c2c2d; + background-color: var(--header-bg-color); + border-bottom: 2px solid var(--header-border-color); z-index: $z-layout-header; } @@ -18,7 +18,7 @@ padding-top: var(--header-height); padding-bottom: 64px; flex-grow: 1; - background-color: $color-grey-800; + background-color: var(--content-bg-color); } } diff --git a/sass/components/_link-card.scss b/sass/components/_link-card.scss index fc915c1451..bd9673da7e 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(--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(--heading-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(--text-color); } &__description { margin: 0.4rem 0 0; font-size: 1.3rem; font-weight: 300; - color: $default-color; + color: var(--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..1e0231e47a 100644 --- a/sass/components/_main-menu.scss +++ b/sass/components/_main-menu.scss @@ -12,8 +12,6 @@ &__link { @include flex-center; - $color-blue: #b1d9ff; - position: relative; height: var(--header-height); font-size: 1.3rem; @@ -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); } } @@ -47,8 +44,9 @@ // Instead we have the outline on the text inside the link &:focus-visible span { - border-radius: 5px; - outline: $focus-outline; + border-radius: 4px; + outline: var(--focus-outline); + outline-offset: 4px; } } } @@ -67,10 +65,10 @@ width: $mobile-menu-width; bottom: -$bottom-buffer; padding-bottom: $bottom-buffer; - background-color: $color-grey-900; + background-color: var(--color-neutral-800); 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); @@ -88,8 +86,8 @@ justify-content: space-between; padding-left: $padding; height: var(--header-height); - background-color: $color-grey-800; - border-bottom: 2px solid #313131; + background-color: var(--header-bg-color); + border-bottom: 2px solid var(--header-border-color); a { display: flex; @@ -105,7 +103,9 @@ &__content { position: relative; - height: calc(100% - var(--header-height) - var(--main-menu-switch-height)); + height: calc( + 100% - var(--header-height) - var(--main-menu-switch-height) + ); overflow-x: hidden; } @@ -135,7 +135,7 @@ } &__link:hover { - background-color: rgba($color-white, 0.05); + background-color: var(--main-menu-link-hover-color); border-radius: $border-radius; } } @@ -143,7 +143,7 @@ @include state-checked("mobile-menu") { .main-menu { transform: translateX($mobile-menu-width); - opacity: 1.0; + opacity: 1; } } @@ -163,7 +163,6 @@ // MODE: Desktop Menu @media #{$bp-desktop-up} { .main-menu { - &__header, &__page-menu-switch, &__page-menu, 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/_sponsors.scss b/sass/components/_sponsors.scss index 2885b61097..0ddd750a80 100644 --- a/sass/components/_sponsors.scss +++ b/sass/components/_sponsors.scss @@ -3,6 +3,26 @@ max-width: 900px; margin: 0 auto; + &--corporate_platinum, + &--corporate_bronze, + &--diamond, + &--titanium { + background-color: var(--color-neutral-700); + border-radius: 8px; + padding: 24px 24px 8px; + + .sponsors { + &__title { + color: var(--color-neutral-100); + margin: 0 0 16px; + } + + &__name { + color: var(--color-blue-link); + } + } + } + &:not(:last-child) { margin-bottom: 56px; } @@ -38,54 +58,55 @@ 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(--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: rgb(150, 150, 150); + } - &__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: rgb(150, 150, 150); } diff --git a/sass/components/_syntax-theme.scss b/sass/components/_syntax-theme.scss index c0f2c9f19c..6f5815dedb 100644 --- a/sass/components/_syntax-theme.scss +++ b/sass/components/_syntax-theme.scss @@ -1,52 +1,54 @@ .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; + $incorrect_block_background_color: #481e21; + position: relative; + background-color: $incorrect_block_background_color; + border-left: 10px solid darkred; + border-radius: 10px; + padding-right: 55px; + + .z-code, + .z-code code { background-color: $incorrect_block_background_color; - border-left: 10px solid darkred; - border-radius: 10px; - padding-right: 55px; - - .z-code, - .z-code code { - background-color: $incorrect_block_background_color; - } + } } div.incorrect:hover { - border-color: red; + border-color: var(--code-incorrect-border-color); - img { - /* SVG filter color for red */ - filter: invert(10%) sepia(85%) saturate(7491%) hue-rotate(5deg) brightness(116%) contrast(114%); - } + img { + /* SVG filter color for red */ + filter: invert(10%) sepia(85%) saturate(7491%) hue-rotate(5deg) + brightness(116%) contrast(114%); + } } 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; + /* SVG filter color for firebrick red */ + filter: invert(11%) sepia(57%) saturate(5143%) hue-rotate(350deg) + brightness(118%) contrast(87%); + } } .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 +57,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 +266,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/_themed-picture.scss b/sass/components/_themed-picture.scss new file mode 100644 index 0000000000..a6dd6bf335 --- /dev/null +++ b/sass/components/_themed-picture.scss @@ -0,0 +1,26 @@ +// 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: initial; + } +} + +.light-mode { + .themed-picture { + &__light { + display: initial; + } + + &__dark { + display: none !important; + } + } +} diff --git a/sass/components/_tree-menu.scss b/sass/components/_tree-menu.scss index d65333bf87..8e7d1bdd92 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..ffcb95a0ff 100644 --- a/sass/elements/_details.scss +++ b/sass/elements/_details.scss @@ -1,25 +1,24 @@ 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: rgba(var(--color-white), 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; - } } // these styles are noncritical so the 2.4% without `:is` will be fine @@ -27,47 +26,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..4bbd34a5ea 100644 --- a/sass/elements/_html.scss +++ b/sass/elements/_html.scss @@ -1,9 +1,9 @@ html { - color: $default-color; + color: var(--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/_table.scss b/sass/elements/_table.scss index 28d5d176d2..c62573e7a1 100644 --- a/sass/elements/_table.scss +++ b/sass/elements/_table.scss @@ -1,31 +1,32 @@ 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); + color: var(--table-header-text-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..5d953d5478 100644 --- a/sass/pages/_assets.scss +++ b/sass/pages/_assets.scss @@ -29,6 +29,7 @@ font-size: 1.2rem; padding: $asset-card-padding; width: 100%; + color: var(--text-color); &:focus-visible { outline: none; @@ -39,12 +40,13 @@ .asset-version-select { border-radius: $border-radius; border: 2px solid #383838; - background-color: $syntax-theme-background; - font-size: 1.0rem; - padding: .4rem; + background-color: var(--code-bg-color); + font-size: 1rem; + padding: 0.4rem; + color: var(--text-color); + margin-left: 8px; &:hover { - background-color: $card-hover-background; border: 2px solid #6b6b6b; } @@ -70,12 +72,11 @@ .asset-version-select { border-radius: $border-radius; border: 2px solid #383838; - background-color: $syntax-theme-background; - font-size: 1.0rem; - padding: .4rem; + background-color: var(--code-bg-color); + font-size: 1rem; + padding: 0.4rem; &:hover { - background-color: $card-hover-background; border: 2px solid #6b6b6b; } } @@ -99,13 +100,14 @@ text-align: center; justify-content: center; align-items: center; - color: $default-color; + color: var(--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..91cc751a33 100644 --- a/sass/pages/_content.scss +++ b/sass/pages/_content.scss @@ -5,11 +5,16 @@ $content-font-size: 1.22rem; font-size: $content-font-size; font-weight: 400; line-height: 1.43; - color: #d2d2d2; + color: var(--text-color); font-style: normal; text-decoration: none; word-break: break-word; + h2, + h3 { + color: var(--heading-color); + } + h2 { margin-top: 2.2rem; margin-bottom: 0.5rem; @@ -55,7 +60,7 @@ $content-font-size: 1.22rem; a:link code { font-family: var(--font-family-mono); font-variant-ligatures: none; - color: #e4c151; + color: var(--code-link-color); font-style: normal; text-decoration: none; } @@ -64,20 +69,18 @@ $content-font-size: 1.22rem; font-family: var(--font-family-mono); font-variant-ligatures: none; font-size: 1.05rem; - color: #c8c8c8; - background-color: $syntax-theme-background; - border-radius: $border-radius; - padding-bottom: 3px; - padding-top: 3px; - padding-left: 8px; - padding-right: 8px; + color: var(--code-text-color); + background-color: var(--code-bg-color); + border-radius: 4px; + padding-block: 2px; + padding-inline: 6px; text-decoration: none; } blockquote { font-size: 1.1rem; - color: #b1b1b1; - background-color: $syntax-theme-background; + color: var(--text-dim-color); + background-color: var(--code-bg-color); border-radius: $border-radius; padding: 8px; margin: 0px; @@ -93,23 +96,23 @@ $content-font-size: 1.22rem; padding-left: 2.5rem; } - a:hover code { - background-color: $syntax-theme-background-hover; + background-color: var(--code-bg-hover-color); } a.button { - color: $color-white; + color: var(--color-white); } a { text-decoration: none; - color: $link-color; + color: var(--link-color); } - a:hover { - text-shadow: 0 0 0.9px $link-hover-shadow-color, 0 0 0.9px $link-hover-shadow-color; - } + // a:hover { + // text-shadow: 0 0 0.9px var(--link-hover-shadow-color), + // 0 0 0.9px var(--link-hover-shadow-color); + // } pre code { padding-bottom: 0px; diff --git a/sass/pages/_docs.scss b/sass/pages/_docs.scss index 27e23bf7fe..02c7defa69 100644 --- a/sass/pages/_docs.scss +++ b/sass/pages/_docs.scss @@ -17,6 +17,12 @@ width: 100%; min-width: 0; + h1, + h2, + h3 { + color: var(--heading-color); + } + h1 { font-size: 2.4rem; margin: 0 0 16px; @@ -39,7 +45,8 @@ } .docs-whats-a-bevy { - background-color: #00000000 !important; + 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 fd795607f6..04c4772008 100644 --- a/sass/pages/_donate.scss +++ b/sass/pages/_donate.scss @@ -2,238 +2,243 @@ 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; - font-style: normal; - text-decoration: none; - word-break: break-word; - - h2 { - text-align: center; - margin-top: 2.2rem; - margin-bottom: 0.5rem; - font-size: 2.2rem; - } + font-size: 1.22rem; + font-weight: 400; + line-height: 1.43; + color: var(--text-color); + font-style: normal; + text-decoration: none; + word-break: break-word; + + h2 { + text-align: center; + margin-top: 2.2rem; + margin-bottom: 0.5rem; + font-size: 2.2rem; + } - h3 { - font-size: 1.5rem; - margin-bottom: 1rem; - } + h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + } - a { - text-decoration: none; - } + a { + text-decoration: none; + } - a:visited { - text-decoration: none; - color: $link-color; - } + a:visited { + text-decoration: none; + color: var(--link-color); + } } .donate-support { - display: flex; - flex-direction: row; - justify-content: space-around; - flex-wrap: wrap; - max-width: 1100px; - margin: auto; - margin-top: 5rem; + display: flex; + flex-direction: row; + justify-content: space-around; + flex-wrap: wrap; + max-width: 1100px; + margin: auto; + margin-top: 5rem; } .donate-support-text { - width: 500px; + width: 500px; } .donate-support-bevy { - font-weight: 900; - font-size: 5rem; + font-weight: 900; + font-size: 5rem; } .donate-support-description { - margin-top: 10px; - font-size: 1.3rem; - font-weight: 500; - color: rgb(200, 200, 200); + margin-top: 10px; + font-size: 1.3rem; + font-weight: 500; + color: var(--color-white); } .donate-header-padding { - padding-top: 9rem; + padding-top: 9rem; } .donate-metrics { - height: 200px; - width: 400px; - margin-top: 30px; + height: 200px; + width: 400px; + margin-top: 30px; } .donate-metric { - float: right; - clear: right; - margin-bottom: 1rem; - line-height: 40px; - border-bottom-width: 4px; - border-bottom-color: $color-white; - border-bottom-style: solid; + float: right; + clear: right; + margin-bottom: 1rem; + line-height: 40px; + border-bottom-width: 4px; + border-bottom-color: var(--color-white); + border-bottom-style: solid; } .donate-number { - font-size: 4rem; - font-weight: 900; + font-size: 4rem; + font-weight: 900; } .donate-number-label { - display: inline-block; - font-size: 2rem; - font-weight: 400; - width: 160px; - text-align: right; + display: inline-block; + font-size: 2rem; + font-weight: 400; + width: 160px; + text-align: right; } .donate-membership-description { - margin: auto; - text-align: center; - font-size: 1.2rem; - max-width: 850px; - margin-bottom: 20px; + margin: auto; + text-align: center; + font-size: 1.2rem; + max-width: 850px; + margin-bottom: 20px; } .donate-levels-container { - margin: auto; - max-width: 850px; + margin: auto; + max-width: 850px; } .donate-membership-levels { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - gap: 5px; + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 5px; } .donate-level { - display: flex; - position: relative; - width: 280px; - height: 134px; + display: flex; + position: relative; + width: 280px; + height: 134px; + background-color: var(--code-bg-color); - &:hover { - text-shadow: none !important; - } + &:hover { + text-shadow: none !important; + } } .donate-level-info { - margin-top: 8px; - margin-left: 14px; + margin-top: 8px; + margin-left: 14px; } .donate-level-icon { - width: 70px; - float: left; + width: 70px; + float: left; } .donate-level-corporate { - color: rgb(150, 150, 150); - font-weight: 500; - font-size: 1.2rem; - margin-top: -6px; - margin-bottom: -12px; + color: rgb(150, 150, 150); + font-weight: 500; + font-size: 1.2rem; + margin-top: -6px; + margin-bottom: -12px; } .donate-level-text { - margin-top: 4px; - margin-left: 15px; - float: left; + margin-top: 4px; + margin-left: 15px; + float: left; } .donate-level-name { - font-weight: 900; - font-size: 2.5rem; + font-weight: 900; + font-size: 2.5rem; } .donate-level-amount { - margin-top: -0.8rem; - color: #bababa; - font-weight: 500; + margin-top: -0.8rem; + color: #bababa; + font-weight: 500; } .donate-level-bronze { - color: #9f7d6c; + color: #9f7d6c; } .donate-level-silver { - color: #bbb; + color: #bbb; } .donate-level-gold { - color: #c0b04bff; + color: #c0b04bff; } .donate-level-platinum { - color: #c5c5c5; + color: #c5c5c5; } .donate-level-titanium { - color: #848484; + color: #848484; } .donate-level-diamond { - color: #a3daeb; + color: #a3daeb; } .donate-level-patron { - color: #dcdcdc; + color: #dcdcdc; } .donate-corporate-button { - display: block; - margin-top: 1rem; - margin: auto; - text-align: center; - align-self: center; - padding-top: 4px; - margin-top: 10px; - width: 200px; - height: 40px; + display: block; + margin-top: 1rem; + margin: auto; + text-align: center; + align-self: center; + padding-top: 4px; + margin-top: 10px; + width: 200px; + height: 40px; } .tier-rewards { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - column-gap: 8px; - position: absolute; - width: 100%; - height: 30px; - bottom: 3px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + column-gap: 8px; + position: absolute; + width: 100%; + height: 30px; + bottom: 3px; } .tier-reward { - height: 20px; - font-size: 0.9rem; - border-width: 1px; - border-style: solid; - border-radius: $border-radius; - color: rgb(150, 150, 150); - line-height: 1.4rem; - padding-left: 8px; - padding-right: 8px; - height: 24px; + height: 20px; + font-size: 0.9rem; + border-width: 1px; + border-style: solid; + border-radius: $border-radius; + color: rgb(150, 150, 150); + line-height: 1.4rem; + padding-left: 8px; + padding-right: 8px; + height: 24px; } .credits-text { - text-align: center; - width: 75%; - margin: auto; - font-size: 1.3rem; + text-align: center; + width: 75%; + margin: auto; + font-size: 1.3rem; } .donate-faq-link { - font-size: 1.4rem; - text-align: center; - margin-top: 4rem; + font-size: 1.4rem; + text-align: center; + margin-top: 4rem; } diff --git a/sass/pages/_features.scss b/sass/pages/_features.scss index d414eb4f3e..27ec6163c9 100644 --- a/sass/pages/_features.scss +++ b/sass/pages/_features.scss @@ -37,6 +37,7 @@ } .feature-title { + color: var(--heading-color); font-size: 2.1rem; margin-top: 0; margin-bottom: 0.3rem; @@ -123,7 +124,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 a42cef3f13..5d0b798ae5 100644 --- a/sass/pages/_migration_guide.scss +++ b/sass/pages/_migration_guide.scss @@ -1,6 +1,8 @@ .migration-guide { - h1, h2, h3 { - color: #eee; + h1, + h2, + h3 { + color: var(--heading-color); } h2 { @@ -19,9 +21,9 @@ } h3 { - margin-block: 2rem .5rem; + margin-block: 2rem 0.5rem; padding-top: 2rem; - border-top: solid rgba(#fff, 0.05) 1px; + border-top: solid var(--hr-color) 1px; } } @@ -43,7 +45,7 @@ border-radius: 0.2rem; border-style: solid; border-width: 1px; - color: #888; + color: var(--color-neutral-300); } } @@ -52,14 +54,14 @@ margin-top: 2rem; padding-top: 2rem; margin-bottom: 0.1rem; - border-top: solid darken($color-white, 60%) 1px; + border-top: solid var(--hr-color) 1px; } .migration-guide-area-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; - color: gray; + color: var(--color-neutral-300); } .migration-guide-area-tag { diff --git a/sass/pages/_news.scss b/sass/pages/_news.scss index 5b8d761bef..b9a20bf98c 100644 --- a/sass/pages/_news.scss +++ b/sass/pages/_news.scss @@ -1,4 +1,5 @@ .news-title { + color: var(--heading-color); font-size: 2.8rem; font-weight: 800; margin-bottom: 0px; @@ -10,7 +11,7 @@ font-size: 1.22rem; font-weight: 200; font-style: italic; - color: $subtitle-color; + color: var(--text-dim-color); } .news-content { @@ -37,13 +38,13 @@ .news-social-link { font-size: 1.1rem; - color: $default-color; + color: var(--text-color); } .release-feature-authors { margin-top: -0.8rem !important; font-style: italic; - color: $subtitle-color; + color: var(--text-dim-color); } .release-feature-meta { @@ -63,9 +64,9 @@ } .news-image-subtitle { - color: $subtitle-color; + color: var(--text-dim-color); font-style: italic; - font-size: 1.0rem; + font-size: 1rem; margin-top: -0.3rem; text-align: center; } diff --git a/sass/site.scss b/sass/site.scss index 1aa47aa9b8..c61bf7874f 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -49,6 +49,7 @@ @import "components/pr-list"; @import "components/sponsors"; @import "components/syntax-theme"; +@import "components/themed-picture"; @import "components/tree-menu"; @import "components/asset-card"; @import "components/image_compare"; 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/templates/404.html b/templates/404.html index c315fc3c64..ec8d97d7eb 100644 --- a/templates/404.html +++ b/templates/404.html @@ -6,6 +6,7 @@

404

Bevy logo + height="130" + class="inverted">
{% endblock content %} diff --git a/templates/docs.html b/templates/docs.html index 27e0f8acc6..09139ca174 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 %} 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 ca249d83d4..2e0155b892 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 %}