godotengine/godot-website
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website.git synced 2026-01-04 06:09:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Deploying to published from @ godotengine/godot-website@589b018633 🚀

Browse Source
This commit is contained in:
Godot Organization
2025-06-23 20:20:48 +00:00
parent 7b9e5363f7
commit f7d76460c9
5 changed files with 4 additions and 945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/priorities/base.css Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/css/priorities/base.css.map Normal file
View File

File diff suppressed because one or more lines are too long

943
assets/css/priorities/base.scss
View File

@@ -1,943 +0,0 @@
@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:selector";
---
---
// Fixes the parsing of the unusual front matter / SCSS file.
*{};
//
// Reset
//
ul {
line-height: unset;
padding-left: unset;
}
//
// Imports
//
@use "./details.css";
//
// Variables
//
$large-min-width: 1200px;
$mobile-max-width: 700px;
$mobile-sm-max-width: 450px;
$gap: 1.25rem;
$border-radius: 15px;
$element-meta-planning-bar-width: 15%;
$element-meta-ongoing-bar-width: 50%;
$color-background-light: #FFFFFF;
$color-background-dark: rgb(51, 54, 57);
$color-red: #f35774;
$color-category-level-1: hsl(206, 58%, 52%);
$color-category-level-2-light: rgb(165, 173, 200);
$color-category-level-2-dark: #202325;
$color-text-light: #4a5365;
$color-text-dark: rgba(255, 255, 255, 0.9);
$color-element-background-light:
color.adjust(#d5daea, $lightness: +7.5%);
$color-element-background-dark: color.adjust(#202325, $lightness: +2.5%);
@function create-outline-rule($outline-color) {
@return 0.125rem solid $outline-color;
}
$outline-color: #4080ff;
$outline: create-outline-rule($outline-color: $outline-color);
$outline-inverted: create-outline-rule($outline-color: color.adjust($color: color.invert($outline-color), $lightness: +10%));
$detail-color: (
note: (rgb(26, 127, 55), rgb(45, 175, 71)),
warning: (rgb(154, 103, 0), rgb(201, 135, 4)),
links: (rgb(9, 105, 218), rgb(34, 119, 247)),
trackers: (rgb(19, 136, 140), rgb(34, 240, 254)),
prs: (rgb(130, 80, 223), rgb(148, 94, 249)),
issues: (rgb(207, 34, 46), rgb(249, 62, 58)),
proposals: (rgb(207, 106, 34), rgb(246, 118, 58)),
);
//
// Functions
//
//
// Mixins
//
@mixin is-dark() {
@media screen and (prefers-color-scheme: dark) {
@content;
}
}
@mixin is-light() {
@media screen and (prefers-color-scheme: light) {
@content;
}
}
@mixin is-large() {
@media screen and (min-width: #{$large-min-width}) {
@content;
}
}
@mixin is-mobile() {
@media screen and (max-width: #{$mobile-max-width}) {
@content;
}
}
@mixin is-mobile-sm() {
@media screen and (max-width: #{$mobile-sm-max-width}) {
@content;
}
}
@mixin is-retina() {
@media screen and (min-resolution: 2x) {
@content;
}
}
// ---
@mixin anchor-icon($icon-color) {
.anchor-icon {
display: inline-block;
opacity: 0;
transition: opacity 0.2s ease-out;
$size: 0.8rem;
$min-size: 19px;
mask-image: url(/assets/icons/link.svg);
mask-size: 100% 100%;
mask-repeat: no-repeat;
height: $size;
width: $size;
min-height: $min-size;
min-width: $min-size;
background-color: $icon-color;
}
}
@mixin remove-markdown-margins() {
> p {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
@mixin reset-lists() {
> ul {
// Force reset the style for the first list.
list-style-type: disc;
}
> ol {
// Force reset the style for the first list.
counter-reset: element-details-list-counter;
}
}
//
// General
//
:root {
scroll-behavior: smooth;
@media (prefers-reduced-motion) {
scroll-behavior: auto;
}
scroll-padding-top: $gap;
}
//
// Main content.
//
.priorities-container {
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background-color: var(--card-background-color);
overflow: visible;
position: relative;
> .priorities-intro {
@mixin set-background($color, $url) {
$color-with-alpha: color.change($color, $alpha: 0.866667);
background:
linear-gradient(to right, $color-with-alpha, $color-with-alpha),
linear-gradient(to bottom, rgba(0,0,0,0) 25%, $color 100%),
url($url);
background-color: black;
background-size: cover, cover, cover;
background-repeat: repeat, repeat, repeat;
}
@mixin setup-background($color) {
@include set-background(
$color: $color,
$url: "/storage/priorities/images/page/map2-2048.webp"
);
@include is-retina() {
@include set-background(
$color: $color,
$url: "/storage/priorities/images/page/map2-4096.webp"
);
}
}
@include setup-background($color: $color-background-light);
@include is-dark() {
@include setup-background($color: $color-background-dark);
}
> .banner {
.container {
padding-top: 7rem;
// padding-bottom: 7rem;
h1 {
margin-bottom: 0;
}
.banner-last-updated {
.label {
.last-updated {
display: inline;
}
.recently-updated {
display: none;
font-weight: 600;
color: $color-red;
}
@at-root #{selector.replace(&, ".banner-last-updated", ".banner-last-updated.recent")} {
.last-updated {
display: none;
}
.recently-updated {
display: inline;
}
}
}
}
}
}
> .intro {
.intro-text {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: $gap;
margin-bottom: (3 * $gap);
@include is-mobile() {
grid-template-columns: 1fr;
gap: 0;
}
}
.wishlist-btns {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"donate howto contact";
gap: $gap;
margin: (3 * $gap) 0;
font-weight: 600;
@include is-mobile() {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"donate donate"
"howto contact";
}
@include is-mobile-sm() {
grid-template-columns: repeat(1, 1fr);
grid-template-areas:
"donate"
"howto"
"contact";
}
.donate {
grid-area: donate;
}
.howto {
grid-area: howto;
}
.contact {
grid-area: contact;
}
.wishlist-btn-anchor {
color: $color-red;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.wishlist-btn-text {
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
> .navigation {
top: 0px;
z-index: 1000;
background-color: $color-background-light;
@include is-dark() {
background-color: $color-background-dark;
}
margin: $gap 0;
-webkit-user-select: none;
user-select: none;
li {
list-style: none;
margin-bottom: 0;
}
.navigation-list-container {
position: relative;
.navigation-list {
margin: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: $gap;
@include is-mobile() {
display: grid;
grid-template-columns: 1fr 1fr;
}
@include is-mobile-sm() {
grid-template-columns: 1fr;
}
> li {
list-style: none;
flex-grow: 1;
width: 100%;
margin: 0;
.navigation-list-details {
.navigation-list-summary {
display: flex;
flex-direction: row;
// Disable toggling.
pointer-events: none;
-webkit-user-select: none;
user-select: none;
background-color: $color-element-background-light;
@include is-dark() {
background-color: $color-element-background-dark;
}
&:hover {
filter: brightness(117.5%);
@include is-light() {
filter: brightness(102%);
}
&:has(.label a:hover) {
filter: none;
}
}
border-radius: $border-radius;
width: calc(100% - #{$gap * 2});
height: 100%;
padding: $gap $gap;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
.label {
width: 100%;
flex-grow: 1;
a {
pointer-events: all;
}
}
.toggle {
// As we disabled the <details> tag, we remove the toggle icon visually.
display: none;
flex-grow: 0;
.more {
display: block;
}
.less {
display: none;
}
@at-root #{selector.replace(&, ".navigation-list-details", ".navigation-list-details[open]")} {
.more {
display: none;
}
.less {
display: block;
}
}
}
}
.navigation-sublist {
display: flex;
flex-direction: column;
gap: $gap / 4;
margin-top: $gap / 2;
margin-left: $gap;
}
}
}
}
}
}
// i.e. "core", "rendering", or "physics"
> .priorities {
display: flex;
flex-direction: column;
gap: $gap * 2;
padding: ($gap * 2) 0;
.category {
> .container {
> .category-details {
> .category-summary {
display: grid;
grid-template-areas:
"title anchor . icon";
grid-template-columns:
auto min-content 1fr min-content;
gap: $gap;
align-items: baseline;
border-radius: $border-radius;
padding: 1rem 2rem;
letter-spacing: -2px;
font-weight: 600;
color: white;
cursor: pointer;
line-height: 3rem;
list-style: none;
&::-webkit-details-marker {
display: none;
}
&:focus {
outline: none;
}
// .category.level-1
@at-root #{selector.replace(&, ".category", ".category.level-1")} {
font-size: 3rem;
background-color: $color-category-level-1;
}
// .category.level-2
@at-root #{selector.replace(&, ".category", ".category.level-2")} {
font-size: 2.125rem;
background-color: $color-category-level-2-light;
@include is-dark() {
background-color: $color-category-level-2-dark;
}
@include is-light() {
&:hover {
filter: brightness(105%);
}
}
}
&:hover {
filter: brightness(117.5%);
}
> .category-anchor-container {
grid-area: anchor;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> .category-anchor {
display: block;
position: relative;
text-decoration: none;
color: white;
.anchor-icon {
@at-root #{selector.replace(&, ".category-summary", ".category-summary:hover")} {
opacity: 0.6;
}
@at-root #{selector.replace(&, ".category-anchor", ".category-anchor:focus")} {
opacity: 0.6;
}
}
&:focus {
outline: $outline-inverted;
}
$anchor-icon-color: white;
@include anchor-icon($icon-color: white);
}
}
.category-title {
grid-area: title;
position: relative;
margin-bottom: 0;
@at-root #{selector.replace(&, ".category-summary", ".category-summary:focus")} {
outline: $outline-inverted;
}
.category-title-text {
flex-grow: 1;
width: 100%;
color: white;
@include remove-markdown-margins();
}
.recent-icon {
display: block;
position: absolute;
$size: 0.75rem;
width: $size;
height: $size;
border-radius: $size;
top: ($size / 4);
left: -(($size / 4) * 3);
background-color: $color-red;
}
}
.category-accordion-toggle {
grid-area: icon;
.more {
display: block;
}
.less {
display: none;
}
@at-root #{selector.replace(&, ".category-details", ".category-details[open]")} {
.more {
display: none;
}
.less {
display: block;
}
}
}
}
}
.category-content {
.element-list {
display: grid;
grid-template-columns: 1fr;
gap: $gap;
@include is-large() {
grid-template-columns: 1fr 1fr;
}
padding-left: 0;
margin-bottom: 0;
> .element-list-item {
list-style: none;
margin-bottom: 0;
> .element {
display: grid;
grid-template-areas:
"main";
grid-template-columns: auto;
grid-template-rows: auto;
gap: $gap;
border-radius: $border-radius;
background-color: $color-element-background-light;
@include is-dark() {
background-color: $color-element-background-dark;
}
padding: 1.25rem 0;
@include is-mobile() {
grid-template-areas:
"main";
grid-template-columns: auto;
grid-template-rows: auto;
}
.element-main {
grid-area: main;
.element-title {
display: grid;
grid-template-areas:
"text toggle";
grid-template-columns:
1fr min-content;
align-items: stretch;
gap: $gap;
cursor: pointer;
border-radius: $border-radius;
color: $color-text-light;
@include is-dark() {
color: $color-text-dark;
}
background-color: $color-element-background-light;
@include is-dark() {
background-color: $color-element-background-dark;
}
margin-top: -$gap;
margin-bottom: -$gap;
padding: $gap;
&:focus {
outline: none;
}
&:hover {
filter: brightness(117.5%);
@include is-light() {
filter: brightness(102%);
}
}
list-style: none;
&::-webkit-details-marker {
display: none;
}
.text {
grid-area: text;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.element-title-container {
display: inline-block;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.element-title-anchor {
flex-grow: 0;
display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
@include anchor-icon($icon-color: $color-text-light);
@include is-dark() {
@include anchor-icon($icon-color: $color-text-dark);
}
@at-root #{selector.replace(&, ".element-title", ".element-title:hover")},
&:focus {
.anchor-icon {
opacity: 0.6;
}
}
}
.element-title-text {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
font-weight: 700;
@include remove-markdown-margins();
@at-root #{selector.replace(&, ".element-title", ".element-title:focus")} {
outline: $outline;
}
}
}
.element-accordion-toggle {
grid-area: toggle;
flex-grow: 0;
display: flex;
flex-direction: row;
align-items: center;
.less {
display: none;
}
.more {
display: block;
}
@at-root #{selector.replace(&, ".element-main", ".element-main[open]")} {
.less {
display: block;
}
.more {
display: none;
}
}
}
}
.element-content {
display: flex;
flex-direction: column;
gap: $gap;
padding: 0 $gap;
padding-top: $gap;
.element-description {
font-size: 1rem;
@include remove-markdown-margins();
}
.element-details {
display: flex;
flex-direction: column;
gap: $gap;
&:empty {
display: none;
}
font-size: 0.9rem;
.detail-block {
@mixin parent-is-type($current-selector, $type) {
@at-root #{selector.replace($current-selector, ".detail-block", ".detail-block.#{$type}")} {
@content;
}
}
padding: 1rem 0 1rem 2rem;
border-left: 2px solid;
border-left-color: var(--detail-color);
p {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
ul {
padding-left: 1.5rem;
li {
margin-bottom: 0.45rem;
}
&:last-child {
li:last-child {
margin-bottom: 0;
}
}
}
a {
color: $color-text-light;
text-decoration-color: $color-text-light;
@include is-dark() {
color: $color-text-dark;
text-decoration-color: $color-text-dark;
}
}
@include reset-lists();
// Detail types.
@each $type in ("note", "warning", "links", "trackers", "prs", "issues", "proposals") {
&.#{$type} {
--detail-color: #{list.nth(map.get($detail-color, $type), 1)};
@include is-dark() {
--detail-color: #{list.nth(map.get($detail-color, $type), 2)};
}
}
}
.detail-block-header {
display: flex;
flex-direction: row;
align-items: center;
gap: $gap / 2;
margin-bottom: $gap / 2;
font-weight: bolder;
color: var(--detail-color);
.icon {
@mixin octicon($icon-url) {
display: inline-block;
width: 24px;
height: 24px;
mask-size: 24px;
mask-position: center;
mask-image: url($icon-url);
background-color: currentColor;
}
span[class^="godot-icon-"], span[class*=" godot-icon-"] {
font-size: 150%;
}
}
}
.detail-block-content {
@include reset-lists();
}
}
}
}
.element-edit {
&:empty {
display: none;
}
font-size: 0.75rem;
font-style: italic;
color: color.adjust($color-text-light, $alpha: -0.33);
@include is-dark() {
color: color.adjust($color-text-dark, $alpha: -0.33);
}
.element-edit-title {
font-weight: 500;
}
.element-edit-entries {
font-style: normal;
border-collapse: collapse;
.element-edit-entry {
vertical-align: baseline;
.element-edit-entry-time {
margin-right: 1rem;
}
.element-edit-entry-content {
@include remove-markdown-margins();
}
}
}
}
}
}
}
}
}
}
}
}
}
#scroll-to-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
--card-padding: $gap;
@include is-mobile() {
--card-padding: $gap / 2;
}
.link {
pointer-events: all;
position: fixed;
bottom: $gap;
right: $gap;
width: 50px;
height: 50px;
margin: var(--card-padding);
text-decoration: none;
background-color: white;
border-radius: $border-radius;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(0,0,0,25%) 1px 1px 5px;
color: black;
font-size: 1.5em;
&:hover {
span {
font-size: 35px;
}
}
span {
transition: font-size 0.2s ease-out;
transform:
translateY(-3px);
}
}
}

