style: fix mobile layout overflow (#102)

Author: xihale

assets/style.css

@@ -80,6 +80,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  overflow-wrap: break-word;
 }
 
 /* -- Typography -- */
@@ -91,6 +92,7 @@ h1, h2, h3, h4, h5, h6 {
   line-height: 1.3;
   color: var(--text-primary);
   letter-spacing: -0.025em;
+  overflow-wrap: break-word;
 }
 
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
@@ -125,6 +127,7 @@ a {
   text-decoration: none;
   font-weight: 500;
   transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  overflow-wrap: break-word;
 }
 
 a:hover {
@@ -167,6 +170,7 @@ li {
   border: 1px solid var(--border-subtle);
   text-decoration: none !important;
   transition: all 0.2s ease;
+  min-width: 0;
 }
 
 .article-item:hover {
@@ -179,6 +183,7 @@ li {
   font-weight: 600;
   color: var(--text-primary);
   font-size: 1.05rem;
+  min-width: 0;
 }
 
 .article-date {
@@ -243,6 +248,7 @@ li {
   font-size: 1.1rem;
   color: var(--text-primary);
   font-weight: 500;
+  min-width: 0;
 }
 
 .monthly-item-meta {
@@ -977,6 +983,9 @@ table {
   border-collapse: collapse;
   margin: 1.5rem 0;
   font-size: 0.95rem;
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 th, td {
@@ -995,7 +1004,7 @@ tr:nth-child(even) {
   background-color: rgba(0,0,0,0.01);
 }
 
-img {
+img, video, iframe, embed, object, canvas, svg {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
@@ -1008,6 +1017,13 @@ figcaption {
   color: var(--text-tertiary);
 }
 
+.katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding: 1rem 0;
+}
+
 footer {
   margin-top: auto;
   border-top: 1px solid var(--border-subtle);
@@ -1237,6 +1253,11 @@ footer .social-links {
   nav a:last-child {
     border-bottom: none;
   }
+
+  .article-title, .monthly-item-title {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
 }
 
 hr {