Fix scaling on mobile

3 files changed, 22 insertions, 8 deletions

diff --git a/themes/markskitchen/layouts/_default/list.html b/themes/markskitchen/layouts/_default/list.html
index 5c745d6..45c8631 100644
--- a/themes/markskitchen/layouts/_default/list.html
+++ b/themes/markskitchen/layouts/_default/list.html
@@ -13,7 +13,7 @@
   <ul>
     {{ range .Pages }}
     <li>
-      <a class="link" href="{{ .RelPermalink }}">{{ .Title }} --- <i>{{ .PublishDate.Format "January 2, 2006"}}</i></a>
+      <a class="link" href="{{ .RelPermalink }}">{{ .Title }} <i class="item-date"> --- {{ .PublishDate.Format "January 2, 2006"}}</i></a>
     </li>
     {{ end }}
   </ul>
diff --git a/themes/markskitchen/layouts/partials/head.html b/themes/markskitchen/layouts/partials/head.html
index 3bd261e..1dac155 100644
--- a/themes/markskitchen/layouts/partials/head.html
+++ b/themes/markskitchen/layouts/partials/head.html
@@ -6,13 +6,7 @@
   <meta name="author" content="{{ .Site.Author.name }}">
 
   <!-- description -->
-  {{ if .Description }}
-  <meta name="description" content="{{ .Description }}">
-  {{ else if and .IsPage .Summary }}
-  <meta name="description" content="{{ .Summary }}">
-  {{ else }}
-  <meta name="description" content="{{ .Site.Params.description }}">
-  {{ end }}
+  <meta name="description" content="{{ .Site.Params.Description }}">
 
   <!-- favicon -->
   <link rel="icon" href="{{ .Site.Params.favicon | absURL }}">
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";
 }