Merge pull request #1234 from fermyon/quick-update-projects

add wasm-lang as 4th card on the dev homepage
fermyon · Apr 2, 2024 · 1787163 · 1787163
2 parents d5a1e46 + 1fa00db
commit 1787163
Show file tree

Hide file tree

Showing 7 changed files with 241 additions and 74 deletions.
diff --git a/static/css/arrow-right.b9889f0e.png b/static/css/arrow-right.b9889f0e.png
diff --git a/static/css/styles.css b/static/css/styles.css
diff --git a/static/image/arrow-right.png b/static/image/arrow-right.png
diff --git a/static/sass/developer-color-dark.scss b/static/sass/developer-color-dark.scss
@@ -480,6 +480,19 @@ html.dark-theme {
 				color: $oxfordblue !important;
 			}
 		}
+        .wasm-lang {
+            border: 1px solid $lavenderfloral;
+            background: lighten($oxforddark, 2%) url(/static/image/arrow-right.png) no-repeat 95% center;
+
+            .card-content {
+                h3 {
+                    color: white !important;
+                }
+                p {
+                    color: $lightplum !important;
+                }
+            }
+        }
 
 		.flickity-button {
 			background: $darkplum;

diff --git a/static/sass/developer-content-home.scss b/static/sass/developer-content-home.scss
@@ -74,14 +74,15 @@
 	}
 
 	.card.project {
-		background: $lightlavender;
-		min-height: 460px;
+		min-height: 484px;
 		padding-bottom: 5rem;
 		border-radius: 0.67rem;
 		margin-bottom: 3.333rem;
-		border: none !important;
+		border: 1px solid $lavenderfloral;
+		background: darken($docsbg1, 1.5%);
 		box-shadow: rgba(0, 0, 0, 0.04) 1px 3px 5px;
 		overflow: hidden;
+		border-radius: 1rem;
 		@include transition;
 
 		&:hover {
@@ -110,10 +111,12 @@
 
 		h3 {
 			margin: 0.67rem 0 1.5rem;
-			line-height: 1.5;
-			font-size: 1.75vw;
-			color: darken($darkblue, 10%) !important;
-			font-weight: 500;
+			line-height: 1.425;
+			font-size: 1.333rem;
+			padding-right: 5%;
+			color: $oxforddark !important;
+			font-weight: 400;
+			font-family: $spaceGro;
 
 			a {
 				color: $darkblue !important;
@@ -123,10 +126,13 @@
 		p {
 			color: darken($darkblue, 10%) !important;
 			line-height: 1.5;
+			font-size: 0.875rem;
+			font-weight: normal;
+			font-family: $work;
 		}
 
 		span {
-			color: $darkplum !important;
+			color: $oxforddark !important;
 
 			&:after {
 				display: none !important;
@@ -170,6 +176,54 @@
 		}
 	}
 
+	.wasm-lang {
+		position: relative;
+		box-shadow: rgba(0, 0, 0, 0.04) 1px 3px 5px;
+		overflow: hidden;
+		background: $lightlavender;
+		min-height: 140px;
+		margin-bottom: 6.25em;
+		border: 1px solid $lavenderfloral;
+		background: darken($docsbg1, 1.5%) url(/static/image/arrow-right.png) no-repeat 95% center;
+		border-radius: 1rem;
+		@include transition;
+
+		figure.image {
+			margin: 0;
+		}
+		.card-image {
+			position: absolute;
+			left: 1.5rem;
+			top: 0.5rem;
+		}
+
+		.card-content {
+			padding-left: 12rem;
+
+			h3 {
+				margin: 0.67rem 0;
+				line-height: 1.425;
+				font-size: 1.67rem;
+				padding-right: 5%;
+				color: $oxforddark !important;
+				font-weight: 400;
+				font-family: $spaceGro;
+
+				a {
+					color: $darkblue !important;
+				}
+			}
+
+			p {
+				color: darken($darkblue, 10%) !important;
+				line-height: 1.5;
+				font-size: 0.875rem;
+				font-weight: normal;
+				font-family: $work;
+			}
+		}
+	}
+
 	.community-highlight {
 		background-color: saturate($darkplum, 12.5%);
 		border-radius: 0.5rem;