2
assets/js/priorities.mjs
View File

@@ -1 +1 @@
import{gsap}from"./modules/gsap@3.12.5.min.mjs";function addBlankTargetToElementLinks(){for(const e of document.querySelectorAll(".element-content a")){if(!(e instanceof HTMLAnchorElement))continue;e.target="_blank"}}function setupScrollToTop(){const s=document.querySelector("#priorities-navigation"),t=document.querySelector("#scroll-to-top");let e=null,n="";const i=()=>{if(n==="show")return;n="show",e!=null&&e.kill(),t.style.display="block",e=gsap.to(t,{opacity:1,duration:.5})},o=()=>{if(n==="hide")return;n="hide",e!=null&&e.kill(),e=gsap.to(t,{opacity:0,duration:.5,onComplete:()=>{t.style.display="none"}})},a=new IntersectionObserver((e)=>{const n=e[0];if(n.isIntersecting)o();else{const e=s.getBoundingClientRect();e.y>window.innerHeight?o():i()}});a.observe(s)}function openDetailsSelectedInUrl(){if(window.location.hash==="")return;const e=document.querySelector(`${window.location.hash} details.element-main`);if(e==null)return;e.open=!0}function handleNavigateEvent(){if(!("Navigation"in window)){handleHashChangeEvent();return}navigation.addEventListener("navigate",e=>{const n=new URL(e.destination.url),t=document.querySelector(`${n.hash} details.element-main`);if(t==null)return;t.open=!0})}function handleHashChangeEvent(){window.addEventListener("hashchange",()=>{const e=document.querySelector(`${window.location.hash} details.element-main`);if(e==null)return;e.open=!0})}function animateDetailsTag(){const e=document.querySelector(".priorities-container");if(!(e instanceof HTMLElement))throw new Error("Couldn't find .priorities-container");const t=e=>{let t=e.target;for(;!0;){if(!(t instanceof HTMLElement))return;if(t instanceof HTMLDetailsElement)break;t=t.parentElement}t.classList.remove("opening")},n=new MutationObserver((e)=>{for(const s of e){const n=s.target;if(!(n instanceof HTMLDetailsElement))continue;s.attributeName==="open"&&(n.removeEventListener("animationend",t),n.open?(n.classList.add("opening"),n.addEventListener("animationend",t)):n.classList.remove("opening"))}});n.observe(e,{attributes:!0,subtree:!0})}function main(){addBlankTargetToElementLinks(),setupScrollToTop(),openDetailsSelectedInUrl(),handleNavigateEvent(),animateDetailsTag()}main()
import{animate}from"./modules/anime@4.0.2_esm.min.js";function addBlankTargetToElementLinks(){for(const e of document.querySelectorAll(".element-content a")){if(!(e instanceof HTMLAnchorElement))continue;e.target="_blank"}}function setupScrollToTop(){const s=document.querySelector("#priorities-navigation"),t=document.querySelector("#scroll-to-top");let e=null,n="";const i=()=>{if(n==="show")return;n="show",e!=null&&e.cancel(),t.style.display="block",e=animate(t,{opacity:{to:1},duration:500})},o=()=>{if(n==="hide")return;n="hide",e!=null&&e.cancel(),e=animate(t,{opacity:{to:0},duration:500,onComplete:()=>{t.style.display="none"}})},a=new IntersectionObserver((e)=>{const n=e[0];if(n.isIntersecting)o();else{const e=s.getBoundingClientRect();e.y>window.innerHeight?o():i()}});a.observe(s)}function openDetailsSelectedInUrl(){if(window.location.hash==="")return;const e=document.querySelector(`${window.location.hash} details.element-main`);if(e==null)return;e.open=!0}function handleNavigateEvent(){if(!("Navigation"in window)){handleHashChangeEvent();return}navigation.addEventListener("navigate",e=>{const n=new URL(e.destination.url),t=document.querySelector(`${n.hash} details.element-main`);if(t==null)return;t.open=!0})}function handleHashChangeEvent(){window.addEventListener("hashchange",()=>{const e=document.querySelector(`${window.location.hash} details.element-main`);if(e==null)return;e.open=!0})}function animateDetailsTag(){const e=document.querySelector(".priorities-container");if(!(e instanceof HTMLElement))throw new Error("Couldn't find .priorities-container");const t=e=>{let t=e.target;for(;!0;){if(!(t instanceof HTMLElement))return;if(t instanceof HTMLDetailsElement)break;t=t.parentElement}t.classList.remove("opening")},n=new MutationObserver((e)=>{for(const s of e){const n=s.target;if(!(n instanceof HTMLDetailsElement))continue;s.attributeName==="open"&&(n.removeEventListener("animationend",t),n.open?(n.classList.add("opening"),n.addEventListener("animationend",t)):n.classList.remove("opening"))}});n.observe(e,{attributes:!0,subtree:!0})}function main(){addBlankTargetToElementLinks(),setupScrollToTop(),openDetailsSelectedInUrl(),handleNavigateEvent(),animateDetailsTag()}main()

