Lots of responsive fixes

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 -----------------------------------------------------------------
  */