Styling tweaks (#17)

JonathanBout · Nov 29, 2024 · 312a833 · 312a833
1 parent 5e27839
commit 312a833
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/SimpleCDN/Services/IndexGenerator.cs b/SimpleCDN/Services/IndexGenerator.cs
@@ -35,10 +35,10 @@ public class IndexGenerator(IOptionsMonitor<CDNConfiguration> options) : IIndexG
 				<main>
 					<table>
 						<thead><tr>
-							<th></th>
-							<th>Name</th>
-							<th>Size</th>
-							<th>Last Modified (UTC)</th>
+							<th class="col-icon"></th>
+							<th class="col-name">Name</th>
+							<th class="col-size">Size</th>
+							<th class="col-date">Last Change (UTC)</th>
 						</tr></thead>
 						<tbody>
 				""", rootRelativePath.Replace("/", "<wbr>/"), _options.CurrentValue.PageTitle, rootRelativePath);
@@ -83,10 +83,10 @@ public class IndexGenerator(IOptionsMonitor<CDNConfiguration> options) : IIndexG
 		private static void AppendRow(StringBuilder index, string href, string name, string icon, long size, DateTimeOffset lastModified)
 		{
 			index.Append("<tr>");
-			index.AppendFormat("""<td><img src="/_cdn/{0}.svg" alt="{0}"></img></td>""", icon);
-			index.AppendFormat("""<td><a href="{0}">{1}</a></td>""", href, name);
-			index.AppendFormat("""<td>{0}</td>""", size < 0 ? "-" : size.FormatByteCount());
-			index.AppendFormat("""<td>{0}</td>""", lastModified.ToString("dd/MM/yyyy HH:mm"));
+			index.AppendFormat("""<td class="col-icon"><img src="/_cdn/{0}.svg" alt="{0}"></img></td>""", icon);
+			index.AppendFormat("""<td class="col-name"><a href="{0}">{1}</a></td>""", href, name);
+			index.AppendFormat("""<td class="col-size">{0}</td>""", size < 0 ? "-" : size.FormatByteCount());
+			index.AppendFormat("""<td class="col-date">{0}</td>""", lastModified.ToString("dd/MM/yyyy HH:mm"));
 			index.Append("</tr>");
 		}
 	}

diff --git a/SimpleCDN/wwwroot/styles.css b/SimpleCDN/wwwroot/styles.css
@@ -1,11 +1,11 @@
 @font-face {
     font-family: Code;
     font-display: swap;
-    src: local("Cascadia Code"),url(/CascadiaCode/woff2/CascadiaCode.woff2) format("woff2"),url(/CascadiaCode/ttf/CascadiaCode.ttf) format("truetype"),url(/CascadiaCode/CascadiaCode.ttf) format("truetype"),url(/CascadiaCode/otf/static/CascadiaCodeNF-Regular.otf) format("opentype"),local("Cascadia Mono"),monospace;
+    src: local("Cascadia Code"),url(/CascadiaCode/woff2/CascadiaCode.woff2) format("woff2"),url(/CascadiaCode/ttf/CascadiaCode.ttf) format("truetype"),url(/CascadiaCode/CascadiaCode.ttf) format("truetype"),url(/CascadiaCode/otf/static/CascadiaCodeNF-Regular.otf) format("opentype"),local("Cascadia Mono");
 }
 
 :root {
-	font-family: Code;
+	font-family: Code, monospace;
 }
 
 * {
@@ -32,6 +32,7 @@ main {
 table {
 	margin: auto;
 	overflow: auto;
+	border-collapse: collapse;
 }
 
 h1 {
@@ -45,11 +46,31 @@ th, td {
 	padding: .2em 1em;
 }
 
+.col-size, .col-date {
+	text-align: center;
+}
+
 thead th {
 	font-size: 1.2rem;
 	border-bottom: 1px solid black;
 }
 
+tr {
+	position: relative;
+	transition: background-color .5s;
+}
+
+tr:has(a):hover {
+	transition: background-color 200ms;
+	background-color: #eee;
+}
+
+.col-name a::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
 footer {
 	text-align: center;
 }