From 3ab97c54d2d7c2eb5f424293a351da09265189c0 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Mon, 1 Jan 2024 17:10:56 -0700
Subject: [PATCH] Blog: responsive styles on mobile

---
 src/styles/markdown.css | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index 8485048..0d56726 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -10,9 +10,16 @@
  */
 
 /**** Outer body (not part of the markdown) ****/
-main {
-    max-width: 900px;
-    margin: auto;
+@media not (max-width: 899px) {
+    main {
+        max-width: 900px;
+        margin: auto;
+    }
+}
+@media (max-width: 899px) {
+    main {
+        margin: 30px;
+    }
 }
 div.markdown-title {
     text-align: center;
@@ -180,6 +187,9 @@ h1.markdown-title {
     /*filter: drop-shadow(0 2px 6px #ddd);*/
 }
 .prose pre {
+    overflow-wrap: anywhere;
+    word-break: break-all;
+    text-wrap: wrap;
     background-color: #f6f6f6;
     border-radius: 6px;
     padding: 16px;
@@ -187,6 +197,14 @@ h1.markdown-title {
     font-family: var(--font-mono);
     filter: drop-shadow(0 2px 6px #ddd);
 }
+.prose pre code {
+    overflow: hidden;
+    width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-all;
+    text-wrap: wrap;
+    white-space: pre-wrap;
+}
 .prose pre > code[data-line-numbers] {
     counter-reset: line;
 }