4.3 release page (redux)

_config.yml

@@ -91,3 +91,8 @@ pagination:
   category: "posts"
   tag: ""
   locale: ""
+
+# .scss generation
+sass:
+  sass_dir: _sass
+  style: compressed

_data/versions.yml

@@ -1,8 +1,12 @@
 - name: "4.3"
-  flavor: "rc3"
-  release_date: "8 August 2024"
-  release_notes: "/article/release-candidate-godot-4-3-rc-3/"
+  flavor: "stable"
+  release_date: "15 August 2024"
+  release_notes: "/releases/4.3/"
+  featured: "4"
   releases:
+    - name: "rc3"
+      release_date: "8 August 2024"
+      release_notes: "/article/release-candidate-godot-4-3-rc-3/"
     - name: "rc2"
       release_date: "1 August 2024"
       release_notes: "/article/release-candidate-godot-4-3-rc-2/"
@@ -41,7 +45,6 @@
   flavor: "stable"
   release_date: "17 April 2024"
   release_notes: "/article/maintenance-release-godot-4-2-2-and-4-1-4/"
-  featured: "4"
   releases:
     - name: "rc3"
       release_date: "12 April 2024"

_includes/articles/download_card.html

@@ -26,12 +26,12 @@
 				{% if primary[0] == "linux" or primary[0] == "macos" or primary[0] == "windows" %}
 					{% assign platform_info = site.data.download_platforms | find: "name", primary[1] %}
 
-					<div class="download-platform">
+					<div class="download-platform platform-{{primary[0]}}">
 						<img width="24" height="24" src="/assets/images/platforms/{{ primary[0] | split: "_" | join: "-" }}.svg" title="{{ platform_info.title }}" alt="{{ platform_info.title }}" class="lightbox-ignore" />
 						{{ platform_info.title }}
 					</div>
 
-					<a href="{{ release_version | make_download: primary[1], false, "github_builds" }}" class="btn btn-download btn-download-primary">
+					<a href="{{ release_version | make_download: primary[1], false, "github_builds" }}" class="btn btn-download btn-download-primary platform-{{primary[0]}}">
 						<div class="download-title">
 							Standard
 						</div>
@@ -42,7 +42,7 @@
 						<div></div>
 					{% else %}
 						{% assign has_mono = true %}
-						<a href="{{ mono_download }}" class="btn btn-download btn-download-primary btn-download-primary--mono">
+						<a href="{{ mono_download }}" class="btn btn-download btn-download-primary btn-download-primary--mono platform-{{primary[0]}}">
 							<div class="download-title">
 								.NET
 							</div>

_layouts/default.html

@@ -24,8 +24,8 @@
 	<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
 	<link rel="stylesheet" href="/assets/css/main.css?113">
 	<link rel="stylesheet" href="/assets/css/tobii.min.css">
-	<link rel="preload" as="font" href="/assets/fonts/Montserrat-Bold.woff2" crossorigin>
-	<link rel="preload" as="font" href="/assets/fonts/Montserrat-ExtraBold.woff2" crossorigin>
+	<link rel="preload" as="font" href="/assets/fonts/Montserrat-Italic-VariableFont_wght.woff2" crossorigin>
+	<link rel="preload" as="font" href="/assets/fonts/Montserrat-VariableFont_wght.woff2" crossorigin>
 	<link rel="me" href="https://mastodon.gamedev.place/@godotengine">
 </head>
 

_layouts/release.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+{% include header.html %}
+
+<link rel="stylesheet" href="/assets/css/release.css" />
+
+<div class="release-container">
+	{{ content }}
+</div>
+
+{% include footer.html %}

_sass/common/_colors.scss

@@ -0,0 +1,36 @@
+$color-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;

_sass/common/_release.scss

@@ -0,0 +1,53 @@
+@function offset-hue($color, $offset, $i: 1) {
+	@return adjust-hue($color, $offset * $i);
+}
+
+/**
+ * From a list $sections (video, foundation, outstanding, _2d),
+ * 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) {
+	$return-value: ();
+	$base-category-i: index($sections, $base-category);
+	@each $section in $sections {
+		$i: index($sections, $section);
+		$diff: $i - $base-category-i;
+		$base-color-top: offset-hue($base-color, $offset, $diff);
+		$base-color-bottom: adjust-color(offset-hue($base-color, $offset, $diff + 1), $lightness: -10);
+		$color-top: adjust-color($base-color-top, $saturation: -10);
+		$color-bottom: adjust-color($base-color-bottom, $saturation: -10);
+		$color-selection: adjust-color($base-color-bottom, $saturation: -30);
+		$color-invert: adjust-color($base-color-top, $hue: 180, $lightness: 0, $saturation: 30);
+		$color-highlight: adjust-color($base-color-top, $lightness: 0, $saturation: 30);
+		$color-highlight--dark: adjust-color($base-color-top, $lightness: 30, $saturation: 30);
+		$color-invert-highlight: adjust-color($color-invert, $lightness: 20, $saturation: 30);
+		$return-value: map-merge($return-value, (
+			#{$section}: (
+				color-top: $color-top,
+				color-bottom: $color-bottom,
+				color-selection: $color-selection,
+				color-invert: $color-invert,
+				color-highlight: $color-highlight,
+				color-highlight--dark: $color-highlight--dark,
+				color-invert-highlight: $color-invert-highlight
+			)
+		));
+	}
+	@return $return-value;
+}
+
+@function r-desktop-mobile($sizes...) {
+	@return (
+		"desktop": nth($sizes, 1),
+		"mobile": nth($sizes, 2)
+	);
+}
+
+@function r-get-desktop($value) {
+	@return map-get($value, "desktop");
+}
+
+@function r-get-mobile($value) {
+	@return map-get($value, "mobile");
+}