Blog: responsive styles on mobile
This commit is contained in:
parent
15908a572e
commit
3ab97c54d2
1 changed files with 21 additions and 3 deletions
|
@ -10,9 +10,16 @@
|
|||
*/
|
||||
|
||||
/**** Outer body (not part of the markdown) ****/
|
||||
main {
|
||||
@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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue