Fix code scrolling due to line numbers

This commit is contained in:
Gabriel Augendre 2021-04-10 15:34:06 +02:00
parent 85a88000a7
commit eb4c4330f7
2 changed files with 19 additions and 2 deletions

View file

@ -1,3 +1,9 @@
:root {
--linenos-width: 55px;
--code-border-width: 1px;
--pre-padding-horizontal: 1.5rem;
}
.codehilitetable td { .codehilitetable td {
border: none; border: none;
margin: 0; margin: 0;
@ -5,7 +11,9 @@
} }
.codehilitetable .linenos { .codehilitetable .linenos {
max-width: 20px; width: var(--linenos-width);
min-width: var(--linenos-width);
max-width: var(--linenos-width);
} }
.codehilitetable .linenos pre { .codehilitetable .linenos pre {
@ -13,6 +21,8 @@
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
padding-right: 0; padding-right: 0;
margin-bottom: 0;
overflow-x: scroll;
} }
.codehilitetable .code pre { .codehilitetable .code pre {
@ -20,4 +30,7 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
padding-left: .1rem; padding-left: .1rem;
margin-bottom: 0;
width: calc(var(--body-width) - var(--linenos-width) - 2 * var(--code-border-width) - var(--pre-padding-horizontal));
overflow-x: scroll;
} }

View file

@ -1,6 +1,10 @@
:root {
--body-width: 750px;
}
body { body {
/* Overriding so that it doesn't change even when updating the library. */ /* Overriding so that it doesn't change even when updating the library. */
max-width: 750px; max-width: var(--body-width);
} }
h1, h2, h3 { h1, h2, h3 {