Blog: responsive styles on mobile

This commit is contained in:
Akemi Izuko 2024-01-01 17:10:56 -07:00
parent 15908a572e
commit 3ab97c54d2
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC

View file

@ -10,10 +10,17 @@
*/ */
/**** Outer body (not part of the markdown) ****/ /**** Outer body (not part of the markdown) ****/
@media not (max-width: 899px) {
main { main {
max-width: 900px; max-width: 900px;
margin: auto; margin: auto;
} }
}
@media (max-width: 899px) {
main {
margin: 30px;
}
}
div.markdown-title { div.markdown-title {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -180,6 +187,9 @@ h1.markdown-title {
/*filter: drop-shadow(0 2px 6px #ddd);*/ /*filter: drop-shadow(0 2px 6px #ddd);*/
} }
.prose pre { .prose pre {
overflow-wrap: anywhere;
word-break: break-all;
text-wrap: wrap;
background-color: #f6f6f6; background-color: #f6f6f6;
border-radius: 6px; border-radius: 6px;
padding: 16px; padding: 16px;
@ -187,6 +197,14 @@ h1.markdown-title {
font-family: var(--font-mono); font-family: var(--font-mono);
filter: drop-shadow(0 2px 6px #ddd); 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] { .prose pre > code[data-line-numbers] {
counter-reset: line; counter-reset: line;
} }