fix(redesign): static top download

new/download.html

@@ -16,21 +16,6 @@
 			<h1>Download</h1>
 		</article>
 
-		<div class="wrapper filters">
-			<input id="search-package" placeholder="Search package: e.g. cloudflare" class="shadow" />
-			<select id="sort-package" class="shadow">
-				<option value="download">Sort by most popular</option>
-				<option value="alphabetically">Sort alphabetically</option>
-				<option value="type">Group by module namespace</option>
-			</select>
-		</div>
-
-		<div class="wrapper list">
-			<div id="side-panel-packages">
-			</div>
-			<div id="packages">
-			</div>
-		</div>
 		<div id="download" class="wrapper">
 			<div class="shadow-lg">
 				<div id="downloader">
@@ -64,10 +49,10 @@
 						<option value="windows-arm-7">Windows arm 7</option>
 						<option value="windows-arm64">Windows arm64</option>
 					</select>
-					<button>Download</button>
+					<button class="primary">Download</button>
 				</div>
 
-				<div id="command">
+				<div id="command" onclick="copyCommand()">
 					<pre>
 						<span id="command-builder">xcaddy build</span>
 					</pre>
@@ -81,6 +66,22 @@
 				</div>
 			</div>
 		</div>
+
+		<div class="wrapper filters">
+			<input id="search-package" placeholder="Search package: e.g. cloudflare" class="shadow" />
+			<select id="sort-package" class="shadow">
+				<option value="download">Sort by most popular</option>
+				<option value="alphabetically">Sort alphabetically</option>
+				<option value="type">Group by module namespace</option>
+			</select>
+		</div>
+
+		<div class="wrapper list">
+			<div id="side-panel-packages">
+			</div>
+			<div id="packages">
+			</div>
+		</div>
 	</main>
 
 

new/resources/css/download.css

@@ -63,8 +63,9 @@ html {
 
 #download {
     position: sticky;
-    bottom: 0;
+    top: 0;
-    padding-bottom: 16px;
+    padding-bottom: 32px;
+    z-index: 10;
 }
 
 #download>div {
@@ -90,7 +91,7 @@ html {
 }
 
 #downloader {
-    padding-bottom: 8px;
+    padding-bottom: 16px;
 }
 
 #command {
@@ -111,6 +112,7 @@ html {
 
 #command>svg {
     height: 1em;
+    cursor: pointer;
 }
 
 #command-builder::before {
@@ -151,9 +153,16 @@ h2 {
     color: var(--text-color);
 }
 
+.card-title-name>a {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow-x: hidden;
+}
+
 .card-title-info {
     display: inline-flex;
-    gap: 16px;
+    gap: 8px;
     font-size: 90%;
     color: var(--text-color-muted);
 }
@@ -235,10 +244,11 @@ select {
     height: 3rem;
     font-size: 100%;
     font-weight: 600;
-    background-color: white;
+    border: 1px solid var(--button-border-color);
+    color: var(--text-color);
+    background-color: var(--body-bg);
     width: 100%;
     border-radius: var(--radius);
-    border: none;
 }
 
 .filters>div {
@@ -258,8 +268,7 @@ select {
     line-height: 1.25rem;
     line-height: 2;
     min-height: 3rem;
-    border-width: 1px;
+    border: 1px solid var(--button-border-color);
-    border-color: var(--text-color-muted);
     background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
     background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
     background-size: 4px 4px, 4px 4px;

new/resources/js/download.js

@@ -138,4 +138,8 @@ function togglePackage({ target: { dataset: { module } } }) {
     }
 
     document.getElementById('command-builder').innerText = `xcaddy build${packages.map(p => ` --with ${p}`).join('')}`
+}
+
+function copyCommand() {
+    navigator.clipboard.writeText(`xcaddy build${packages.map(s => ` --with ${s}`).join('')}`)
 }