Fix links colors and size

Author: adamscott

_sass/common/_release_style.scss

@@ -81,7 +81,6 @@ $sections: r-generate-sections(
 	$base-color: $color-godot-blue,
 	$offset: $section-hue-offset,
 );
-$subsection-base-color: grey;
 
 $donate-robot-size: 500px;
 
@@ -97,6 +96,12 @@ $donate-robot-size: 500px;
 	}
 }
 
+$subsection-base-color: grey;
+@mixin subsection-color() {
+	--color-top: #{adjust-color($subsection-base-color, $lightness: 10)};
+	--color-bottom: #{$subsection-base-color};
+}
+
 #scroll-to-top {
 	position: fixed;
 	top: 0;
@@ -291,26 +296,34 @@ $donate-robot-size: 500px;
 		border-radius: calc(var(--card-padding) / 2);
 		text-decoration: none;
 		color: white;
-		font-size: 0.75em;
-
-		@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")};
-				background: linear-gradient(
-					to bottom,
-					var(--color-top),
-					var(--color-bottom)
-				);
-			}
-		}
+		font-size: 1em;
+
+		background: linear-gradient(
+			to bottom,
+			var(--color-top),
+			var(--color-bottom)
+		);
+		@include subsection-color();
 
 		&:hover {
 			& > span {
 				text-decoration: underline;
 			}
 		}
 	}
+
+	&.main-list {
+		font-size: 150%;
+
+		.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")};
+				}
+			}
+		}
+	}
 }
 
 #special-thanks-release-authors {
@@ -1317,8 +1330,7 @@ $donate-robot-size: 500px;
 			}
 
 			&.subsection {
-				--color-top: #{adjust-color($subsection-base-color, $lightness: 10)};
-				--color-bottom: #{$subsection-base-color};
+				@include subsection-color();
 			}
 
 			// Remove margins from the .subsection under a .section

pages/releases/4.4.html

@@ -174,14 +174,9 @@
 						<div class="release-card-content">
 							<div class="release-card-content-container">
 								<div class="c-content">
-									<ul class="links-container">
+									<ul class="links-container main-list">
 										<li><a class="link link-highlights" href="#highlights"><span>Highlights</span></a></li>
-										<li><a class="link link-_2D" href="#_2D"><span>2D</span></a></li>
-										<li><a class="link link-_3D" href="#_3D"><span>3D</span></a></li>
-										<li><a class="link link-core" href="#core"><span>Core</span></a></li>
-										<li><a class="link link-documentation" href="#documentation"><span>Documentation</span></a></li>
-										<li><a class="link link-editor" href="#editor"><span>Editor</span></a></li>
-										<li><a class="link link-GUI" href="#GUI"><span>GUI</span></a></li>
+										<li><a class="link link-general" href="#general"><span>General</span></a></li>
 										<li><a class="link link-platforms" href="#platforms"><span>Platforms</span></a></li>
 										<li><a class="link link-scripting" href="#scripting"><span>Scripting</span></a></li>
 										<li><a class="link link-systems" href="#Systems"><span>Systems</span></a></li>