From 5aa842ca382fe1510097532aaf2b951aba8065cf Mon Sep 17 00:00:00 2001
From: rowan <rowan@kitsu.cafe>
Date: Tue, 10 Dec 2024 12:15:38 -0600
Subject: [PATCH] add css for tables; improve mobile readability

---
 content/index.md    | 12 ++++++------
 layouts/footer.html |  2 +-
 layouts/page.html   |  4 ++--
 static/css/main.css | 38 ++++++++++++++++++++++++++++----------
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/content/index.md b/content/index.md
index bd3ebb6..3898b2c 100644
--- a/content/index.md
+++ b/content/index.md
@@ -10,7 +10,7 @@
 <div class="column">
     <div class="container">
         <div class="column align-center">
-            <nav class="card main-nav">
+            <nav class="box main-nav">
                 <li><a href="/">Index</a></li>
                 <li><a href="/blog">Blog</a></li>
                 <li><a href="/projects">Projects</a></li>
@@ -31,10 +31,10 @@
             </div>
         </div>
         <div class="primary column">
-            <div class="card has-moon">
+            <div class="box has-moon">
                 <h1 class="header">welcome!</h1>
-                <div class="card-content">
-                    <div class="card-image bubble tail right">
+                <div class="box-content">
+                    <div class="box-image bubble tail right">
                         <div class="hide-overflow">
                             <img class="hover-zoom tooltip left-top" src="/static/img/pfp.webp" width="100" height="100"></img>
                         </div>
@@ -50,7 +50,7 @@
                     <p>not everything that i make has the same focus but links to those projects will be annotated with content warnings.</p>
                 </div>
             </div>
-            <div class="card has-moon">
+            <div class="box has-moon">
                 <div class="row align-center">
                     <h1 class="header">blog</h1>
                     &nbsp;&nbsp;<a style="font-size: 150%" href="/blog">⇀</a>
@@ -68,7 +68,7 @@
                     {% endfor %}
                 </ul>
             </div>
-            <div class="card has-moon">
+            <div class="box has-moon">
                 <div class="row align-center">
                     <h1 class="header">projects</h1>
                     &nbsp;&nbsp;<a style="font-size: 150%" href="/projects">⇀</a>
diff --git a/layouts/footer.html b/layouts/footer.html
index c52d550..43159d6 100644
--- a/layouts/footer.html
+++ b/layouts/footer.html
@@ -1,2 +1,2 @@
-<footer class="card center-text">© Kitsune Cafe {{ now() | date(format="%Y") }}</footer>
+<footer class="box center-text">© Kitsune Cafe {{ now() | date(format="%Y") }}</footer>
 
diff --git a/layouts/page.html b/layouts/page.html
index 915cd4c..d44a9c5 100644
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -3,7 +3,7 @@
 {% block body %}
 {{ super() }}
 <div class="column">
-    <nav class="card row justify-center">
+    <nav class="box row justify-center">
         <li><a href="/">Index</a></li>
         <li><a href="/blog">Blog</a></li>
         <li><a href="/projects">Projects</a></li>
@@ -18,7 +18,7 @@
         <li><a href="mailto:rowan@kitsu.cafe">Email</a></li>
     </nav>
     <div class="container">
-        <div class="card">
+        <div class="box">
             {% block content %}
             {% endblock %}
         </div>
diff --git a/static/css/main.css b/static/css/main.css
index 4f9dfbf..612c6df 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -157,6 +157,19 @@ article header {
     margin-bottom: 1rem;
 }
 
+table {
+    width: 100%;
+}
+
+table thead {
+    background-color: var(--tertiary-color);
+}
+
+table tr:nth-child(2n) {
+    background-color: var(--dark-grey);
+}
+
+
 @media only screen and (min-width: 740px) {
     nav.main-nav {
         flex-direction: column;
@@ -222,19 +235,24 @@ article header {
     justify-content: space-between;
 }
 
-.card {
+.box {
     background-color: var(--background-color);
-    border: 1px solid var(--quaternary-color);
-    margin: 0.75rem;
     padding: 1rem;
-    border-radius: 4px;
 }
 
-.card.has-moon {
+@media only screen and (min-width: 740px) {
+    .box {
+        border: 1px solid var(--quaternary-color);
+        border-radius: 4px;
+        margin: 0.75rem;
+    }
+}
+
+.box.has-moon {
     position: relative;
 }
 
-.card.has-moon::before {
+.box.has-moon::before {
     content: '';
     position: absolute;
     top: 18px;
@@ -272,7 +290,7 @@ article header {
   margin-left: .25rem;
 }
 
-.card-image {
+.box-image {
     margin: 0.25rem;
     margin-right: 0.75rem;
     float: left;
@@ -280,17 +298,17 @@ article header {
     width: 100px;
 }
 
-.card-content {
+.box-content {
     display: inline-block;
     padding-left: 1rem;
 }
 
-.card-image img {
+.box-image img {
     transition: transform .25s ease;
     image-rendering: smooth;
 }
 
-.card-image img:hover {
+.box-image img:hover {
     transform: scale(1.1) translateY(-5px);
 }