Changed code blocks to take the whole width

* This fixes an issues with calculating the width of co, ya know, just check the repoduction example:
=> https://ourjseditor.com/program/CKtLzi
* Changes the background color of code blocks to black with a 30% alpha channel, to let some color bleed through.
This commit is contained in:
MatthiasSaihttam 2021-07-27 18:04:11 -07:00
parent 8a28e20504
commit 70d1316103
1 changed files with 7 additions and 8 deletions

View File

@ -119,22 +119,21 @@ a {
.text p > code {
border-radius: 3px;
padding: 1px 5px;
background: black;
background: rgba(0, 0, 0, 0.3);
}
/*Code blocks*/
.text pre {
margin: 0;
overflow-x: auto;
display: block;
}
.text pre > code {
/* inline-block the code block so it doesn't take the whole width */
display: inline-block;
/* Create the black box*/
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
padding: 3px 7px;
background: black;
}
.text pre > code {
/* block forces the text to the whole width, but since inline-block is buggy in Safari, this is our best option */
display: block;
}
.extended-media {
@ -146,7 +145,7 @@ a {
.extended-text {
margin-top: 1em;
display: inline-block; /*Needs to be inline-block, so that margin on it works*/
display: block; /*Needs to be inline-block or block, so that margin on it works*/
}
.thought-end {