vanilla-hugo/assets/scss/code.scss

110 lines
2.0 KiB
SCSS

@import "variables.scss";
.highlight-label {
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
border: $code-border;
border-bottom: none;
a {
font-family: $font-code;
}
}
.highlight-group pre {
margin: 0;
}
code {
font-family: $font-code;
@include var(background-color, code-color);
border: $code-border;
padding: 0 0.25rem 0 0.25rem;
}
pre code {
display: block;
box-sizing: border-box;
padding: 0.5rem;
overflow: auto;
}
.chroma {
.lntable {
border-spacing: 0;
padding: 0.5rem 0 0.5rem 0;
@include var(background-color, code-color);
border-radius: 0;
border: $code-border;
display: block;
overflow: auto;
margin-bottom: 1rem;
td {
padding: 0;
}
code {
border: none;
padding: 0;
}
pre {
margin: 0;
}
.lntd:last-child {
width: 100%;
}
// Insert padding to match the distance of the line number to its
// border.
.line {
padding-left: $code-lineno-spacing;
}
}
.lntr {
display: table-row;
}
.lnt {
display: block;
padding: 0 $code-lineno-spacing 0 $code-lineno-spacing;
@include var(color, code-lineno-color);
border-right: $standard-border;
// Even though only highlighted line table numbers get the 'star',
// insert a corresponding space on non-highlighted ones to keep
// spacing consistent.
&::before {
content: " ";
}
}
.hl {
display: block;
@include var(background-color, code-highlight-color);
.lnt {
border-left-color: $border-color;
&::before {
content: "*";
}
}
}
}
.kr, .kd, .k {
font-weight: bold;
@include var(color, code-keyword-color);
}
.kt {
font-weight: bold;
@include var(color, code-type-color);
}
.c, .c1, .cm {
color: $code-comment-color;
}