Lots of responsive fixes

layouts/_default/list.html

@@ -2,7 +2,7 @@
 {{ define "main" }}
 {{ if .Title }}
 <header>
-<h2 class="main-title">{{ .Title }}</h2>
+  <h1 class="main-title">{{ .Title }}</h1>
 </header>
 {{ end }}
 
@@ -18,8 +18,7 @@
 {{ range $index, $page := $paginator.Pages }}
   <li class="post-entry">
     <header>
-      <h2>
-        <a href="{{ .Permalink }}">{{ .Title }}</a>
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a>
       </h2>
       <time datetime="{{ .Date | time.Format " 2006-01-02" }}">{{ .Date | time.Format "Jan 2, 2006" }}</time>
       {{ partial "development/draft_tag.html" . }}

layouts/partials/footer.html

@@ -1,4 +1,4 @@
 <footer class="footer">
-  <p>Trans rights are human rights. Black lives matter. Get vaccinated.</p>
+  <p class="slogans"><span>Trans rights are human rights.</span> <span>Black lives matter.</span> <span>Get vaccinated.</span></p>
   <p>Copyright © <time datetime="{{ now.Year }}">{{ now.Year }}</time> <a href="{{ `` | absURL }}">Eryn Wells</a></p>
 </footer>

layouts/partials/header.html

@@ -1,4 +1,5 @@
 <header class="header">
+  <div class="title-and-menu">
     <h1><a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a></h1>
 
     {{ $url := .RelPermalink }}
@@ -11,6 +12,7 @@
       </menu>
     </nav>
     {{ end }}
+  </div>
 
   <nav class="social">
     <menu>

static/styles/main.css

@@ -20,10 +20,11 @@
     --body-background-color: var(--light);
     --body-foreground-color: var(--dark);
 
-    --menu-icon-size: 20px;
-
     --link-color: var(--highlight-color);
 
+    --menu-icon-size: 20px;
+    --social-menu-padding: 1rem;
+
     --tag-text-color: var(--dark);
     --tag-background-color: #eee;
     --tag-hover-background-color: #bbb;
@@ -133,6 +134,7 @@ p {
 .header {
     align-items: baseline;
     display: flex;
+    flex-direction: row;
 }
 
 .header h1 {
@@ -155,7 +157,6 @@ p {
     padding: 0 0.5rem;
 }
 
-.formats menu,
 .menu menu,
 .social menu {
     display: inline-block;
@@ -165,30 +166,26 @@ p {
     text-transform: lowercase;
 }
 
-.formats menu li,
 .menu menu li,
 .social menu li {
     display: inline-block;
     letter-spacing: 2px;
 }
 
-.formats menu li + li:before,
 .menu menu li + li:before,
 .social menu li + li:before {
     font-size: 1.5rem;
     margin-right: 0.5rem;
 }
 
-.formats menu li + li:before,
 .menu menu li + li:before {
     content: "•";
 }
 
 .social menu li + li {
-    margin-left: 1rem;
+    margin-left: var(--social-menu-padding);
 }
 
-.formats,
 .social {
     display: flex;
     letter-spacing: 2px;
@@ -213,12 +210,45 @@ p {
     padding: 0 0.5rem;
 }
 
+.title-and-menu {
+    align-items: baseline;
+    display: flex;
+    flex-direction: row;
+}
+
 .youtube iframe {
     aspect-ratio: 16 / 9;
     margin-bottom: -3px;
     width: 100%;
 }
 
+@media (max-width: 475px) {
+    :root {
+        --menu-icon-size: 18px;
+        --social-menu-padding: 0.5rem;
+    }
+
+
+    .menu {
+        margin-top: 1rem;
+    }
+
+    .social {
+        margin-top: 1rem;
+    }
+
+    .title-and-menu {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 320px) {
+    .header h1 {
+        font-size: 3.5rem;
+    }
+}
+
 /*
  * Footer
  */
@@ -229,6 +259,7 @@ p {
     display: flex;
     flex-direction: column;
     font-size: 1.8rem;
+    text-align: center;
 }
 
 .footer p {
@@ -239,6 +270,12 @@ p {
     margin-top: 0.25rem;
 }
 
+@media (max-width: 740px) {
+    .slogans span {
+        white-space: nowrap;
+    }
+}
+
 /*
  * Main
  */
@@ -256,6 +293,10 @@ p {
     margin-top: 0;
 }
 
+.main h1 {
+    font-size: 3.5rem;
+}
+
 .main h1,
 .main h2,
 .main h3,
@@ -274,13 +315,21 @@ p {
     margin-bottom: 0;
 }
 
+.main .main-title {
+    margin-bottom: 0;
+}
+
+.post-list {
+    margin-top: 1rem;
+}
+
 .post-list h1,
 .post-list h2,
 .post-list h3,
 .post-list h4,
 .post-list h5,
 .post-list h6 {
-    display: inline-block;
+    display: inline;
     margin: 0;
 }
 
@@ -293,7 +342,6 @@ p {
 }
 
 .post-list time {
-    display: inline-block;
     margin-left: 1rem;
 }
 
@@ -360,6 +408,27 @@ ul.post-tags li + li {
     margin-left: auto;
 }
 
+@media (max-width: 620px) {
+    .main h1 {
+        font-size: 3rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .post-list {
+        padding-inline-start: 4rem;
+    }
+
+    .post-list h2 {
+        display: block;
+        font-size: 2rem;
+    }
+
+    .post-list time {
+        font-size: 1.8rem;
+        margin-left: 0;
+    }
+}
+
 /*
  * Color Theme -----------------------------------------------------------------
  */