Add CSS Styling to Workers.new/list (cloudflare#88)

* add css styling * custom css styling * remove text decoration
moiplay · Aug 3, 2022 · 393e1ae · 393e1ae
1 parent 2f41e76
commit 393e1ae
Showing 1 changed file with 69 additions and 3 deletions.
diff --git a/packages/workers.new/src/index.ts b/packages/workers.new/src/index.ts
@@ -1,3 +1,4 @@
+import { promisify } from 'util';
 // Redirect https://workers.new/<known> requests to IDE.
 // Redirect https://workers.new/*? requests to dashboard.
 // Similar to the concept of https://docs.new.
@@ -65,14 +66,79 @@ function getListHTML(redirects: Redirects) {
 	return `
 <html>
 <head></head>
+<style>
+	body {
+		margin: 0px;
+		font-family:  Arial, Helvetica, sans-serif;
+	}
+
+	h1{
+		text-align: center;
+		margin: 20px 0;
+		font-size: 4rem;
+	}
+
+	.title-accent {
+		color: #F6821F;
+		font-weight: 700;
+		text-decoration: underline;
+	}
+
+	.subtitle {
+		text-align: center;
+		margin-top: 20px;
+		font-size: 2rem;
+	}
+
+	ul {
+		text-decoration: none;
+		list-style: none;
+		display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    min-height: 170px;
+		font-size: 24px;
+		text-align: center;
+		padding-top: 30px;
+	}
+
+	a {
+		color: inherit; 
+		text-decoration: inherit;
+	}
+
+li {
+	border-radius: 5px;
+  font-size: 24px;
+  font-weight: 700;
+	border: 1px solid #f6821f;
+  padding: 30px 20px;
+	box-shadow: rgba(246, 130, 31, 0.4) 5px 5px;
+	margin: 10px;
+}
+
+.title {
+	font-size: 20px;
+	font-weight: 400;
+}
+
+</style>
 <body>
-	<h1>List of workers.new redirects</h1>
+	<h1>List of <span class="title-accent">workers.new</span> Redirects</h1>
+	<p class="subtitle">A collection of Stackblitz templates ready for you to use!</p>
 	<ul>
-		<li><a href="/">workers.new</a> - Cloudflare Dashboard shortcut</li>
+		<li>
+			<a href="/">workers.new</a>
+			<p class="title"> Cloudflare Dashboard shortcut </p>
+		</li>
 		${Object.keys(redirects)
 			.map(pathname => {
 				const [subdir, file, title, terminal] = redirects[pathname] || [];
-				return `<li><a href="${pathname}">workers.new${pathname}</a> - ${title}</li>`;
+				return `<li>
+					<a href="${pathname}">workers.new${pathname}</a> 
+					<p class="title">${title}</p>
+				</li>`;
 			})
 			.join('\n')}
 	</ul>