better buttons

Author: NotLe0n

assets/css/download.css

@@ -32,7 +32,7 @@
 #dl-icon {
     width: 1rem;
     height: 1rem;
-    fill: white;
+    fill: var(--button-color);
     margin-right: 0.5rem;
 }
 

assets/css/home.css

@@ -8,13 +8,14 @@ iframe {
 button, [role=button] {
     cursor: pointer;
     appearance: none;
-    background-color: #3b82f6;
-    color: white;
-    border-radius: 0.25rem;
+    background-color: transparent;
+    color: var(--button-color);
+    border-radius: 0.5rem;
+    border: var(--button-color) solid 1px;
 }
 
 button:hover {
-    background-color: #1d4ed8;
+    background-color: hsl(from var(--button-color) h s l / 10%)
 }
 
 .stripe {
@@ -47,6 +48,7 @@ button:hover {
 .red {
     background-color: #ef4444;
     color: black;
+    --button-color: black;
 }
 
 .gold {

assets/css/main.css

@@ -4,6 +4,7 @@
     --scrollbar-thumb-hover-bg-color: #555;
 	--c-button-height: 4rem;
 	--play-zoom-factor: 0.75;
+	--button-color: white;
 }
 
 html, body {

layouts/partials/features.html

@@ -8,7 +8,7 @@
 				{{ .Content }}
 			</div>
 			<div class="feature-play">
-				<iframe loading="lazy" src='{{ .Param "play" }}'></iframe>
+				<iframe loading="lazy" src='{{ .Param "play" }}' title="feature-playground"></iframe>
 			</div>
 		</div>
 	{{ end }}