2
atom.xml
View File

@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><title>Godot Engine Official</title><link href="https://godotengine.org/atom.xml" rel="self"/><link href="https://godotengine.org/"/><updated>2025-06-23T19:10:31+00:00</updated><id>https://godotengine.org/</id><entry><title>What's New in Android &amp; XR</title><link href="https://godotengine.org/article/godotcon-2025-xr-android-recap/"/><updated>2025-06-23T18:00:00+00:00</updated><id>https://godotengine.org/article/godotcon-2025-xr-android-recap/</id><summary>Recap of the Android &amp; XR updates during GodotCon 2025</summary><content type="html">&lt;h1 id="whats-new-in-xr--android">What’s New in XR &amp;amp; Android&lt;/h1>
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><title>Godot Engine Official</title><link href="https://godotengine.org/atom.xml" rel="self"/><link href="https://godotengine.org/"/><updated>2025-06-23T20:20:03+00:00</updated><id>https://godotengine.org/</id><entry><title>What's New in Android &amp; XR</title><link href="https://godotengine.org/article/godotcon-2025-xr-android-recap/"/><updated>2025-06-23T18:00:00+00:00</updated><id>https://godotengine.org/article/godotcon-2025-xr-android-recap/</id><summary>Recap of the Android &amp; XR updates during GodotCon 2025</summary><content type="html">&lt;h1 id="whats-new-in-xr--android">What’s New in XR &amp;amp; Android&lt;/h1>
&lt;h2 id="godotcon-2025-recap">GodotCon 2025 recap&lt;/h2>
&lt;p>A few weeks ago during &lt;a href="https://conference.godotengine.org/2025/">GodotCon Boston 2025&lt;/a>, &lt;a href="https://github.com/dsnopek">David Snopek&lt;/a>, &lt;a href="https://github.com/devloglogan">Logan Lang&lt;/a> and &lt;a href="https://github.com/m4gr3d">I&lt;/a> gave the latest updates on the state of Android and XR for the Godot engine.&lt;/p>
&lt;p>&lt;em>Please note that the VOD isn’t available yet. The link to the recording will be added to the article once available. In the meantime, you can access &lt;a href="https://docs.google.com/presentation/d/1iIcmggtFyx0FMO-WLP9U2j3Mf_i5miw3Cn0pq-KJXx4/edit?slide=id.g34aac9b6122_2_45#slide=id.g34aac9b6122_2_45">the slides of the presentation&lt;/a>.&lt;/em>&lt;/p>