godotengine/godot-website
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website.git synced 2025-12-31 09:48:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix Sass deprecations (#1080)

Browse Source 
* Fix building with Jekyll on Ruby 3.4

Ruby 3.4 removed several standard library packages, so they have
to be installed as gems instead.

This also updates Jekyll to use a version that's supported in Ruby 3.4.

The minimum required Ruby version is now 3.2.

* Fix Sass deprecations

This allows the website to build on Ruby 3.4.0 + Jekyll 4.4.1.

More information:

- https://sass-lang.com/blog/import-is-deprecated/
This commit is contained in:
Hugo Locurcio
2025-06-12 20:42:21 +02:00
committed by GitHub
parent 5fe2df3dbb
commit b42580d8cc
7 changed files with 377 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
_sass/common/_colors.scss
View File

@@ -1,36 +1,36 @@
$color-godot-blue: #478CBF;
$godot-blue: #478CBF;
$color-code-symbol--light: #00009c;
$color-code-symbol--dark: #ABC9FF;
$color-code-keyword--light: #e62282;
$color-code-keyword--dark: #FF7085;
$color-code-controlflow--light: #bd1fcc;
$color-code-controlflow--dark: #FF8CCC;
$color-code-basetype--light: #009933;
$color-code-basetype--dark: #42FFC2;
$color-code-enginetype--light: #1c8c66;
$color-code-enginetype--dark: #8FFFDB;
$color-code-usertype--light: #2e7366;
$color-code-usertype--dark: #C7FFED;
$color-code-string--light: #996b00;
$color-code-string--dark: #FFEDA1;
$color-code-background--light: #ffffff;
$color-code-background--dark: #1D2229;
$color-code-text--light: #393939;
$color-code-text--dark: #CDCFD2;
$color-code-function--light: #0039e6;
$color-code-function--dark: #57B3FF;
$color-code-membervariable--light: #0066ad;
$color-code-membervariable--dark: #BCE0FF;
$color-code-gdscript-function--light: #009999;
$color-code-gdscript-function--dark: #66E6FF;
$color-code-gdscript-globalfunction--light: #5c2eb8;
$color-code-gdscript-globalfunction--dark: #A3A3F5;
$color-code-gdscript-nodepath--light: #2e8c00;
$color-code-gdscript-nodepath--dark: #B8C47D;
$color-code-gdscript-nodereference--light: #008000;
$color-code-gdscript-nodereference--dark: #63C259;
$color-code-gdscript-annotation--light: #cc5e00;
$color-code-gdscript-annotation--dark: #FFB373;
$color-code-gdscript-stringname--light: #cc8f73;
$color-code-gdscript-stringname--dark: #FFC2A6;
$code-symbol--light: #00009c;
$code-symbol--dark: #ABC9FF;
$code-keyword--light: #e62282;
$code-keyword--dark: #FF7085;
$code-controlflow--light: #bd1fcc;
$code-controlflow--dark: #FF8CCC;
$code-basetype--light: #009933;
$code-basetype--dark: #42FFC2;
$code-enginetype--light: #1c8c66;
$code-enginetype--dark: #8FFFDB;
$code-usertype--light: #2e7366;
$code-usertype--dark: #C7FFED;
$code-string--light: #996b00;
$code-string--dark: #FFEDA1;
$code-background--light: #ffffff;
$code-background--dark: #1D2229;
$code-text--light: #393939;
$code-text--dark: #CDCFD2;
$code-function--light: #0039e6;
$code-function--dark: #57B3FF;
$code-membervariable--light: #0066ad;
$code-membervariable--dark: #BCE0FF;
$code-gdscript-function--light: #009999;
$code-gdscript-function--dark: #66E6FF;
$code-gdscript-globalfunction--light: #5c2eb8;
$code-gdscript-globalfunction--dark: #A3A3F5;
$code-gdscript-nodepath--light: #2e8c00;
$code-gdscript-nodepath--dark: #B8C47D;
$code-gdscript-nodereference--light: #008000;
$code-gdscript-nodereference--dark: #63C259;
$code-gdscript-annotation--light: #cc5e00;
$code-gdscript-annotation--dark: #FFB373;
$code-gdscript-stringname--light: #cc8f73;
$code-gdscript-stringname--dark: #FFC2A6;

71
_sass/common/_release.scss
View File

@@ -1,8 +1,11 @@
@use "sass:color";
@use "sass:list";
@use "sass:map";
//
// Functions
//
@function offset-hue($color, $offset, $i: 1) {
@return adjust-hue($color, $offset * $i);
@return color.adjust($color, $hue: $offset * $i);
}
/**
@@ -10,49 +13,49 @@
* it will return a map of sections with the $base-category being assigned with
* a specific $base-color, and will $offset each section by n degrees.
*/
@function r-generate-sections($sections, $base-category, $base-color, $offset) {
@function generate-sections($sections, $base-category, $base-color, $offset) {
$return-value: ();
$base-category-i: index($sections, $base-category);
$base-category-i: list.index($sections, $base-category);
@each $section in $sections {
$i: index($sections, $section);
$i: list.index($sections, $section);
$diff: $i - $base-category-i;
$base-color-top: offset-hue($base-color, $offset, $diff);
$base-color-bottom: adjust-color(
$base-color-bottom: color.adjust(
offset-hue($base-color, $offset, $diff + 1),
$lightness: -10
$lightness: -10%
);
$color-top: adjust-color($base-color-top, $saturation: -10);
$color-bottom: adjust-color($base-color-bottom, $saturation: -10);
$color-top-muted: adjust-color($base-color-top, $saturation: -25);
$color-bottom-muted: adjust-color($base-color-bottom, $saturation: -25);
$color-selection: adjust-color($base-color-bottom, $saturation: -30);
$color-selection--light: adjust-color(
$color-top: color.adjust($base-color-top, $saturation: -10%);
$color-bottom: color.adjust($base-color-bottom, $saturation: -10%);
$color-top-muted: color.adjust($base-color-top, $saturation: -25%);
$color-bottom-muted: color.adjust($base-color-bottom, $saturation: -25%);
$color-selection: color.adjust($base-color-bottom, $saturation: -30%);
$color-selection--light: color.adjust(
$base-color-bottom,
$lightness: 40,
$saturation: 30
$lightness: 40%,
$saturation: 30%
);
$color-invert: adjust-color(
$color-invert: color.adjust(
$base-color-top,
$hue: 180,
$lightness: 0,
$saturation: 30
$hue: 180deg,
$lightness: 0%,
$saturation: 30%
);
$color-highlight: adjust-color(
$color-highlight: color.adjust(
$base-color-top,
$lightness: 0,
$saturation: 30
$lightness: 0%,
$saturation: 30%
);
$color-highlight--dark: adjust-color(
$color-highlight--dark: color.adjust(
$base-color-top,
$lightness: 30,
$saturation: 30
$lightness: 30%,
$saturation: 30%
);
$color-invert-highlight: adjust-color(
$color-invert-highlight: color.adjust(
$color-invert,
$lightness: 20,
$saturation: 30
$lightness: 20%,
$saturation: 30%
);
$return-value: map-merge(
$return-value: map.merge(
$return-value,
(
#{$section}: (
@@ -73,16 +76,16 @@
@return $return-value;
}
@function r-desktop-mobile($sizes...) {
@return ("desktop": nth($sizes, 1), "mobile": nth($sizes, 2));
@function desktop-mobile($sizes...) {
@return ("desktop": list.nth($sizes, 1), "mobile": list.nth($sizes, 2));
}
@function r-get-desktop($value) {
@return map-get($value, "desktop");
@function get-desktop($value) {
@return map.get($value, "desktop");
}
@function r-get-mobile($value) {
@return map-get($value, "mobile");
@function get-mobile($value) {
@return map.get($value, "mobile");
}
//

6
assets/css/main.scss
View File

@@ -1,6 +1,8 @@
---
---
@use "footer";
:root {
color-scheme: light dark;
@@ -176,7 +178,7 @@
opacity: 0.85;
}
.dark-invert {
filter: invert(100%);
@@ -1319,5 +1321,3 @@ section.sponsors .grid {
border-top: 1px solid var(--table-divider-color);
margin-top: 4rem;
}
@import 'footer';

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

@@ -1,3 +1,7 @@
@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:selector";
---
---
// Fixes the parsing of the unusual front matter / SCSS file.
@@ -14,7 +18,7 @@ ul {
//
// Imports
//
@import "./details.css";
@use "./details.css";
//
// Variables
@@ -40,15 +44,15 @@ $color-text-light: #4a5365;
$color-text-dark: rgba(255, 255, 255, 0.9);
$color-element-background-light:
adjust-color(#d5daea, $lightness: +7.5%);
$color-element-background-dark: adjust-color(#202325, $lightness: +2.5%);
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: adjust-color($color: invert($outline-color), $lightness: +10%));
$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)),
@@ -171,7 +175,7 @@ $detail-color: (
> .priorities-intro {
@mixin set-background($color, $url) {
$color-with-alpha: change-color($color, $alpha: 0.866667);
$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%),
@@ -219,7 +223,7 @@ $detail-color: (
color: $color-red;
}
@at-root #{selector-replace(&, ".banner-last-updated", ".banner-last-updated.recent")} {
@at-root #{selector.replace(&, ".banner-last-updated", ".banner-last-updated.recent")} {
.last-updated {
display: none;
}
@@ -399,7 +403,7 @@ $detail-color: (
display: none;
}
@at-root #{selector-replace(&, ".navigation-list-details", ".navigation-list-details[open]")} {
@at-root #{selector.replace(&, ".navigation-list-details", ".navigation-list-details[open]")} {
.more {
display: none;
}
@@ -462,12 +466,12 @@ $detail-color: (
}
// .category.level-1
@at-root #{selector-replace(&, ".category", ".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")} {
@at-root #{selector.replace(&, ".category", ".category.level-2")} {
font-size: 2.125rem;
background-color: $color-category-level-2-light;
@include is-dark() {
@@ -499,11 +503,11 @@ $detail-color: (
color: white;
.anchor-icon {
@at-root #{selector-replace(&, ".category-summary", ".category-summary:hover")} {
@at-root #{selector.replace(&, ".category-summary", ".category-summary:hover")} {
opacity: 0.6;
}
@at-root #{selector-replace(&, ".category-anchor", ".category-anchor:focus")} {
@at-root #{selector.replace(&, ".category-anchor", ".category-anchor:focus")} {
opacity: 0.6;
}
}
@@ -522,7 +526,7 @@ $detail-color: (
position: relative;
margin-bottom: 0;
@at-root #{selector-replace(&, ".category-summary", ".category-summary:focus")} {
@at-root #{selector.replace(&, ".category-summary", ".category-summary:focus")} {
outline: $outline-inverted;
}
@@ -556,7 +560,7 @@ $detail-color: (
.less {
display: none;
}
@at-root #{selector-replace(&, ".category-details", ".category-details[open]")} {
@at-root #{selector.replace(&, ".category-details", ".category-details[open]")} {
.more {
display: none;
}
@@ -681,7 +685,7 @@ $detail-color: (
@include anchor-icon($icon-color: $color-text-dark);
}
@at-root #{selector-replace(&, ".element-title", ".element-title:hover")},
@at-root #{selector.replace(&, ".element-title", ".element-title:hover")},
&:focus {
.anchor-icon {
opacity: 0.6;
@@ -701,7 +705,7 @@ $detail-color: (
@include remove-markdown-margins();
@at-root #{selector-replace(&, ".element-title", ".element-title:focus")} {
@at-root #{selector.replace(&, ".element-title", ".element-title:focus")} {
outline: $outline;
}
}
@@ -723,7 +727,7 @@ $detail-color: (
display: block;
}
@at-root #{selector-replace(&, ".element-main", ".element-main[open]")} {
@at-root #{selector.replace(&, ".element-main", ".element-main[open]")} {
.less {
display: block;
}
@@ -760,7 +764,7 @@ $detail-color: (
.detail-block {
@mixin parent-is-type($current-selector, $type) {
@at-root #{selector-replace($current-selector, ".detail-block", ".detail-block.#{$type}")} {
@at-root #{selector.replace($current-selector, ".detail-block", ".detail-block.#{$type}")} {
@content;
}
}
@@ -806,9 +810,9 @@ $detail-color: (
// Detail types.
@each $type in ("note", "warning", "links", "trackers", "prs", "issues", "proposals") {
&.#{$type} {
--detail-color: #{nth(map-get($detail-color, $type), 1)};
--detail-color: #{list.nth(map.get($detail-color, $type), 1)};
@include is-dark() {
--detail-color: #{nth(map-get($detail-color, $type), 2)};
--detail-color: #{list.nth(map.get($detail-color, $type), 2)};
}
}
}
@@ -854,9 +858,9 @@ $detail-color: (
font-size: 0.75rem;
font-style: italic;
color: adjust-color($color-text-light, $alpha: -0.33);
color: color.adjust($color-text-light, $alpha: -0.33);
@include is-dark() {
color: adjust-color($color-text-dark, $alpha: -0.33);
color: color.adjust($color-text-dark, $alpha: -0.33);
}
.element-edit-title {

2
assets/css/release.scss
View File

@@ -1,6 +1,6 @@
---
---
@import "common/release";
@use "common/release";
html {
scroll-behavior: smooth;

257
assets/css/releases/4.3.scss
View File

@@ -1,8 +1,9 @@
---
---
@import "common/colors";
@import "common/release";
@use "sass:map";
@use "common/colors";
@use "common/release";
$column-max-width: 400px;
$column-min-width: 300px;
@@ -46,7 +47,7 @@ $header-gap-bottom: 80px;
$header-content-color: white;
$header-numbers-gap: 20px;
$header-bar-height: 20px;
$header-bar-commits-color: $color-godot-blue;
$header-bar-commits-color: colors.$godot-blue;
$header-bar-commits-color-inactive: #487491;
$header-bar-contributors-color: #F47E7A;
$header-bar-contributors-color-inactive: #A66160;
@@ -54,21 +55,21 @@ $header-bar-gap: 10px;
$header-version-font-weight: 800;
$release-background-end: #BCBCBC;
$release-title-font-size: r-desktop-mobile(35px, 25px);
$release-section-margin-top: r-desktop-mobile(80px, 40px);
$release-section-margin-bottom: r-desktop-mobile(40px, 20px);
$release-title-font-size: release.desktop-mobile(35px, 25px);
$release-section-margin-top: release.desktop-mobile(80px, 40px);
$release-section-margin-bottom: release.desktop-mobile(40px, 20px);
$card-padding: r-desktop-mobile(17px, 15px);
$card-title-font-size: r-desktop-mobile(20px, 18px);
$card-content-font-size-clamp-min: r-desktop-mobile(14px, 0.8em);
$card-content-font-size-clamp-val: r-desktop-mobile(7cqw, 4cqw);
$card-content-font-size-clamp-max: r-desktop-mobile(16px, 1em);
$card-padding: release.desktop-mobile(17px, 15px);
$card-title-font-size: release.desktop-mobile(20px, 18px);
$card-content-font-size-clamp-min: release.desktop-mobile(14px, 0.8em);
$card-content-font-size-clamp-val: release.desktop-mobile(7cqw, 4cqw);
$card-content-font-size-clamp-max: release.desktop-mobile(16px, 1em);
$download-gap: r-desktop-mobile(8px, 4px);
$download-font-size: r-desktop-mobile(18px, 12px);
$download-gap: release.desktop-mobile(8px, 4px);
$download-font-size: release.desktop-mobile(18px, 12px);
$section-hue-offset: 10;
$sections: r-generate-sections(
$sections: release.generate-sections(
$sections: (
"download",
"foundation",
@@ -89,7 +90,7 @@ $sections: r-generate-sections(
"special-thanks"
),
$base-category: "foundation",
$base-color: $color-godot-blue,
$base-color: colors.$godot-blue,
$offset: $section-hue-offset
);
@@ -119,9 +120,9 @@ $donate-robot-size: 500px;
z-index: 1;
pointer-events: none;
--card-padding: #{r-get-desktop($card-padding)};
--card-padding: #{release.get-desktop($card-padding)};
@include is-mobile() {
--card-padding: #{r-get-mobile($card-padding)};
--card-padding: #{release.get-mobile($card-padding)};
}
.link {
@@ -160,20 +161,20 @@ $donate-robot-size: 500px;
#foundation-donate {
background-color: #EFF1F5;
@include is-dark() {
@include release.is-dark() {
background-color: #283a5b;
}
.robot-1,
.robot-2 {
color: #CFD5E0;
@include is-dark() {
color: #233452;
}
font-size: $donate-robot-size;
position: absolute;
z-index: -1;
@include release.is-dark() {
color: #233452;
}
}
.robot-1 {
@@ -315,8 +316,8 @@ $donate-robot-size: 500px;
@each $section-name, $section-colors in $sections {
&.link-#{$section-name} {
--color-top: #{map-get($section-colors, "color-top")};
--color-bottom: #{map-get($section-colors, "color-bottom")};
--color-top: #{map.get($section-colors, "color-top")};
--color-bottom: #{map.get($section-colors, "color-bottom")};
background: linear-gradient(
to bottom,
var(--color-top),
@@ -384,7 +385,7 @@ $donate-robot-size: 500px;
text-decoration: none;
text-decoration-color: black;
@include is-dark() {
@include release.is-dark() {
color: white;
text-decoration-color: white;
}
@@ -435,102 +436,102 @@ $donate-robot-size: 500px;
height: 100%;
background-color: #25282b;
@include is-light() {
background-color: #cecece;
/**
* Responsive sizes.
*/
--release-title-font-size: #{release.get-desktop($release-title-font-size)};
--release-section-margin-top: #{release.get-desktop($release-section-margin-top)};
--release-section-margin-bottom: #{release.get-desktop($release-section-margin-bottom)};
--card-padding: #{release.get-desktop($card-padding)};
--card-title-font-size: #{release.get-desktop($card-title-font-size)};
--card-content-font-size-clamp-min: #{release.get-desktop($card-content-font-size-clamp-min)};
--card-content-font-size-clamp-val: #{release.get-desktop($card-content-font-size-clamp-val)};
--card-content-font-size-clamp-max: #{release.get-desktop($card-content-font-size-clamp-max)};
--download-gap: #{release.get-desktop($download-gap)};
--download-font-size: #{release.get-desktop($download-font-size)};
/** Color **/
--card-background-color: white;
--card-color: #2d2d2d;
--color-code-symbol: #{colors.$code-symbol--light};
--color-code-keyword: #{colors.$code-keyword--light};
--color-code-controlflow: #{colors.$code-controlflow--light};
--color-code-basetype: #{colors.$code-basetype--light};
--color-code-enginetype: #{colors.$code-enginetype--light};
--color-code-usertype: #{colors.$code-usertype--light};
--color-code-string: #{colors.$code-string--light};
--color-code-background: #{colors.$code-background--light};
--color-code-text: #{colors.$code-text--light};
--color-code-function: #{colors.$code-function--light};
--color-code-membervariable: #{colors.$code-membervariable--light};
--color-code-gdscript-function: #{colors.$code-gdscript-function--light};
--color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--light};
--color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--light};
--color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--light};
--color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--light};
--color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--light};
@include release.is-dark() {
--card-background-color: #333639;
--card-color: white;
--color-code-symbol: #{colors.$code-symbol--dark};
--color-code-keyword: #{colors.$code-keyword--dark};
--color-code-controlflow: #{colors.$code-controlflow--dark};
--color-code-basetype: #{colors.$code-basetype--dark};
--color-code-enginetype: #{colors.$code-enginetype--dark};
--color-code-usertype: #{colors.$code-usertype--dark};
--color-code-string: #{colors.$code-string--dark};
--color-code-background: #{colors.$code-background--dark};
--color-code-text: #{colors.$code-text--dark};
--color-code-function: #{colors.$code-function--dark};
--color-code-membervariable: #{colors.$code-membervariable--dark};
--color-code-gdscript-function: #{colors.$code-gdscript-function--dark};
--color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--dark};
--color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--dark};
--color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--dark};
--color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--dark};
--color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--dark};
}
a {
text-decoration-thickness: 1px;
}
/**
* Responsive sizes.
*/
--release-title-font-size: #{r-get-desktop($release-title-font-size)};
--release-section-margin-top: #{r-get-desktop($release-section-margin-top)};
--release-section-margin-bottom: #{r-get-desktop($release-section-margin-bottom)};
--card-padding: #{r-get-desktop($card-padding)};
--card-title-font-size: #{r-get-desktop($card-title-font-size)};
--card-content-font-size-clamp-min: #{r-get-desktop($card-content-font-size-clamp-min)};
--card-content-font-size-clamp-val: #{r-get-desktop($card-content-font-size-clamp-val)};
--card-content-font-size-clamp-max: #{r-get-desktop($card-content-font-size-clamp-max)};
--download-gap: #{r-get-desktop($download-gap)};
--download-font-size: #{r-get-desktop($download-font-size)};
@include is-mobile() {
--release-title-font-size: #{r-get-mobile($release-title-font-size)};
--release-section-margin-top: #{r-get-mobile($release-section-margin-top)};
--release-section-margin-bottom: #{r-get-mobile($release-section-margin-bottom)};
--card-padding: #{r-get-mobile($card-padding)};
--card-title-font-size: #{r-get-mobile($card-title-font-size)};
--card-content-font-size-clamp-min: #{r-get-mobile($card-content-font-size-clamp-min)};
--card-content-font-size-clamp-val: #{r-get-mobile($card-content-font-size-clamp-val)};
--card-content-font-size-clamp-max: #{r-get-mobile($card-content-font-size-clamp-max)};
--download-gap: #{r-get-mobile($download-gap)};
--download-font-size: #{r-get-mobile($download-font-size)};
@include release.is-light() {
background-color: #cecece;
}
/** Color **/
--card-background-color: white;
--card-color: #2d2d2d;
--color-code-symbol: #{$color-code-symbol--light};
--color-code-keyword: #{$color-code-keyword--light};
--color-code-controlflow: #{$color-code-controlflow--light};
--color-code-basetype: #{$color-code-basetype--light};
--color-code-enginetype: #{$color-code-enginetype--light};
--color-code-usertype: #{$color-code-usertype--light};
--color-code-string: #{$color-code-string--light};
--color-code-background: #{$color-code-background--light};
--color-code-text: #{$color-code-text--light};
--color-code-function: #{$color-code-function--light};
--color-code-membervariable: #{$color-code-membervariable--light};
--color-code-gdscript-function: #{$color-code-gdscript-function--light};
--color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--light};
--color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--light};
--color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--light};
--color-code-gdscript-annotation: #{$color-code-gdscript-annotation--light};
--color-code-gdscript-stringname: #{$color-code-gdscript-stringname--light};
@include is-dark() {
--card-background-color: #333639;
--card-color: white;
--color-code-symbol: #{$color-code-symbol--dark};
--color-code-keyword: #{$color-code-keyword--dark};
--color-code-controlflow: #{$color-code-controlflow--dark};
--color-code-basetype: #{$color-code-basetype--dark};
--color-code-enginetype: #{$color-code-enginetype--dark};
--color-code-usertype: #{$color-code-usertype--dark};
--color-code-string: #{$color-code-string--dark};
--color-code-background: #{$color-code-background--dark};
--color-code-text: #{$color-code-text--dark};
--color-code-function: #{$color-code-function--dark};
--color-code-membervariable: #{$color-code-membervariable--dark};
--color-code-gdscript-function: #{$color-code-gdscript-function--dark};
--color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--dark};
--color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--dark};
--color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--dark};
--color-code-gdscript-annotation: #{$color-code-gdscript-annotation--dark};
--color-code-gdscript-stringname: #{$color-code-gdscript-stringname--dark};
@include is-mobile() {
--release-title-font-size: #{release.get-mobile($release-title-font-size)};
--release-section-margin-top: #{release.get-mobile($release-section-margin-top)};
--release-section-margin-bottom: #{release.get-mobile($release-section-margin-bottom)};
--card-padding: #{release.get-mobile($card-padding)};
--card-title-font-size: #{release.get-mobile($card-title-font-size)};
--card-content-font-size-clamp-min: #{release.get-mobile($card-content-font-size-clamp-min)};
--card-content-font-size-clamp-val: #{release.get-mobile($card-content-font-size-clamp-val)};
--card-content-font-size-clamp-max: #{release.get-mobile($card-content-font-size-clamp-max)};
--download-gap: #{release.get-mobile($download-gap)};
--download-font-size: #{release.get-mobile($download-font-size)};
}
code.highlight {
$_padding: 5px;
background-color: color-mix(in srgb, var(--color-code-background), transparent 15%);
@include is-dark() {
background-color: color-mix(in srgb, var(--color-code-background), transparent 50%);
}
display: inline-block;
padding: 0 ($_padding / 2);
padding: 0 calc($_padding / 2);
margin: 0 0;
border-radius: $_padding;
color: var(--color-code-text);
background-color: color-mix(in srgb, var(--color-code-background), transparent 15%);
@include release.is-dark() {
background-color: color-mix(in srgb, var(--color-code-background), transparent 50%);
}
.symbol {
color: var(--color-code-symbol);
}
@@ -575,7 +576,7 @@ $donate-robot-size: 500px;
background-repeat: $header-background-repeat;
background-color: #121315;
@include is-light() {
@include release.is-light() {
background-color: #25282B;
}
@@ -644,7 +645,7 @@ $donate-robot-size: 500px;
.bar {
display: inline-block;
height: $header-bar-height;
background-color: var(--bar-color, #{$color-godot-blue});
background-color: var(--bar-color, #{colors.$godot-blue});
transform: translateY(2px);
margin-right: $header-bar-gap;
}
@@ -1097,12 +1098,13 @@ $donate-robot-size: 500px;
a {
color: var(--color-top);
@include is-dark() {
text-decoration: none;
@include release.is-dark() {
color: white;
text-decoration-color: white;
}
text-decoration: none;
&:hover {
text-decoration: underline;
}
@@ -1160,7 +1162,7 @@ $donate-robot-size: 500px;
text-decoration-color: black;
text-decoration: underline;
@include is-dark() {
@include release.is-dark() {
color: white;
text-decoration-color: white;
}
@@ -1173,7 +1175,7 @@ $donate-robot-size: 500px;
border: 0;
color: black;
@include is-dark() {
@include release.is-dark() {
color: white;
}
@@ -1189,10 +1191,6 @@ $donate-robot-size: 500px;
.c-link-popover {
color: white;
background-color: black;
@include is-dark() {
color: black;
background-color: white;
}
border: 0;
border-radius: calc(var(--card-padding) / 2);
@@ -1201,12 +1199,17 @@ $donate-robot-size: 500px;
var(--card-content-font-size-clamp-min),
var(--card-content-font-size-clamp-val),
var(--card-content-font-size-clamp-max)
);
font-weight: 400;
);
font-weight: 400;
// Remove browser default positionning of the popover,
// as it defaults to center of the screen.
inset: unset;
// Remove browser default positionning of the popover,
// as it defaults to center of the screen.
inset: unset;
@include release.is-dark() {
color: black;
background-color: white;
}
a {
color: var(--color-highlight-switch);
@@ -1290,16 +1293,16 @@ $donate-robot-size: 500px;
@each $section-name, $section-colors in $sections {
&.section-#{$section-name} {
--color-top: #{map-get($section-colors, "color-top")};
--color-bottom: #{map-get($section-colors, "color-bottom")};
--color-selection: #{map-get($section-colors, "color-selection")};
--color-invert: #{map-get($section-colors, "color-invert")};
--color-highlight: #{map-get($section-colors, "color-highlight")};
--color-highlight-switch: #{map-get($section-colors, "color-highlight--dark")};
--color-invert-highlight: #{map-get($section-colors, "color-invert-highlight")};
@include is-dark() {
--color-highlight: #{map-get($section-colors, "color-highlight--dark")};
--color-highlight-switch: #{map-get($section-colors, "color-highlight")};
--color-top: #{map.get($section-colors, "color-top")};
--color-bottom: #{map.get($section-colors, "color-bottom")};
--color-selection: #{map.get($section-colors, "color-selection")};
--color-invert: #{map.get($section-colors, "color-invert")};
--color-highlight: #{map.get($section-colors, "color-highlight")};
--color-highlight-switch: #{map.get($section-colors, "color-highlight--dark")};
--color-invert-highlight: #{map.get($section-colors, "color-invert-highlight")};
@include release.is-dark() {
--color-highlight: #{map.get($section-colors, "color-highlight--dark")};
--color-highlight-switch: #{map.get($section-colors, "color-highlight")};
}
}
}

289
assets/css/releases/4.4.scss
View File

@@ -1,8 +1,10 @@
---
---
@import "common/colors";
@import "common/release";
@use "sass:map";
@use "sass:selector";
@use "common/colors";
@use "common/release";
$column-max-width: 400px;
$column-min-width: 300px;
@@ -50,7 +52,7 @@ $header-gap-bottom: 80px;
$header-content-color: white;
$header-numbers-gap: 20px;
$header-bar-height: 20px;
$header-bar-commits-color: $color-godot-blue;
$header-bar-commits-color: colors.$godot-blue;
$header-bar-commits-color-inactive: #487491;
$header-bar-contributors-color: #f47e7a;
$header-bar-contributors-color-inactive: #a66160;
@@ -58,22 +60,22 @@ $header-bar-gap: 10px;
$header-version-font-weight: 800;
$release-background-end: #bcbcbc;
$release-title-font-size: r-desktop-mobile(35px, 25px);
$release-section-margin-top: r-desktop-mobile(80px, 40px);
$release-section-margin-bottom: r-desktop-mobile(40px, 20px);
$release-title-font-size: release.desktop-mobile(35px, 25px);
$release-section-margin-top: release.desktop-mobile(80px, 40px);
$release-section-margin-bottom: release.desktop-mobile(40px, 20px);
$card-padding: r-desktop-mobile(17px, 15px);
$card-title-font-size: r-desktop-mobile(20px, 18px);
$card-content-font-size-clamp-min: r-desktop-mobile(14px, 0.8em);
$card-content-font-size-clamp-val: r-desktop-mobile(7cqw, 4cqw);
$card-content-font-size-clamp-max: r-desktop-mobile(16px, 1em);
$card-padding: release.desktop-mobile(17px, 15px);
$card-title-font-size: release.desktop-mobile(20px, 18px);
$card-content-font-size-clamp-min: release.desktop-mobile(14px, 0.8em);
$card-content-font-size-clamp-val: release.desktop-mobile(7cqw, 4cqw);
$card-content-font-size-clamp-max: release.desktop-mobile(16px, 1em);
$card-box-shadow: 0 9px 10px -10px #0000008f;
$download-gap: r-desktop-mobile(8px, 4px);
$download-font-size: r-desktop-mobile(18px, 12px);
$download-gap: release.desktop-mobile(8px, 4px);
$download-font-size: release.desktop-mobile(18px, 12px);
$section-hue-offset: 10;
$sections: r-generate-sections(
$sections: release.generate-sections(
$sections: (
"foundation",
"links",
@@ -85,13 +87,13 @@ $sections: r-generate-sections(
"special-thanks",
),
$base-category: "foundation",
$base-color: $color-godot-blue,
$base-color: colors.$godot-blue,
$offset: $section-hue-offset,
);
// Add "download" to be a copy of "foundation", and make it on top order-wise.
$sections: map-merge(
$sections: map.merge(
(
"download": map-get($sections, "foundation"),
"download": map.get($sections, "foundation"),
),
$sections
);
@@ -138,16 +140,17 @@ $donate-robot-size: 500px;
}
:root {
--card-padding: #{r-get-desktop($card-padding)};
--card-padding: #{release.get-desktop($card-padding)};
scroll-behavior: smooth;
scroll-padding-top: var(--card-padding);
@include is-mobile() {
--card-padding: #{r-get-mobile($card-padding)};
--card-padding: #{release.get-mobile($card-padding)};
}
scroll-behavior: smooth;
@media (prefers-reduced-motion) {
scroll-behavior: auto;
}
scroll-padding-top: var(--card-padding);
}
#scroll-to-top {
@@ -194,20 +197,20 @@ $donate-robot-size: 500px;
#foundation-donate {
background-color: #eff1f5;
@include is-dark() {
@include release.is-dark() {
background-color: #283a5b;
}
.robot-1,
.robot-2 {
color: #cfd5e0;
@include is-dark() {
color: #233452;
}
font-size: $donate-robot-size;
position: absolute;
z-index: -1;
@include release.is-dark() {
color: #233452;
}
}
.robot-1 {
@@ -360,17 +363,17 @@ $donate-robot-size: 500px;
var(--color-bottom)
);
@at-root #{selector-replace(&, ".links-container", ".links-container.links-container-subsections")} {
@at-root #{selector.replace(&, ".links-container", ".links-container.links-container-subsections")} {
font-weight: 600;
--color-top: var(--color-top-muted);
--color-bottom: var(--color-bottom-muted);
}
@at-root #{selector-replace(&, ".links-container", ".links-container.main-list")} {
@at-root #{selector.replace(&, ".links-container", ".links-container.main-list")} {
font-size: 150%;
@each $section-name, $section-colors in $sections {
&.link-#{$section-name} {
--color-top: #{map-get($section-colors, "color-top")};
--color-bottom: #{map-get($section-colors, "color-bottom")};
--color-top: #{map.get($section-colors, "color-top")};
--color-bottom: #{map.get($section-colors, "color-bottom")};
}
}
}
@@ -388,8 +391,8 @@ $donate-robot-size: 500px;
.link {
@each $section-name, $section-colors in $sections {
&.link-#{$section-name} {
--color-top: #{map-get($section-colors, "color-top")};
--color-bottom: #{map-get($section-colors, "color-bottom")};
--color-top: #{map.get($section-colors, "color-top")};
--color-bottom: #{map.get($section-colors, "color-bottom")};
}
}
}
@@ -445,7 +448,7 @@ $donate-robot-size: 500px;
text-decoration: none;
text-decoration-color: black;
@include is-dark() {
@include release.is-dark() {
color: white;
text-decoration-color: white;
}
@@ -510,122 +513,109 @@ $donate-robot-size: 500px;
height: 100%;
background-color: #25282b;
@include is-light() {
background-color: #cecece;
/**
* Responsive sizes.
*/
--release-title-font-size: #{release.get-desktop($release-title-font-size)};
--release-section-margin-top: #{release.get-desktop($release-section-margin-top)};
--release-section-margin-bottom: #{release.get-desktop(
$release-section-margin-bottom
)};
--card-padding: #{release.get-desktop($card-padding)};
--card-title-font-size: #{release.get-desktop($card-title-font-size)};
--card-content-font-size-clamp-min: #{release.get-desktop(
$card-content-font-size-clamp-min
)};
--card-content-font-size-clamp-val: #{release.get-desktop(
$card-content-font-size-clamp-val
)};
--card-content-font-size-clamp-max: #{release.get-desktop(
$card-content-font-size-clamp-max
)};
--download-gap: #{release.get-desktop($download-gap)};
--download-font-size: #{release.get-desktop($download-font-size)};
/** Color **/
--card-background-color: white;
--card-color: #2d2d2d;
--color-code-symbol: #{colors.$code-symbol--light};
--color-code-keyword: #{colors.$code-keyword--light};
--color-code-controlflow: #{colors.$code-controlflow--light};
--color-code-basetype: #{colors.$code-basetype--light};
--color-code-enginetype: #{colors.$code-enginetype--light};
--color-code-usertype: #{colors.$code-usertype--light};
--color-code-string: #{colors.$code-string--light};
--color-code-background: #{colors.$code-background--light};
--color-code-text: #{colors.$code-text--light};
--color-code-function: #{colors.$code-function--light};
--color-code-membervariable: #{colors.$code-membervariable--light};
--color-code-gdscript-function: #{colors.$code-gdscript-function--light};
--color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--light};
--color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--light};
--color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--light};
--color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--light};
--color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--light};
@include release.is-dark() {
--card-background-color: #333639;
--card-color: white;
--color-code-symbol: #{colors.$code-symbol--dark};
--color-code-keyword: #{colors.$code-keyword--dark};
--color-code-controlflow: #{colors.$code-controlflow--dark};
--color-code-basetype: #{colors.$code-basetype--dark};
--color-code-enginetype: #{colors.$code-enginetype--dark};
--color-code-usertype: #{colors.$code-usertype--dark};
--color-code-string: #{colors.$code-string--dark};
--color-code-background: #{colors.$code-background--dark};
--color-code-text: #{colors.$code-text--dark};
--color-code-function: #{colors.$code-function--dark};
--color-code-membervariable: #{colors.$code-membervariable--dark};
--color-code-gdscript-function: #{colors.$code-gdscript-function--dark};
--color-code-gdscript-globalfunction: #{colors.$code-gdscript-globalfunction--dark};
--color-code-gdscript-nodepath: #{colors.$code-gdscript-nodepath--dark};
--color-code-gdscript-nodereference: #{colors.$code-gdscript-nodereference--dark};
--color-code-gdscript-annotation: #{colors.$code-gdscript-annotation--dark};
--color-code-gdscript-stringname: #{colors.$code-gdscript-stringname--dark};
}
a {
text-decoration-thickness: 1px;
}
/**
* Responsive sizes.
*/
--release-title-font-size: #{r-get-desktop($release-title-font-size)};
--release-section-margin-top: #{r-get-desktop($release-section-margin-top)};
--release-section-margin-bottom: #{r-get-desktop(
$release-section-margin-bottom
)};
--card-padding: #{r-get-desktop($card-padding)};
--card-title-font-size: #{r-get-desktop($card-title-font-size)};
--card-content-font-size-clamp-min: #{r-get-desktop(
$card-content-font-size-clamp-min
)};
--card-content-font-size-clamp-val: #{r-get-desktop(
$card-content-font-size-clamp-val
)};
--card-content-font-size-clamp-max: #{r-get-desktop(
$card-content-font-size-clamp-max
)};
--download-gap: #{r-get-desktop($download-gap)};
--download-font-size: #{r-get-desktop($download-font-size)};
@include release.is-light() {
background-color: #cecece;
}
@include is-mobile() {
--release-title-font-size: #{r-get-mobile($release-title-font-size)};
--release-section-margin-top: #{r-get-mobile($release-section-margin-top)};
--release-section-margin-bottom: #{r-get-mobile(
--release-title-font-size: #{release.get-mobile($release-title-font-size)};
--release-section-margin-top: #{release.get-mobile($release-section-margin-top)};
--release-section-margin-bottom: #{release.get-mobile(
$release-section-margin-bottom
)};
--card-padding: #{r-get-mobile($card-padding)};
--card-title-font-size: #{r-get-mobile($card-title-font-size)};
--card-content-font-size-clamp-min: #{r-get-mobile(
--card-padding: #{release.get-mobile($card-padding)};
--card-title-font-size: #{release.get-mobile($card-title-font-size)};
--card-content-font-size-clamp-min: #{release.get-mobile(
$card-content-font-size-clamp-min
)};
--card-content-font-size-clamp-val: #{r-get-mobile(
--card-content-font-size-clamp-val: #{release.get-mobile(
$card-content-font-size-clamp-val
)};
--card-content-font-size-clamp-max: #{r-get-mobile(
--card-content-font-size-clamp-max: #{release.get-mobile(
$card-content-font-size-clamp-max
)};
--download-gap: #{r-get-mobile($download-gap)};
--download-font-size: #{r-get-mobile($download-font-size)};
}
/** Color **/
--card-background-color: white;
--card-color: #2d2d2d;
--color-code-symbol: #{$color-code-symbol--light};
--color-code-keyword: #{$color-code-keyword--light};
--color-code-controlflow: #{$color-code-controlflow--light};
--color-code-basetype: #{$color-code-basetype--light};
--color-code-enginetype: #{$color-code-enginetype--light};
--color-code-usertype: #{$color-code-usertype--light};
--color-code-string: #{$color-code-string--light};
--color-code-background: #{$color-code-background--light};
--color-code-text: #{$color-code-text--light};
--color-code-function: #{$color-code-function--light};
--color-code-membervariable: #{$color-code-membervariable--light};
--color-code-gdscript-function: #{$color-code-gdscript-function--light};
--color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--light};
--color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--light};
--color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--light};
--color-code-gdscript-annotation: #{$color-code-gdscript-annotation--light};
--color-code-gdscript-stringname: #{$color-code-gdscript-stringname--light};
@include is-dark() {
--card-background-color: #333639;
--card-color: white;
--color-code-symbol: #{$color-code-symbol--dark};
--color-code-keyword: #{$color-code-keyword--dark};
--color-code-controlflow: #{$color-code-controlflow--dark};
--color-code-basetype: #{$color-code-basetype--dark};
--color-code-enginetype: #{$color-code-enginetype--dark};
--color-code-usertype: #{$color-code-usertype--dark};
--color-code-string: #{$color-code-string--dark};
--color-code-background: #{$color-code-background--dark};
--color-code-text: #{$color-code-text--dark};
--color-code-function: #{$color-code-function--dark};
--color-code-membervariable: #{$color-code-membervariable--dark};
--color-code-gdscript-function: #{$color-code-gdscript-function--dark};
--color-code-gdscript-globalfunction: #{$color-code-gdscript-globalfunction--dark};
--color-code-gdscript-nodepath: #{$color-code-gdscript-nodepath--dark};
--color-code-gdscript-nodereference: #{$color-code-gdscript-nodereference--dark};
--color-code-gdscript-annotation: #{$color-code-gdscript-annotation--dark};
--color-code-gdscript-stringname: #{$color-code-gdscript-stringname--dark};
--download-gap: #{release.get-mobile($download-gap)};
--download-font-size: #{release.get-mobile($download-font-size)};
}
code.highlight,
.code-highlight {
$_padding: 5px;
background-color: color-mix(
in srgb,
var(--color-code-background),
transparent 15%
);
@include is-dark() {
background-color: color-mix(
in srgb,
var(--color-code-background),
transparent 50%
);
}
display: inline-block;
padding: 0 ($_padding / 2);
padding: 0 calc($_padding / 2);
margin: 0 0;
border-radius: $_padding;
@@ -639,6 +629,19 @@ $donate-robot-size: 500px;
Liberation Mono,
monospace;
background-color: color-mix(
in srgb,
var(--color-code-background),
transparent 15%
);
@include release.is-dark() {
background-color: color-mix(
in srgb,
var(--color-code-background),
transparent 50%
);
}
@each $key
in (
symbol
@@ -802,7 +805,7 @@ $donate-robot-size: 500px;
.bar {
display: inline-block;
height: $header-bar-height;
background-color: var(--bar-color, #{$color-godot-blue});
background-color: var(--bar-color, #{colors.$godot-blue});
transform: translateY(2px);
margin-right: $header-bar-gap;
}
@@ -1249,13 +1252,13 @@ $donate-robot-size: 500px;
font-size: var(--card-title-font-size);
a {
text-decoration: none;
color: var(--color-top);
@include is-dark() {
@include release.is-dark() {
color: white;
text-decoration-color: white;
}
text-decoration: none;
&:hover {
text-decoration: underline;
}
@@ -1342,7 +1345,7 @@ $donate-robot-size: 500px;
font-size: 21px;
font-weight: 700;
@include is-dark() {
@include release.is-dark() {
color: white;
text-decoration-color: white;
}
@@ -1604,7 +1607,7 @@ $donate-robot-size: 500px;
font-size: #{"max(clamp(4cqw, 50px, 6cqw), 2em)"};
font-weight: 800;
@at-root #{selector-replace(&, ".section", ".section.subsection")} {
@at-root #{selector.replace(&, ".section", ".section.subsection")} {
font-size: #{"max(clamp(2cqw, 35px, 4cqw), 1.5em)"};
font-weight: 600;
}
@@ -1635,33 +1638,33 @@ $donate-robot-size: 500px;
@each $section-name, $section-colors in $sections {
.section-#{$section-name} {
--color-top: #{map-get($section-colors, "color-top")};
--color-bottom: #{map-get($section-colors, "color-bottom")};
--color-top-muted: #{map-get($section-colors, "color-top-muted")};
--color-bottom-muted: #{map-get($section-colors, "color-bottom-muted")};
--color-selection: #{map-get($section-colors, "color-selection")};
--color-invert: #{map-get($section-colors, "color-invert")};
--color-highlight: #{map-get($section-colors, "color-highlight")};
--color-highlight-switch: #{map-get(
--color-top: #{map.get($section-colors, "color-top")};
--color-bottom: #{map.get($section-colors, "color-bottom")};
--color-top-muted: #{map.get($section-colors, "color-top-muted")};
--color-bottom-muted: #{map.get($section-colors, "color-bottom-muted")};
--color-selection: #{map.get($section-colors, "color-selection")};
--color-invert: #{map.get($section-colors, "color-invert")};
--color-highlight: #{map.get($section-colors, "color-highlight")};
--color-highlight-switch: #{map.get(
$section-colors,
"color-highlight--dark"
)};
--color-invert-highlight: #{map-get(
--color-invert-highlight: #{map.get(
$section-colors,
"color-invert-highlight"
)};
@include is-light() {
--color-selection: #{map-get(
@include release.is-light() {
--color-selection: #{map.get(
$section-colors,
"color-selection--light"
)};
}
@include is-dark() {
--color-highlight: #{map-get(
@include release.is-dark() {
--color-highlight: #{map.get(
$section-colors,
"color-highlight--dark"
)};
--color-highlight-switch: #{map-get(
--color-highlight-switch: #{map.get(
$section-colors,
"color-highlight"
)};