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 {
|
.icon-grid {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
height: 8rem;
|
height: 8rem;
|
||||||
|
|
|
@ -1,3 +1,9 @@
|
||||||
|
/* Global customization */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--code-max-height: 60rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Light mode theming */
|
/* Light mode theming */
|
||||||
:root,
|
:root,
|
||||||
:root[color-mode="light"] {
|
:root[color-mode="light"] {
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
:root,
|
:root,
|
||||||
:root[color-mode="light"] {
|
:root[color-mode="light"] {
|
||||||
|
--code-max-height: auto;
|
||||||
|
|
||||||
@include light_mode;
|
@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 {
|
@mixin chroma_dark {
|
||||||
/* Theme: Dracula */
|
/* Theme: Dracula */
|
||||||
/* Background */
|
/* Background */
|
||||||
.chroma {
|
@include chroma_base;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Other */
|
/* Other */
|
||||||
.chroma .x {
|
.chroma .x {
|
||||||
|
|
|
@ -1,45 +1,7 @@
|
||||||
@mixin chroma_github {
|
@mixin chroma_github {
|
||||||
/* Theme: GitHub */
|
/* Theme: GitHub */
|
||||||
/* Background */
|
/* Background */
|
||||||
.chroma {
|
@include chroma_base;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Other */
|
/* Other */
|
||||||
.chroma .x {
|
.chroma .x {
|
||||||
|
|
|
@ -110,7 +110,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table:not(.lntable) {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
display: table;
|
display: table;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
@ -176,5 +176,6 @@
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
max-height: var(--code-max-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
@import "_defaults";
|
@import "_defaults";
|
||||||
@import "_color_mode";
|
@import "_color_mode";
|
||||||
|
@import "_chroma_base";
|
||||||
@import "_chroma_light";
|
@import "_chroma_light";
|
||||||
@import "_chroma_dark";
|
@import "_chroma_dark";
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue