From d27ca2453ae47072ab231c745dda60b2ad8480fe Mon Sep 17 00:00:00 2001 From: xihale Date: Mon, 26 Jan 2026 00:28:25 +0800 Subject: [PATCH] style: fix mobile layout overflow --- assets/style.css | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/assets/style.css b/assets/style.css index 4c297b2..275a808 100644 --- a/assets/style.css +++ b/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 {