Download button draft

godotengine · Aug 9, 2024 · ccf8421 · ccf8421
1 parent 458017f
commit ccf8421
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/assets/css/releases/4.3.scss b/assets/css/releases/4.3.scss
@@ -7,7 +7,7 @@
 $column-max-width: 400px;
 $column-min-width: 300px;
 $container-break: 450px;
-$grid-gap: 20px;
+$grid-gap: 30px;
 $one-column-max-width: ($column-max-width * 2) - ($grid-gap * 1);
 $two-columns-max-width: ($column-max-width * 3) - ($grid-gap * 2);
 $mobile-max-width: 700px;
@@ -71,7 +71,7 @@ $release-section-margin-top: r-desktop-mobile(80px, 40px);
 $release-section-margin-bottom: r-desktop-mobile(40px, 20px);
 
 $card-padding: r-desktop-mobile(17px, 15px);
-$card-title-font-size: r-desktop-mobile(21px, 18px);
+$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);
@@ -257,6 +257,36 @@ $donate-robot-size: 500px;
 			}
 		}
 	}
+	.download-button {
+		display: grid;
+		padding: 0;
+		grid-template-columns: 215px 1fr;
+  	max-width: 290px;
+		text-align: center;
+		align-items: center;
+		text-decoration: none;
+		background-color: var(--primary-color);
+		color: white;
+		margin: 0 auto 40px;
+		line-height: 32px;
+		.download-title {
+			color: var(--primary-color-text-title);
+			font-size: 20px;
+			img {
+				display: inline-block;
+				filter: invert(1);
+				margin-right: 10px;
+				width: 22px;
+				vertical-align: text-bottom;
+			}
+		}
+		.download-hint {
+			background-color: var(--primary-color-text-title);
+			color: var(--dark-color);
+			padding: 12px 16px;
+			font-weight: bold;
+		}
+	}
 }
 
 #special-thanks-release-authors {
@@ -856,7 +886,7 @@ $donate-robot-size: 500px;
 
 						.c-blockquote {
 							grid-area: quote;
-							font-size: clamp(30px, 7cqw, 40px);
+							font-size: clamp(30px, 7cqw, 35px);
 							font-weight: 800;
 
 							span.highlight {

diff --git a/pages/releases/4.3.html b/pages/releases/4.3.html
@@ -127,7 +127,13 @@ <h2 class="header-title">
 							</div>
 						</div>
 						<div class="release-card-media">
-							{% include articles/download_card.html version="4.3" release="stable" article="" %}
+							<!-- {% include articles/download_card.html version="4.3" release="stable" article="" %} -->
+							<a href="/" class="btn download-button">
+								<div class="download-title">
+									<img src="/assets/images/platforms/macos.svg" alt="(macOS)">
+									Godot Engine</div>
+								<div class="download-hint">4.3</div>
+							</a>
 						</div>
 					</div>
 				</div>