87 lines
1.5 KiB
CSS
87 lines
1.5 KiB
CSS
h1, h2, h3, h4, h5, h6, h7 {
|
|
font-weight: 700;
|
|
}
|
|
h1 {
|
|
font-size: 28px;
|
|
}
|
|
h2 {
|
|
font-size: 24px;
|
|
}
|
|
h3 {
|
|
font-size: 22px;
|
|
}
|
|
h4 {
|
|
font-size: 20px;
|
|
}
|
|
h5 {
|
|
font-size: 18px;
|
|
}
|
|
h6 {
|
|
font-size: 18px;
|
|
}
|
|
h7 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.code_block {
|
|
font: 14px/1.4 "Cascadia Mono", monospace;
|
|
background: #272822ff;
|
|
color: #f8f8f2ff;
|
|
display: table;
|
|
white-space: break-spaces;
|
|
padding: 5px;
|
|
}
|
|
|
|
.code_block > code {
|
|
display: table;
|
|
counter-increment: code_line_number;
|
|
}
|
|
|
|
.code_block > code::before {
|
|
content: counter(code_line_number) " ";
|
|
display: inline-block;
|
|
position: absolute;
|
|
transform: TranslateX(-100%);
|
|
padding-right: 5px;
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.code_block > code.highlighted {
|
|
/* We aren't using this because we are going to highlight individual characters, but we still need to set the highlighted class on the code elem so the line numbers on the left get highlighted to make empty lines more obvious. */
|
|
/* background: #307351ff; */
|
|
}
|
|
|
|
.code_block > code.highlighted::before {
|
|
background: #307351ff;
|
|
}
|
|
|
|
.code_block > code > span.highlighted {
|
|
background: #307351ff;
|
|
}
|
|
|
|
.output_container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.output_container > * {
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.ast_tree {
|
|
padding: 5px;
|
|
}
|
|
|
|
.ast_node {
|
|
cursor: pointer;
|
|
background: #eeeeee;
|
|
margin-bottom: 5px;
|
|
border: 1px solid #000000;
|
|
padding: 2px;
|
|
}
|
|
|
|
.ast_node.highlighted {
|
|
background: #307351ff;
|
|
color: #ffffff;
|
|
}
|