add css for tables; improve mobile readability

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>

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>
 

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>

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);
 }