From e31fa1acd2f85ee4a55603d6c4e9798d7e402224 Mon Sep 17 00:00:00 2001 From: RomainMazB Date: Thu, 14 May 2026 12:40:03 +0200 Subject: [PATCH 1/3] First draw of homepage latest news block --- .../index.md | 1 + content/news/2025-09-30-bevy-0.17/index.md | 1 + content/news/2026-01-13-bevy-0.18/index.md | 1 + sass/pages/_news.scss | 124 +++++++++++++++++- templates/index.html | 24 ++++ 5 files changed, 149 insertions(+), 2 deletions(-) diff --git a/content/news/2025-09-15-community-reflection-on-bevys-fifth-year/index.md b/content/news/2025-09-15-community-reflection-on-bevys-fifth-year/index.md index da62e4590b..d802006631 100644 --- a/content/news/2025-09-15-community-reflection-on-bevys-fifth-year/index.md +++ b/content/news/2025-09-15-community-reflection-on-bevys-fifth-year/index.md @@ -8,6 +8,7 @@ youtube = "cartdev" image = "5th_birthday_reflections.svg" padded_list_image = true show_image = true +short_excerpt = "A collection of community reflections celebrating Bevy’s fifth year, its progress, challenges, and hopes for what comes next." +++ [@cart](https://bsky.app/profile/cart.work) here (Bevy's creator and Project Lead) with another update! A month ago was Bevy's Fifth Birthday! As is tradition, I took that as a chance to reflect on the past year and outline my hopes and dreams for the future. You can read that in my [Bevy's Fifth Birthday](/news/bevys-fifth-birthday) post. diff --git a/content/news/2025-09-30-bevy-0.17/index.md b/content/news/2025-09-30-bevy-0.17/index.md index c380bcaab9..6188fb01dd 100644 --- a/content/news/2025-09-30-bevy-0.17/index.md +++ b/content/news/2025-09-30-bevy-0.17/index.md @@ -6,6 +6,7 @@ image = "cover.jpg" show_image = true image_subtitle = "A factory from Exofactory, an in-development factory builder made with Bevy" image_subtitle_link = "https://store.steampowered.com/app/3615720/Exofactory/" +short_excerpt = "Experimental raytraced lighting, cleaner events, richer UI tools, hot patching, DLSS, and faster rendering headline this release." +++ Thanks to **278** contributors, **1311** pull requests, community reviewers, and our [**generous donors**](/donate), we're happy to announce the **Bevy 0.17** release on [crates.io](https://crates.io/crates/bevy)! diff --git a/content/news/2026-01-13-bevy-0.18/index.md b/content/news/2026-01-13-bevy-0.18/index.md index f6ccda5a05..628613d031 100644 --- a/content/news/2026-01-13-bevy-0.18/index.md +++ b/content/news/2026-01-13-bevy-0.18/index.md @@ -6,6 +6,7 @@ show_image = true image = "toroban.jpg" image_subtitle = "Toroban: an infinitely wrapping puzzle game built in Bevy. Out now!" image_subtitle_link = "https://store.steampowered.com/app/1961850/Toroban/" +short_excerpt = "Improved rendering, richer UI tools, customizable atmospheres, and smoother developer workflows headline this release." +++ Thanks to **174** contributors, **659** pull requests, community reviewers, and our [**generous donors**](/donate), we're happy to announce the **Bevy 0.18** release on [crates.io](https://crates.io/crates/bevy)! diff --git a/sass/pages/_news.scss b/sass/pages/_news.scss index 0b31422811..3d428afbc9 100644 --- a/sass/pages/_news.scss +++ b/sass/pages/_news.scss @@ -1,3 +1,5 @@ +@use '../vars'; + .news-title { font-size: 2.8rem; font-weight: 800; @@ -15,12 +17,12 @@ .news-content { img { - border-radius: $border-radius; + border-radius: vars.$border-radius; max-width: 100%; } video { - border-radius: $border-radius; + border-radius: vars.$border-radius; max-width: 100%; } } @@ -57,3 +59,121 @@ .fun-list { color: var(--news-fun-list-color); } + +.news-homepage-title { + font-size: 2.5rem; + font-weight: bold; + margin: 4rem 0 1rem 0; + text-align: center; +} + +.news-homepage-subtitle { + font-size: 2.5rem; + font-weight: bold; + margin: 4rem 0 1rem 0; + text-align: center; +} + +$card-height-large-screen: 20rem; +$card-height-mobile: 12rem; +.news-list { + margin: 0 auto; + display: flex; + flex-flow: row wrap; + justify-content: center; + padding: 0.5rem; +} + +.news-card { + border: 0 solid aqua; + margin: 0.5rem; + position: relative; + height: $card-height-mobile; + @media (min-width: vars.$bp-tablet-landscape) { + height: $card-height-large-screen; + } + overflow: hidden; + border-radius: vars.$border-radius; + flex: 1; + min-width: 290px; + box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);; + z-index: 0; + } + + &__card-link { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + } + + &__image { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + transition: transform 2s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: relative; + z-index: -1; + } + &__text-wrapper { + width: 100%; + position: absolute; + bottom: 0; + padding: 1rem; + color: white; + background-color: rgba(0, 0, 0, 0.4); + transition: background-color 1.5s ease; + } + &__title { + transition: color 1s ease; + margin-bottom: .5rem; + } + &__post-date { + font-size: .85rem; + margin-bottom: .5rem; + color: #CCC; + } + &__details-wrapper { + max-height: 0; + opacity: 0; + transition: max-height 1.5s ease, opacity 1s ease; + } + + @media (min-width: vars.$bp-tablet-landscape) { + &:hover &__details-wrapper { + max-height: $card-height-large-screen; + opacity: 1; + } + &:hover &__text-wrapper { + background-color: rgba(0, 0, 0, 0.6); + } + &:hover &__title { + color: var(--color-blue-85); + } + &:hover &__image { + transform: scale(1.2); + z-index: -1; + } + } + &__excerpt { + font-weight: 300; + } +} diff --git a/templates/index.html b/templates/index.html index 9ebd86f7b3..cbb9ebb809 100644 --- a/templates/index.html +++ b/templates/index.html @@ -29,6 +29,30 @@
Get Started + + + {% set blog_section = get_section(path="news/_index.md") %} + {% if blog_section.pages %} +

From the blog

+
+ {% for post in blog_section.pages | slice(end=3) %} +
+ + +
+

{{ post.title }}

+
{{ post.date | date(format="%B %d, %Y") }}
+ {% if post.extra.short_excerpt %} +
+

{{ post.extra.short_excerpt }}

+
+ {% endif %} +
+
+ {% endfor %} +
+ {% endif %} +
From 0fa886128e7b469430626a5cefef54bfd354938c Mon Sep 17 00:00:00 2001 From: RomainMazB Date: Thu, 14 May 2026 15:29:25 +0200 Subject: [PATCH 2/3] First draw of new hero section --- sass/_vars.scss | 4 + sass/components/_button.scss | 7 ++ sass/pages/_home.scss | 176 +++++++++++++++++++++++++++++++++++ sass/site.scss | 1 + templates/index.html | 103 +++++++++++++++----- 5 files changed, 267 insertions(+), 24 deletions(-) create mode 100644 sass/pages/_home.scss diff --git a/sass/_vars.scss b/sass/_vars.scss index f12282b1a1..a65be60ca8 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -165,6 +165,10 @@ $color-white: #fff; --button-pink-bg-hover-color: #954c72; --button-pink-border-color: #ba789b; --button-pink-text-color: var(--color-neutral-93); + --button-neutral-bg-color: var(--color-neutral-27); + --button-neutral-bg-hover-color: var(--color-neutral-33); + --button-neutral-border-color: var(--color-neutral-33b); + --button-neutral-text-color: var(--color-neutral-93); --button-square-bg-color: #{rgba($color-neutral-93, 0.05)}; --callout-caution-accent-color: #d95e7a; diff --git a/sass/components/_button.scss b/sass/components/_button.scss index 9a59e5e1c8..e67997c982 100644 --- a/sass/components/_button.scss +++ b/sass/components/_button.scss @@ -48,4 +48,11 @@ --button-border-color: var(--button-pink-border-color); --button-text-color: var(--button-pink-text-color); } + + &--neutral { + --button-bg-color: var(--button-neutral-bg-color); + --button-bg-hover-color: var(--button-neutral-bg-hover-color); + --button-border-color: var(--button-neutral-border-color); + --button-text-color: var(--button-neutral-text-color); + } } diff --git a/sass/pages/_home.scss b/sass/pages/_home.scss new file mode 100644 index 0000000000..0577daae6c --- /dev/null +++ b/sass/pages/_home.scss @@ -0,0 +1,176 @@ +@use "../vars"; + +.hero-section { + width: 100%; + min-height: 44rem; + display: flex; + align-items: center; + gap: 4rem; + padding: 4rem 0; +} + +.hero-content { + flex: 0 1 34rem; +} + +.hero-cta-container { + display: flex; + margin-top: 1rem; + justify-content: space-between; +} + +.hero-eyebrow { + margin-bottom: 1.5rem; + color: var(--color-blue-71); + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.08em; +} + +.hero-title { + margin: 0; + color: vars.$color-white; + font-size: 3rem; + line-height: 1; + font-weight: 700; + letter-spacing: 0.04em; +} + +.hero-description { + max-width: 36rem; + margin: 1.5rem 0 4.5rem; + color: var(--color-neutral-78); + font-size: 1.4rem; + line-height: 1.7; + font-weight: 400; + letter-spacing: 0.02em; +} + +.features-list { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.feature-item { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.feature-icon { + width: 2rem; + aspect-ratio: 1; + border-radius: 0.5rem; + margin-top: 0.2rem; + color: var(--color-blue-71); +} + +.feature-icon svg { + width: 100%; + height: 100%; +} + +.feature-item h3 { + margin: 0 0 0.4rem; + color: var(--text-main); + font-size: 1.1rem; + line-height: 1.2; +} + +.feature-item p { + margin: 0; + max-width: 31rem; + color: var(--color-neutral-67); + font-size: 0.9rem; + line-height: 1.6; + letter-spacing: 0.02em; +} + +.hero-visual { + flex: 1 1 36rem; +} + +.media-card { + width: 100%; + padding: 0.9rem; + border: 1px solid var(--card-border-color); + border-radius: calc(vars.$border-radius * 1.8); + background: rgba(255, 255, 255, 0.02); +} + +.image-placeholder { + width: 100%; + min-height: 19.5rem; + border-radius: vars.$border-radius; + + /** To be removed when remplacing the placeholder */ + display: flex; + align-items: center; + justify-content: center; + background: #4db3b5; + font-size: 1rem; +} + +.code-card { + margin-top: 1.6rem; + padding: 1.4rem; + border: 1px solid rgba(148, 163, 184, 0.35); + border-radius: vars.$border-radius; +} + +.window-dots { + display: flex; + gap: 0.45rem; + margin-bottom: 1.4rem; +} + +.window-dots span { + width: 0.75rem; + aspect-ratio: 1; + border-radius: 50%; + + &:nth-child(1) { + background: #ff5f57; + } + + &:nth-child(2) { + background: #ffbd2e; + } + + &:nth-child(3) { + background: #28c840; + } +} + +.code-card code { + line-height: 1.6; +} + +@media (max-width: vars.$bp-tablet-landscape) { + .hero-description { + margin-bottom: 2.5rem; + } + + .hero-section { + flex-direction: column; + align-items: flex-start; + gap: 3rem; + padding: 4rem 0; + } + + .hero-content, + .hero-visual { + flex-basis: auto; + width: 100%; + } + + .hero-description, + .feature-item p { + max-width: 100%; + } + + .image-placeholder { + min-height: 16rem; + } +} diff --git a/sass/site.scss b/sass/site.scss index e4cd932ae8..c638cfa2ac 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -60,6 +60,7 @@ // Pages // - Page specific CSS +@import "pages/home"; @import "pages/community"; @import "pages/people"; @import "pages/assets"; diff --git a/templates/index.html b/templates/index.html index 9ebd86f7b3..a576ca5211 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,30 +5,85 @@ {% endblock head_extensions %} {% block content %} -
- - Bevy logo - Bevy logo - -
- A refreshingly simple data-driven game engine built in Rust -
- Free and Open Source Forever! -
- Get Started -
+ +
+
+

Build games faster

+ +

A better workflow

+ +

+ Bevy is a refreshingly simple data-driven game engine built in Rust. + Free and open source forever. +

+ +
+
+
+ +
+
+

Data Driven

+

+ All engine and game logic uses Bevy ECS, a custom Entity Component + System. +

+
+
+ +
+
+ +
+
+

2D and 3D renderer

+

+ Modern, flexible and real-time 2D and 3D renderer for games and apps. +

+
+
+ +
+
+ +
+
+

Cross Platform

+

+ Support for all major platforms: Windows, macOS, Linux, Web, iOS, + Android. +

+
+
+
+
+ +
+
+
+ Image placeholder +
+ +
+
+ + + +
+ 
use bevy::prelude::*;
+
+fn main() {
+    App::new().run();
+}
+
+
+ Get Started + View Examples +
+
+
+
+
From 602bc440282c3a61318130719c737258aa356571 Mon Sep 17 00:00:00 2001 From: RomainMazB Date: Thu, 14 May 2026 15:46:45 +0200 Subject: [PATCH 3/3] fix typo in temporary placeholder comment and disable linter for window "dots" --- sass/pages/_home.scss | 2 +- templates/index.html | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/sass/pages/_home.scss b/sass/pages/_home.scss index 0577daae6c..0f877ab964 100644 --- a/sass/pages/_home.scss +++ b/sass/pages/_home.scss @@ -104,7 +104,7 @@ min-height: 19.5rem; border-radius: vars.$border-radius; - /** To be removed when remplacing the placeholder */ + /** To be removed when removing the placeholder */ display: flex; align-items: center; justify-content: center; diff --git a/templates/index.html b/templates/index.html index a576ca5211..8d31c1cd78 100644 --- a/templates/index.html +++ b/templates/index.html @@ -66,9 +66,11 @@

Cross Platform

+ + 
use bevy::prelude::*;
 
@@ -384,5 +386,4 @@ 
Free and Open Source

     
-
{% endblock content %}