Update code blocks height

It is now the same as in my site. I found it to be surprisingly useful
but it needs a little widget like a button to make it fullscreen to make
it more accessible especially at larger screens.
This commit is contained in:
Gabriel Arazas 2022-05-09 20:08:48 +08:00
parent ed55b83ac5
commit bfc7a2df40
3 changed files with 8 additions and 0 deletions

View File

@ -22,6 +22,8 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
=== Updated === Updated
* The code block has maximum height for half the height of the viewport (`50vh`).
* More consistent theming for the content text. * More consistent theming for the content text.

View File

@ -102,6 +102,7 @@ pre {
line-height: 1.5; line-height: 1.5;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
max-height: var(--code-block-size);
padding: 0.5rem; padding: 0.5rem;
overflow: auto; overflow: auto;
} }
@ -230,5 +231,9 @@ footer {
background: var(--base07); background: var(--base07);
overflow: auto; overflow: auto;
} }
pre {
max-height: unset;
}
} }

View File

@ -9,6 +9,7 @@
--mono-font-size: 0.9em; --mono-font-size: 0.9em;
--vertical-rhythm: 24px; --vertical-rhythm: 24px;
--content-width: 750px; --content-width: 750px;
--code-block-size: 50vh;
--border-style: var(--base06) solid 1px; --border-style: var(--base06) solid 1px;
--background: var(--base00); --background: var(--base00);