Blog: responsive styles on mobile
This commit is contained in:
parent
15908a572e
commit
3ab97c54d2
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue