feat: add css variable to set max height for code blocks (#119)
parent
e4f8111a3b
commit
4424e0b81c
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--code-max-height: 60rem;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
/* Global customization */
|
||||
|
||||
:root {
|
||||
--code-max-height: 60rem;
|
||||
}
|
||||
|
||||
/* Light mode theming */
|
||||
:root,
|
||||
:root[color-mode="light"] {
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
:root,
|
||||
:root[color-mode="light"] {
|
||||
--code-max-height: auto;
|
||||
|
||||
@include light_mode;
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
@mixin chroma_base {
|
||||
.chroma {
|
||||
color: #999;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: var(--code-background);
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable {
|
||||
max-height: var(--code-max-height);
|
||||
|
||||
code {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,45 +1,7 @@
|
|||
@mixin chroma_dark {
|
||||
/* Theme: Dracula */
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #999;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: var(--code-background);
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@include chroma_base;
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
|
|
|
@ -1,45 +1,7 @@
|
|||
@mixin chroma_github {
|
||||
/* Theme: GitHub */
|
||||
/* Background */
|
||||
.chroma {
|
||||
color: #999;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chroma code {
|
||||
background-color: var(--code-background);
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
font-size: 0.85em;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:first-child code {
|
||||
border-radius: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.chroma .lntable td:nth-child(2) code .hl {
|
||||
width: auto;
|
||||
margin-left: -0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre.chroma {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> pre.chroma code {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@include chroma_base;
|
||||
|
||||
/* Other */
|
||||
.chroma .x {
|
||||
|
|
|
@ -110,7 +110,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
table {
|
||||
table:not(.lntable) {
|
||||
overflow: auto;
|
||||
display: table;
|
||||
border-spacing: 0;
|
||||
|
@ -176,5 +176,6 @@
|
|||
padding: 1rem;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
max-height: var(--code-max-height);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
@import "_defaults";
|
||||
@import "_color_mode";
|
||||
@import "_chroma_base";
|
||||
@import "_chroma_light";
|
||||
@import "_chroma_dark";
|
||||
|
||||
|
|
Loading…
Reference in New Issue