Fix scaling on mobile

1 files changed, 20 insertions, 0 deletions

diff --git a/themes/markskitchen/static/css/common.css b/themes/markskitchen/static/css/common.css
index b52a0d7..0a248e5 100644
--- a/themes/markskitchen/static/css/common.css
+++ b/themes/markskitchen/static/css/common.css
@@ -1,3 +1,11 @@
+html {
+  max-width: 70ch;
+  padding: 3em 1em;
+  margin: auto;
+  line-height: 1.75;
+  font-size: 1.25em;
+}
+
 #main > .post + .post {
     margin-top: 2rem;
 }
@@ -97,6 +105,12 @@ body {
     }
 }
 
+@media screen and (max-width: 512px) {
+    .item-date {
+        display: none;
+    }
+}
+
 #header > nav {
     display: flex;
     flex-direction: row;
@@ -104,6 +118,7 @@ body {
     flex-wrap: wrap;
     max-width: 768px;
     width: 100%;
+    margin: 1rem;
 }
 
 #header > nav > span > a {
@@ -258,11 +273,16 @@ footer {
 dl > dt {
     font-weight: bold;
 }
+
 dd {
     padding-left: 2em;
     padding-bottom: 1em;
 }
 
+li {
+    margin-bottom: 0.5rem;
+}
+
 .email::after {
     content: "@marks.kitchen";
 }