1 files changed, 136 insertions, 0 deletions
diff --git a/data/assets/styles.css b/data/assets/styles.css
new file mode 100644
index 0000000..4ff8fec
--- /dev/null
+++ b/data/assets/styles.css
@@ -0,0 +1,136 @@
+body {
+    font-family: sans-serif;
+	line-height: 1.6;
+    background-color: #111;
+    color: #fff;
+	max-width: 80%;
+	margin: auto;
+}
+
+h1 {
+	text-align: center;
+}
+
+h1,h2,h3,h4 {
+	font-family: Courier New, Courier, Consolas, monospace;
+}
+
+a {
+    color: #f3c;
+    text-decoration: none;
+    background-color: transparent;
+}
+
+a:hover, a:focus {
+    text-decoration: none; 
+    background-color: #f3c;
+    color: #fff; 
+}
+
+table {	
+    width: 90%;
+    border-collapse: collapse;
+    margin: 12px auto;
+	font-size: 1em;
+}
+
+tr { 
+    margin-bottom: 10px; 
+}
+
+tr:nth-child(odd) {
+        background-color: #222; /* Light gray for odd rows */
+}
+
+tr:hover {
+    background-color: #444; /*  hover effect for table rows */
+}
+
+th, td {
+    padding: 10px;
+    border: 2px solid #666;
+	text-align: left; 
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+th {
+    background-color: #444;
+    text-align: center;
+	font-size: 1.1em;
+	font-family: Courier New, Courier, Consolas, monospace;
+}
+
+.container {
+    max-width: 800px; 
+    margin: auto;
+    padding: 12px;
+}
+
+@media screen and (max-width: 600px) {
+    body {
+        font-size: 90%; 
+    }
+
+    table { 
+		width: 100%;
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+
+    th, td {
+        display: block;
+        text-align: left;
+		white-space: normal;
+    }
+	
+    tr {
+        display: flex; 
+        flex-direction: column; 
+    }
+
+}
+: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;
+}
+