1 files changed, 59 insertions, 11 deletions

diff --git a/data/assets/styles.css b/data/assets/styles.css
index f0e8ef5..4ff8fec 100644
--- a/data/assets/styles.css
+++ b/data/assets/styles.css
@@ -1,9 +1,9 @@
 body {
-    font-family: serif;
+    font-family: sans-serif;
 	line-height: 1.6;
-    background-color: #2D353B;
-    color: #D3C6AA;
-	max-width: 80rem;
+    background-color: #111;
+    color: #fff;
+	max-width: 80%;
 	margin: auto;
 }
 
@@ -11,16 +11,20 @@ h1 {
 	text-align: center;
 }
 
+h1,h2,h3,h4 {
+	font-family: Courier New, Courier, Consolas, monospace;
+}
+
 a {
-    color: #7FBBB3;
+    color: #f3c;
     text-decoration: none;
     background-color: transparent;
 }
 
 a:hover, a:focus {
     text-decoration: none; 
-    background-color: #7FBBB3;
-    color: #2D353B; 
+    background-color: #f3c;
+    color: #fff; 
 }
 
 table {	
@@ -35,16 +39,16 @@ tr {
 }
 
 tr:nth-child(odd) {
-        background-color: #343F44; /* Light gray for odd rows */
+        background-color: #222; /* Light gray for odd rows */
 }
 
 tr:hover {
-    background-color: #3D484D; /*  hover effect for table rows */
+    background-color: #444; /*  hover effect for table rows */
 }
 
 th, td {
     padding: 10px;
-    border: 2px solid #475258;
+    border: 2px solid #666;
 	text-align: left; 
 	white-space: nowrap;
 	overflow: hidden;
@@ -52,8 +56,10 @@ th, td {
 }
 
 th {
+    background-color: #444;
     text-align: center;
 	font-size: 1.1em;
+	font-family: Courier New, Courier, Consolas, monospace;
 }
 
 .container {
@@ -85,4 +91,46 @@ th {
         flex-direction: column; 
     }
 
-}
\ No newline at end of file
+}
+:root {
+  --card-border: #446868;
+  --card-link-color: #88bebe;
+}
+.cards-container {
+		width: 90%;
+		margin-left: auto;
+		margin-right: auto;
+}
+.cards-container a {
+		color: var(--card-link-color);
+}
+.cards {
+		display: grid;
+		grid-gap: 0.5rem;
+		grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+}
+.card {
+		border: 2px solid var(--card-border);
+		border-radius: 0.5rem;
+}
+.card-name {
+		background-color: var(--card-border);
+		font-size: 1.25rem;
+		padding: 0.25rem; 
+		border-radius: 0.25rem 0.25rem 0 0;
+		text-transform: lowercase;
+}
+.card-content {
+		padding: 0.5rem;
+}
+.card-link {
+		font-size: .95rem;
+		text-transform: lowercase;
+}
+.card-text {
+		font-size: 0.75rem;
+}
+.card-slug {
+		font-size: 0.75rem;
+}
+