responsive design

layouts/partials/sidebar.html

@@ -1,7 +1,9 @@
+<div class="h-card">
   <a href="/" rel="me">
     <img src="/images/me.jpg">
     <h1>{{ .Site.Title }}</h1>
   </a>
+</div>
 
 <ul>
 {{ range .Site.Menus.main }}

static/styles.css

@@ -8,11 +8,6 @@ body {
   line-height: 1.8rem;
 }
 
-a {
-  color: #ccf;
-  text-decoration: none;
-}
-
 nav {
   padding: 1em;
   width: 15em;
@@ -20,43 +15,18 @@ nav {
   text-align: center;
 }
 
-nav a {
-  color: #fff;
-}
-
 nav ul {
   text-align: left;
   list-style: none;
   padding: 0;
 }
 
-nav ul li, article a {
-  text-decoration: underline;
-}
-
 main {
   padding: 1em 1em 0em 1em;
   max-width: 50em;
   font-size: 1.2rem;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  margin: 0 0 1em 0;
-}
-
-.article {
-  padding-bottom: 1em;
-}
-
-.article a {
-  display: block;
-  margin: 0 0 0.75em 0;
-}
-
-.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
-  margin: 0 0 0.25em 0;
-}
-
 [rel="me"] img {
   width: 15em;
   height: 15em;
@@ -64,6 +34,55 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 15em;
 }
 
+@media only screen
+  and (min-device-width: 375px)
+  and (max-device-width: 812px)
+  and (-webkit-min-device-pixel-ratio: 3)
+  and (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+
+  nav {
+    width: inherit;
+    text-align: left;
+  }
+
+  [rel="me"] img {
+    display: none;
+  }
+}
+
+a {
+  color: #ccf;
+  text-decoration: none;
+}
+
+nav a {
+  color: #fff;
+}
+
+nav ul li, article a {
+  text-decoration: underline;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0 0 1em 0;
+}
+
+.article {
+  padding-bottom: 1rem;
+}
+
+.article a {
+  display: block;
+  margin: 0 0 0.75rem 0;
+}
+
+.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
+  margin: 0 0 0.25rem 0;
+}
+
 .highlight pre {
   background-color: #0a0316;
   tab-size: 4;