github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-11-28 15:40:36 +00:00
Code Issues Projects Releases Wiki Activity

feat: add css variable to set max height for code blocks (#119)

Browse Source
This commit is contained in:
Robert Kaussow 2021-05-13 14:05:38 +02:00 committed by GitHub
parent e4f8111a3b
commit 4424e0b81c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 65 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
exampleSite/static/custom.css
View File

@ -1,3 +1,7 @@
:root {
--code-max-height: 60rem;
}
.icon-grid {
width: 8rem;
height: 8rem;

6
exampleSite/static/custom.css.example
View File

@ -1,3 +1,9 @@
/* Global customization */
:root {
--code-max-height: 60rem;
}
/* Light mode theming */
:root,
:root[color-mode="light"] {

2
src/sass/_base.scss
View File

@ -1,5 +1,7 @@
:root,
:root[color-mode="light"] {
--code-max-height: auto;
@include light_mode;
}

48
src/sass/_chroma_base.scss Normal file
View File

@ -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;
}
}
}

40
src/sass/_chroma_dark.scss
View File

@ -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 {

40
src/sass/_chroma_light.scss
View File

@ -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 {

3
src/sass/_markdown.scss
View File

@ -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
src/sass/main.scss
View File

@ -1,5 +1,6 @@
@import "_defaults";
@import "_color_mode";
@import "_chroma_base";
@import "_chroma_light";
@import "_chroma_dark";