systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: replace deprecated sass global imports (#965)

Browse source
This commit is contained in:
Robert Kaussow 2025-02-07 15:14:13 +01:00 • committed by GitHub
parent 540fa3585e
commit 939ec0f269
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 313 additions and 291 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
layouts/shortcodes/gist.html Normal file
View file

@ -0,0 +1 @@
<script src="https://gist.github.com/{{ index .Params 0 }}/{{ index .Params 1 }}.js{{if len .Params | eq 3 }}?file={{ index .Params 2 }}{{end}}"></script>

23
src/sass/_asciidoc.scss
View file

@ -1,18 +1,21 @@
@use "sass:color";
@use "defaults";
.admonitionblock { .admonitionblock {
@each $name, $color in $hint-colors { @each $name, $color in defaults.$hint-colors {
&.#{$name} { &.#{$name} {
border-left-color: $color; border-left-color: $color;
background-color: color.scale($color, $lightness: 95%, $saturation: -30%); background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color; color: defaults.$body-font-color;
} }
} }
& { & {
margin: $padding-16 0; margin: defaults.$padding-16 0;
padding: 0; padding: 0;
border-left: $border-4 solid var(--accent-color); border-left: defaults.$border-4 solid var(--accent-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
} }
table { table {
@ -25,10 +28,10 @@
td { td {
display: block; display: block;
padding: $padding-4 $padding-16 !important; padding: defaults.$padding-4 defaults.$padding-16 !important;
&:first-child { &:first-child {
background-color: color.scale($gray-600, $alpha: -95%); background-color: color.scale(defaults.$gray-600, $alpha: -95%);
font-weight: bold; font-weight: bold;
&.icon { &.icon {
@ -40,18 +43,18 @@
i.fa::after { i.fa::after {
content: attr(title); content: attr(title);
font-style: normal; font-style: normal;
padding-left: $padding-24; padding-left: defaults.$padding-24;
} }
i.fa { i.fa {
color: $black; color: defaults.$black;
background-size: auto 90%; background-size: auto 90%;
background-repeat: no-repeat; background-repeat: no-repeat;
filter: invert(30%); filter: invert(30%);
margin-left: -5px; margin-left: -5px;
} }
@each $name, $icon in $hint-icons { @each $name, $icon in defaults.$hint-icons {
i.fa.icon-#{$name} { i.fa.icon-#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon}); background-image: url(img/geekdoc-stack.svg##{$icon});
} }

181
src/sass/_base.scss
View file

@ -1,42 +1,47 @@
@use "sass:meta";
@use "sass:map";
@use "color_mode";
@use "defaults";
:root { :root {
--code-max-height: none; --code-max-height: none;
--header-font-family: #{meta.inspect($header-font-family)}; --header-font-family: #{meta.inspect(defaults.$header-font-family)};
--body-font-family: #{meta.inspect($body-font-family)}; --body-font-family: #{meta.inspect(defaults.$body-font-family)};
--code-font-family: #{meta.inspect($code-font-family)}; --code-font-family: #{meta.inspect(defaults.$code-font-family)};
} }
:root, :root,
:root[color-theme="light"] { :root[color-theme="light"] {
@include color_theme_light; @include color_mode.color_theme_light;
@include code_theme_light; @include color_mode.code_theme_light;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
@include color_theme_light; @include color_mode.color_theme_light;
@include code_theme_light; @include color_mode.code_theme_light;
} }
} }
:root[color-theme="dark"] { :root[color-theme="dark"] {
@include color_theme_dark; @include color_mode.color_theme_dark;
@include code_theme_dark; @include color_mode.code_theme_dark;
} }
:root[code-theme="dark"] { :root[code-theme="dark"] {
@include code_theme_dark; @include color_mode.code_theme_dark;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
@include color_theme_dark; @include color_mode.color_theme_dark;
@include code_theme_dark; @include color_mode.code_theme_dark;
} }
} }
html { html {
font-size: $font-size-base; font-size: defaults.$font-size-base;
letter-spacing: 0.33px; letter-spacing: 0.33px;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -87,7 +92,7 @@ html {
html, html,
body { body {
min-width: $body-min-width; min-width: defaults.$body-min-width;
overflow-x: hidden; overflow-x: hidden;
} }
@ -108,7 +113,7 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: $body-font-weight; font-weight: defaults.$body-font-weight;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -116,7 +121,7 @@ h6 {
h4, h4,
h5, h5,
h6 { h6 {
font-size: $font-size-16 !important; font-size: defaults.$font-size-16 !important;
} }
a { a {
@ -161,20 +166,20 @@ img {
color: var(--body-font-color); color: var(--body-font-color);
background: var(--body-background); background: var(--body-background);
font-weight: $body-font-weight; font-weight: defaults.$body-font-weight;
} }
.container { .container {
width: 100%; width: 100%;
max-width: $container-max-width; max-width: defaults.$container-max-width;
margin: 0 auto; margin: 0 auto;
padding: $padding-20; padding: defaults.$padding-20;
} }
svg.gdoc-icon { svg.gdoc-icon {
display: inline-block; display: inline-block;
width: $font-size-20; width: defaults.$font-size-20;
height: $font-size-20; height: defaults.$font-size-20;
vertical-align: middle; vertical-align: middle;
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
@ -197,19 +202,19 @@ svg.gdoc-icon {
} }
svg.gdoc-icon { svg.gdoc-icon {
width: $font-size-32; width: defaults.$font-size-32;
height: $font-size-32; height: defaults.$font-size-32;
} }
} }
.gdoc-brand { .gdoc-brand {
font-size: $font-size-32; font-size: defaults.$font-size-32;
line-height: $font-size-32; line-height: defaults.$font-size-32;
&__img { &__img {
margin-right: $padding-16; margin-right: defaults.$padding-16;
width: $padding-32; width: defaults.$padding-32;
height: $padding-32; height: defaults.$padding-32;
} }
} }
@ -218,7 +223,7 @@ svg.gdoc-icon {
display: flex; display: flex;
> span { > span {
margin-left: $padding-8; margin-left: defaults.$padding-8;
} }
} }
@ -233,18 +238,18 @@ svg.gdoc-icon {
} }
.gdoc-nav { .gdoc-nav {
flex: 0 0 $menu-width; flex: 0 0 defaults.$menu-width;
nav { nav {
width: $menu-width; width: defaults.$menu-width;
padding: $padding-16 $padding-32 $padding-16 0; padding: defaults.$padding-16 defaults.$padding-32 defaults.$padding-16 0;
> ul > li > * { > ul > li > * {
font-weight: normal; font-weight: normal;
} }
section { section {
margin-top: $padding-32; margin-top: defaults.$padding-32;
} }
} }
@ -267,22 +272,22 @@ svg.gdoc-icon {
} }
&__list { &__list {
padding-left: $padding-16; padding-left: defaults.$padding-16;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
user-select: none; user-select: none;
ul { ul {
padding-left: $padding-16; padding-left: defaults.$padding-16;
} }
li { li {
margin: $padding-12 0; margin: defaults.$padding-12 0;
} }
svg.gdoc-icon { svg.gdoc-icon {
margin-right: $padding-4; margin-right: defaults.$padding-4;
} }
} }
@ -293,8 +298,8 @@ svg.gdoc-icon {
cursor: pointer; cursor: pointer;
svg.gdoc-icon.toggle { svg.gdoc-icon.toggle {
width: $font-size-16; width: defaults.$font-size-16;
height: $font-size-16; height: defaults.$font-size-16;
} }
} }
@ -347,22 +352,22 @@ svg.gdoc-icon {
.gdoc-search__list, .gdoc-search__list,
.gdoc-language__list { .gdoc-language__list {
background: var(--body-background); background: var(--body-background);
border-radius: $border-radius; border-radius: defaults.$border-radius;
box-shadow: box-shadow:
0 1px 3px 0 var(--accent-color-dark), 0 1px 3px 0 var(--accent-color-dark),
0 1px 2px 0 var(--accent-color); 0 1px 2px 0 var(--accent-color);
position: absolute; position: absolute;
margin: 0; margin: 0;
padding: $padding-8 $padding-4 !important; padding: defaults.$padding-8 defaults.$padding-4 !important;
list-style: none; list-style: none;
top: calc(100% + #{$padding-8}); top: calc(100% + #{defaults.$padding-8});
z-index: 2; z-index: 2;
} }
.gdoc-page { .gdoc-page {
min-width: calc($body-min-width - $padding-32); min-width: calc(defaults.$body-min-width - defaults.$padding-32);
flex-grow: 1; flex-grow: 1;
padding: $padding-16 0; padding: defaults.$padding-16 0;
h1, h1,
h2, h2,
@ -375,7 +380,7 @@ svg.gdoc-icon {
&__header, &__header,
&__footer { &__footer {
margin-bottom: $padding-24; margin-bottom: defaults.$padding-24;
svg.gdoc-icon { svg.gdoc-icon {
color: var(--control-icons); color: var(--control-icons);
@ -389,8 +394,8 @@ svg.gdoc-icon {
&__header { &__header {
background: var(--accent-color-lite); background: var(--accent-color-lite);
padding: $padding-8 $padding-16; padding: defaults.$padding-8 defaults.$padding-16;
border-radius: $border-radius; border-radius: defaults.$border-radius;
} }
&__nav { &__nav {
@ -425,7 +430,7 @@ svg.gdoc-icon {
} }
&__footer { &__footer {
margin-top: $padding-32; margin-top: defaults.$padding-32;
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -435,8 +440,8 @@ svg.gdoc-icon {
.gdoc-post { .gdoc-post {
word-wrap: break-word; word-wrap: break-word;
border-top: 1px dashed $gray-600; border-top: 1px dashed defaults.$gray-600;
padding: $padding-32 0; padding: defaults.$padding-32 0;
&:first-of-type { &:first-of-type {
padding-top: 0; padding-top: 0;
@ -469,7 +474,7 @@ svg.gdoc-icon {
} }
&__readmore { &__readmore {
margin: $padding-32 0; margin: defaults.$padding-32 0;
a, a,
a:hover, a:hover,
@ -485,22 +490,22 @@ svg.gdoc-icon {
} }
> span { > span {
margin: $padding-4 0; margin: defaults.$padding-4 0;
&:not(:last-child) { &:not(:last-child) {
margin-right: $padding-8; margin-right: defaults.$padding-8;
} }
} }
svg.gdoc-icon { svg.gdoc-icon {
font-size: $font-size-20; font-size: defaults.$font-size-20;
} }
.gdoc-button { .gdoc-button {
margin: 0 $padding-2 0 0; margin: 0 defaults.$padding-2 0 0;
} }
&--head { &--head {
margin-bottom: $padding-32; margin-bottom: defaults.$padding-32;
} }
} }
@ -515,19 +520,19 @@ svg.gdoc-icon {
&__codecopy { &__codecopy {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
top: $padding-8; top: defaults.$padding-8;
right: $padding-8; right: defaults.$padding-8;
border: $border-2 solid var(--code-copy-border-color); border: defaults.$border-2 solid var(--code-copy-border-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
background: var(--code-copy-background); background: var(--code-copy-background);
width: $padding-32; width: defaults.$padding-32;
height: $padding-32; height: defaults.$padding-32;
svg.gdoc-icon { svg.gdoc-icon {
top: 0; top: 0;
width: $font-size-20; width: defaults.$font-size-20;
height: $font-size-20; height: defaults.$font-size-20;
color: var(--code-copy-font-color); color: var(--code-copy-font-color);
} }
@ -562,10 +567,10 @@ svg.gdoc-icon {
} }
&__item { &__item {
line-height: $padding-32; line-height: defaults.$padding-32;
&--row { &--row {
margin-right: $padding-16; margin-right: defaults.$padding-16;
} }
} }
@ -584,10 +589,10 @@ svg.gdoc-icon {
svg.gdoc-icon { svg.gdoc-icon {
position: absolute; position: absolute;
left: $padding-8; left: defaults.$padding-8;
color: var(--control-icons); color: var(--control-icons);
width: $font-size-20; width: defaults.$font-size-20;
height: $font-size-20; height: defaults.$font-size-20;
} }
&::after { &::after {
@ -598,14 +603,14 @@ svg.gdoc-icon {
&__input { &__input {
width: 100%; width: 100%;
padding: $padding-8; padding: defaults.$padding-8;
padding-left: $padding-32; padding-left: defaults.$padding-32;
transition: transition:
border-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out; box-shadow 0.15s ease-in-out;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $border-radius; border-radius: defaults.$border-radius;
background: var(--accent-color-lite); background: var(--accent-color-lite);
color: var(--body-font-color); color: var(--body-font-color);
@ -631,26 +636,26 @@ svg.gdoc-icon {
} }
> li + li { > li + li {
margin-top: $padding-4; margin-top: defaults.$padding-4;
} }
svg.gdoc-icon { svg.gdoc-icon {
margin-right: $padding-4; margin-right: defaults.$padding-4;
} }
} }
&__section { &__section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: $padding-4 !important; padding: defaults.$padding-4 !important;
} }
&__entry { &__entry {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--body-font-color); color: var(--body-font-color);
padding: $padding-4 !important; padding: defaults.$padding-4 !important;
border-radius: $border-radius; border-radius: defaults.$border-radius;
&:hover, &:hover,
&.is-active { &.is-active {
@ -668,7 +673,7 @@ svg.gdoc-icon {
} }
&--description { &--description {
font-size: $font-size-14; font-size: defaults.$font-size-14;
font-style: italic; font-style: italic;
} }
} }
@ -707,7 +712,7 @@ svg.gdoc-icon {
} }
.gdoc-paging { .gdoc-paging {
padding: $padding-16 0; padding: defaults.$padding-16 0;
&__item { &__item {
flex: 1 1 0; flex: 1 1 0;
@ -719,7 +724,7 @@ svg.gdoc-icon {
a:hover, a:hover,
a:visited:hover { a:visited:hover {
background: var(--link-color); background: var(--link-color);
color: $gray-100; color: defaults.$gray-100;
} }
&--next { &--next {
@ -733,13 +738,13 @@ svg.gdoc-icon {
} }
.gdoc-error { .gdoc-error {
padding: $padding-96 $padding-16; padding: defaults.$padding-96 defaults.$padding-16;
margin: 0 auto; margin: 0 auto;
max-width: 45em; max-width: 45em;
svg.gdoc-icon { svg.gdoc-icon {
width: $font-size-128; width: defaults.$font-size-128;
height: $font-size-128; height: defaults.$font-size-128;
color: var(--body-font-color); color: var(--body-font-color);
} }
@ -750,15 +755,15 @@ svg.gdoc-icon {
} }
&__message { &__message {
padding-left: $padding-64; padding-left: defaults.$padding-64;
} }
&__line { &__line {
padding: $padding-8 0; padding: defaults.$padding-8 0;
} }
&__title { &__title {
font-size: $font-size-64; font-size: defaults.$font-size-64;
} }
&__code { &__code {
@ -767,10 +772,10 @@ svg.gdoc-icon {
} }
.gdoc-toc { .gdoc-toc {
margin: $padding-16 0; margin: defaults.$padding-16 0;
li { li {
margin: $padding-4 0; margin: defaults.$padding-4 0;
} }
// Classes to hide nested levels of ToC/Menu // Classes to hide nested levels of ToC/Menu

10
src/sass/_chroma_base.scss
View file

@ -1,3 +1,5 @@
@use "defaults";
@mixin chroma_base { @mixin chroma_base {
.chroma { .chroma {
color: var(--code-font-color); color: var(--code-font-color);
@ -18,8 +20,8 @@
/* LineTable */ /* LineTable */
.chroma .lntable { .chroma .lntable {
border: $border-1 solid var(--code-accent-color); border: defaults.$border-1 solid var(--code-accent-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
border-spacing: 0; border-spacing: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -37,7 +39,7 @@
.chroma .lntable td:first-child { .chroma .lntable td:first-child {
code { code {
background-color: var(--code-accent-color-lite); background-color: var(--code-accent-color-lite);
border-right: $border-1 solid var(--code-accent-color); border-right: defaults.$border-1 solid var(--code-accent-color);
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
border-radius: 0; border-radius: 0;
@ -45,6 +47,6 @@
} }
.chroma .lntable td:nth-child(2) { .chroma .lntable td:nth-child(2) {
width: 100%; width: 100%;
margin-left: $padding-32; margin-left: defaults.$padding-32;
} }
} }

4
src/sass/_chroma_dark.scss
View file

@ -1,7 +1,9 @@
@use "chroma_base";
@mixin chroma_dark { @mixin chroma_dark {
/* Theme: Dracula */ /* Theme: Dracula */
/* Background */ /* Background */
@include chroma_base; @include chroma_base.chroma_base;
/* Other */ /* Other */
.chroma .x { .chroma .x {

4
src/sass/_chroma_light.scss
View file

@ -1,7 +1,9 @@
@use "chroma_base";
@mixin chroma_github { @mixin chroma_github {
/* Theme: GitHub */ /* Theme: GitHub */
/* Background */ /* Background */
@include chroma_base; @include chroma_base.chroma_base;
/* Other */ /* Other */
.chroma .x { .chroma .x {

122
src/sass/_color_mode.scss
View file

@ -1,31 +1,37 @@
@use "sass:color";
@use "sass:map";
@use "chroma_dark";
@use "chroma_light";
@use "defaults";
@mixin color_theme_light { @mixin color_theme_light {
--header-background: #{$main-color}; --header-background: #{defaults.$main-color};
--header-font-color: #{$white}; --header-font-color: #{defaults.$white};
--body-background: #{$body-background}; --body-background: #{defaults.$body-background};
--body-font-color: #{$body-font-color}; --body-font-color: #{defaults.$body-font-color};
--mark-color: #{$mark-color}; --mark-color: #{defaults.$mark-color};
--button-background: #{color.scale($main-color, $lightness: 15%)}; --button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
--button-border-color: #{$main-color}; --button-border-color: #{defaults.$main-color};
--link-color: #{$link-color}; --link-color: #{defaults.$link-color};
--link-color-visited: #{$link-color-visited}; --link-color-visited: #{defaults.$link-color-visited};
--hint-link-color: #{$link-color}; --hint-link-color: #{defaults.$link-color};
--hint-link-color-visited: #{$link-color-visited}; --hint-link-color-visited: #{defaults.$link-color-visited};
--accent-color-dark: #{$gray-400}; --accent-color-dark: #{defaults.$gray-400};
--accent-color: #{$gray-200}; --accent-color: #{defaults.$gray-200};
--accent-color-lite: #{$gray-100}; --accent-color-lite: #{defaults.$gray-100};
--control-icons: #{color.scale($body-font-color, $lightness: 40%)}; --control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
--footer-background: #{$second-color}; --footer-background: #{defaults.$second-color};
--footer-font-color: #{$white}; --footer-font-color: #{defaults.$white};
--footer-link-color: #{$link-color-footer}; --footer-link-color: #{defaults.$link-color-footer};
--footer-link-color-visited: #{$link-color-footer}; --footer-link-color-visited: #{defaults.$link-color-footer};
.dark-mode-dim .gdoc-markdown { .dark-mode-dim .gdoc-markdown {
img { img {
@ -42,39 +48,39 @@
.gdoc-hint__title, .gdoc-hint__title,
.admonitionblock table td:first-child { .admonitionblock table td:first-child {
background-color: color.scale($gray-600, $alpha: -95%); background-color: color.scale(defaults.$gray-600, $alpha: -95%);
} }
} }
} }
@mixin color_theme_dark { @mixin color_theme_dark {
--header-background: #{$main-color}; --header-background: #{defaults.$main-color};
--header-font-color: #{$white}; --header-font-color: #{defaults.$white};
--body-background: #{$body-background-dark}; --body-background: #{defaults.$body-background-dark};
--body-font-color: #{color.scale($body-background-dark, $lightness: 70%)}; --body-font-color: #{color.scale(defaults.$body-background-dark, $lightness: 70%)};
--mark-color: #{$mark-color}; --mark-color: #{defaults.$mark-color};
--button-background: #{color.scale($main-color, $lightness: 15%)}; --button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
--button-border-color: #{$main-color}; --button-border-color: #{defaults.$main-color};
--link-color: #{$link-color-dark}; --link-color: #{defaults.$link-color-dark};
--link-color-visited: #{$link-color-visited-dark}; --link-color-visited: #{defaults.$link-color-visited-dark};
--hint-link-color: #{$link-color}; --hint-link-color: #{defaults.$link-color};
--hint-link-color-visited: #{$link-color-visited}; --hint-link-color-visited: #{defaults.$link-color-visited};
--accent-color-dark: #{color.scale($body-background-dark, $lightness: -60%)}; --accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
--accent-color: #{color.scale($body-background-dark, $lightness: -30%)}; --accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
--accent-color-lite: #{color.scale($body-background-dark, $lightness: -15%)}; --accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
--control-icons: #{color.scale($body-font-color, $lightness: 40%)}; --control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
--footer-background: #{$second-color}; --footer-background: #{defaults.$second-color};
--footer-font-color: #{$white}; --footer-font-color: #{defaults.$white};
--footer-link-color: #{$link-color-footer}; --footer-link-color: #{defaults.$link-color-footer};
--footer-link-color-visited: #{$link-color-footer}; --footer-link-color-visited: #{defaults.$link-color-footer};
.dark-mode-dim { .dark-mode-dim {
.gdoc-markdown img { .gdoc-markdown img {
@ -102,39 +108,39 @@
.gdoc-hint__title, .gdoc-hint__title,
.admonitionblock table td:first-child { .admonitionblock table td:first-child {
background-color: color.scale($gray-600, $alpha: -85%); background-color: color.scale(defaults.$gray-600, $alpha: -85%);
} }
} }
} }
@mixin code_theme_dark { @mixin code_theme_dark {
@include chroma_dark; @include chroma_dark.chroma_dark;
& { & {
--code-background: #{$code-background-dark}; --code-background: #{defaults.$code-background-dark};
--code-accent-color: #{color.scale($code-background-dark, $lightness: -30%)}; --code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
--code-accent-color-lite: #{color.scale($code-background-dark, $lightness: -15%)}; --code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
--code-font-color: #{$code-font-color-dark}; --code-font-color: #{defaults.$code-font-color-dark};
--code-copy-background: #{$code-background-dark}; --code-copy-background: #{defaults.$code-background-dark};
--code-copy-font-color: #{color.scale($code-font-color-dark, $lightness: -15%)}; --code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
--code-copy-border-color: #{color.scale($code-font-color-dark, $lightness: -20%)}; --code-copy-border-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -20%)};
--code-copy-success-color: #{color.scale(map.get($hint-colors, "ok"), $alpha: -55%)}; --code-copy-success-color: #{color.scale(map.get(defaults.$hint-colors, "ok"), $alpha: -55%)};
} }
} }
@mixin code_theme_light { @mixin code_theme_light {
@include chroma_github; @include chroma_light.chroma_github;
& { & {
--code-background: #{$code-background}; --code-background: #{defaults.$code-background};
--code-accent-color: #{color.scale($code-background, $lightness: -45%)}; --code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
--code-accent-color-lite: #{color.scale($code-background, $lightness: -15%)}; --code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
--code-font-color: #{$code-font-color}; --code-font-color: #{defaults.$code-font-color};
--code-copy-background: #{$code-background}; --code-copy-background: #{defaults.$code-background};
--code-copy-font-color: #{color.scale($code-font-color, $lightness: 20%)}; --code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
--code-copy-border-color: #{color.scale($code-font-color, $lightness: 40%)}; --code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
--code-copy-success-color: #{map.get($hint-colors, "ok")}; --code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
} }
} }

4
src/sass/_defaults.scss
View file

@ -1,3 +1,5 @@
@use "sass:color";
// Used in layout // Used in layout
$padding-2: 0.125rem !default; $padding-2: 0.125rem !default;
$padding-4: 0.25rem !default; $padding-4: 0.25rem !default;
@ -61,7 +63,7 @@ $main-color: rgba(32, 83, 117, 1) !default;
$second-color: rgba(17, 43, 60, 1) !default; $second-color: rgba(17, 43, 60, 1) !default;
$mark-color: rgba(255, 171, 0, 1) !default; $mark-color: rgba(255, 171, 0, 1) !default;
$body-background-dark: mix(invert($body-background, 75%), $second-color) !default; $body-background-dark: color.mix(color.invert($body-background, 75%), $second-color) !default;
$body-font-color-dark: $gray-100 !default; $body-font-color-dark: $gray-100 !default;
$link-color-dark: rgba(110, 168, 212, 1) !default; $link-color-dark: rgba(110, 168, 212, 1) !default;

66
src/sass/_markdown.scss
View file

@ -1,3 +1,5 @@
@use "defaults";
.gdoc-markdown { .gdoc-markdown {
line-height: 1.6rem; line-height: 1.6rem;
@ -10,8 +12,8 @@
font-weight: 600; font-weight: 600;
> code { > code {
border-top: $border-4 solid var(--accent-color); border-top: defaults.$border-4 solid var(--accent-color);
font-size: $font-size-12 !important; font-size: defaults.$font-size-12 !important;
} }
} }
@ -19,7 +21,7 @@
h5, h5,
h6 { h6 {
> code { > code {
font-size: $font-size-14 !important; font-size: defaults.$font-size-14 !important;
} }
} }
@ -32,7 +34,7 @@
a, a,
&__link { &__link {
text-decoration: underline; text-decoration: underline;
border-bottom: $border-1 solid transparent; border-bottom: defaults.$border-1 solid transparent;
line-height: normal; line-height: normal;
&:hover { &:hover {
@ -42,14 +44,14 @@
&__link--raw { &__link--raw {
text-decoration: none !important; text-decoration: none !important;
color: $body-font-color !important; color: defaults.$body-font-color !important;
&:hover { &:hover {
text-decoration: none !important; text-decoration: none !important;
} }
&:visited { &:visited {
color: $body-font-color !important; color: defaults.$body-font-color !important;
} }
} }
@ -72,12 +74,12 @@
} }
&__figure { &__figure {
padding: $padding-4; padding: defaults.$padding-4;
margin: $padding-16 0; margin: defaults.$padding-16 0;
background-color: var(--accent-color); background-color: var(--accent-color);
display: table; display: table;
border-top-left-radius: $border-radius; border-top-left-radius: defaults.$border-radius;
border-top-right-radius: $border-radius; border-top-right-radius: defaults.$border-radius;
&--round, &--round,
&--round img { &--round img {
@ -88,10 +90,10 @@
display: table-caption; display: table-caption;
caption-side: bottom; caption-side: bottom;
background-color: var(--accent-color); background-color: var(--accent-color);
padding: 0 $padding-4 $padding-4; padding: 0 defaults.$padding-4 defaults.$padding-4;
text-align: center; text-align: center;
border-bottom-left-radius: $border-radius; border-bottom-left-radius: defaults.$border-radius;
border-bottom-right-radius: $border-radius; border-bottom-right-radius: defaults.$border-radius;
} }
img { img {
@ -102,37 +104,37 @@
img { img {
max-width: 100%; max-width: 100%;
border-radius: $border-radius; border-radius: defaults.$border-radius;
} }
blockquote { blockquote {
margin: $padding-16 0; margin: defaults.$padding-16 0;
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8 (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
border-left: $border-4 solid var(--accent-color); border-left: defaults.$border-4 solid var(--accent-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
} }
table:not(.lntable):not(.highlight) { table:not(.lntable):not(.highlight) {
display: table; display: table;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
margin-top: $padding-16; margin-top: defaults.$padding-16;
margin-bottom: $padding-16; margin-bottom: defaults.$padding-16;
width: 100%; width: 100%;
text-align: left; text-align: left;
thead { thead {
border-bottom: $border-4 solid var(--accent-color); border-bottom: defaults.$border-4 solid var(--accent-color);
} }
tr th, tr th,
tr td { tr td {
padding: $padding-8 $padding-16; padding: defaults.$padding-8 defaults.$padding-16;
} }
tr { tr {
border-bottom: $border-2 solid var(--accent-color); border-bottom: defaults.$border-2 solid var(--accent-color);
} }
tr:nth-child(2n) { tr:nth-child(2n) {
@ -141,43 +143,43 @@
} }
hr { hr {
height: $border-2; height: defaults.$border-2;
border: none; border: none;
background: var(--accent-color); background: var(--accent-color);
} }
ul, ul,
ol { ol {
padding-left: $padding-32; padding-left: defaults.$padding-32;
} }
dl { dl {
dt { dt {
font-weight: bolder; font-weight: bolder;
margin-top: $padding-16; margin-top: defaults.$padding-16;
} }
dd { dd {
margin-left: $padding-32; margin-left: defaults.$padding-32;
} }
} }
code { code {
padding: $padding-4 $padding-8; padding: defaults.$padding-4 defaults.$padding-8;
} }
pre, pre,
code { code {
background-color: var(--code-background); background-color: var(--code-background);
border-radius: $border-radius; border-radius: defaults.$border-radius;
color: var(--code-font-color); color: var(--code-font-color);
font-size: $font-size-14; font-size: defaults.$font-size-14;
line-height: $padding-16; line-height: defaults.$padding-16;
} }
pre code { pre code {
display: block; display: block;
padding: $padding-16; padding: defaults.$padding-16;
width: 100%; width: 100%;
} }

32
src/sass/_mobile.scss
View file

@ -1,7 +1,9 @@
@media screen and (max-width: $sm-breakpoint) { @use "defaults";
@media screen and (max-width: defaults.$sm-breakpoint) {
.gdoc-nav { .gdoc-nav {
margin-left: -$menu-width; margin-left: -(defaults.$menu-width);
font-size: $font-size-base; font-size: defaults.$font-size-base;
&__control { &__control {
display: inline-block; display: inline-block;
@ -10,14 +12,14 @@
.gdoc-header { .gdoc-header {
svg.gdoc-icon { svg.gdoc-icon {
width: $font-size-24; width: defaults.$font-size-24;
height: $font-size-24; height: defaults.$font-size-24;
} }
} }
.gdoc-brand { .gdoc-brand {
font-size: $font-size-24; font-size: defaults.$font-size-24;
line-height: $font-size-24; line-height: defaults.$font-size-24;
&__img { &__img {
display: none; display: none;
@ -36,23 +38,23 @@
} }
.gdoc-error { .gdoc-error {
padding: $padding-96 $padding-16; padding: defaults.$padding-96 defaults.$padding-16;
svg.gdoc-icon { svg.gdoc-icon {
width: $font-size-96; width: defaults.$font-size-96;
height: $font-size-96; height: defaults.$font-size-96;
} }
&__message { &__message {
padding-left: $padding-32; padding-left: defaults.$padding-32;
} }
&__line { &__line {
padding: $padding-4 0; padding: defaults.$padding-4 0;
} }
&__title { &__title {
font-size: $font-size-32; font-size: defaults.$font-size-32;
} }
} }
@ -65,7 +67,7 @@
flex-direction: column; flex-direction: column;
&.gdoc-columns { &.gdoc-columns {
margin: $padding-32 0; margin: defaults.$padding-32 0;
} }
.gdoc-columns__content { .gdoc-columns__content {
@ -77,7 +79,7 @@
#menu-control:checked ~ main { #menu-control:checked ~ main {
.gdoc-nav nav, .gdoc-nav nav,
.gdoc-page { .gdoc-page {
transform: translateX($menu-width); transform: translateX(defaults.$menu-width);
} }
.gdoc-page { .gdoc-page {

8
src/sass/_print.scss
View file

@ -1,3 +1,5 @@
@use "defaults";
@media print { @media print {
.gdoc-nav, .gdoc-nav,
.gdoc-footer .container span:not(:first-child), .gdoc-footer .container span:not(:first-child),
@ -7,7 +9,7 @@
} }
.gdoc-footer { .gdoc-footer {
border-top: $border-1 solid $gray-300; border-top: defaults.$border-1 solid defaults.$gray-300;
} }
.gdoc-markdown pre { .gdoc-markdown pre {
@ -16,8 +18,8 @@
} }
.chroma code { .chroma code {
border: $border-1 solid $gray-300; border: defaults.$border-1 solid defaults.$gray-300;
padding: $padding-8 !important; padding: defaults.$padding-8 !important;
font-weight: normal !important; font-weight: normal !important;
} }

105
src/sass/_shortcodes.scss
View file

@ -1,21 +1,24 @@
@use "sass:color";
@use "defaults";
// {{< expand "Label" "icon" >}} // {{< expand "Label" "icon" >}}
.gdoc-expand { .gdoc-expand {
margin: $padding-16 0; margin: defaults.$padding-16 0;
border: $border-1 solid var(--accent-color); border: defaults.$border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
overflow: hidden; overflow: hidden;
&__head { &__head {
background: var(--accent-color-lite); background: var(--accent-color-lite);
padding: $padding-8 $padding-16; padding: defaults.$padding-8 defaults.$padding-16;
cursor: pointer; cursor: pointer;
} }
&__content { &__content {
display: none; display: none;
padding: 0 $padding-16; padding: 0 defaults.$padding-16;
} }
&__control:checked + &__content { &__control:checked + &__content {
@ -29,10 +32,10 @@
// {{< tabs >}} // {{< tabs >}}
.gdoc-tabs { .gdoc-tabs {
margin: $padding-16 0; margin: defaults.$padding-16 0;
border: $border-1 solid var(--accent-color); border: defaults.$border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
overflow: hidden; overflow: hidden;
@ -41,21 +44,21 @@
&__label { &__label {
display: inline-block; display: inline-block;
padding: $padding-8 $padding-16; padding: defaults.$padding-8 defaults.$padding-16;
border-bottom: $border-1 transparent; border-bottom: defaults.$border-1 transparent;
cursor: pointer; cursor: pointer;
} }
&__content { &__content {
order: 999; //Move content blocks to the end order: 999; //Move content blocks to the end
width: 100%; width: 100%;
border-top: $border-1 solid var(--accent-color-lite); border-top: defaults.$border-1 solid var(--accent-color-lite);
padding: 0 $padding-16; padding: 0 defaults.$padding-16;
display: none; display: none;
} }
&__control:checked + &__label { &__control:checked + &__label {
border-bottom: $border-2 solid var(--link-color); border-bottom: defaults.$border-2 solid var(--link-color);
} }
&__control:checked + &__label + &__content { &__control:checked + &__label + &__content {
display: block; display: block;
@ -68,7 +71,7 @@
// {{< columns >}} // {{< columns >}}
.gdoc-columns { .gdoc-columns {
margin: $padding-16 0; margin: defaults.$padding-16 0;
&--regular > :first-child { &--regular > :first-child {
flex: 1; flex: 1;
@ -76,17 +79,17 @@
&--small > :first-child { &--small > :first-child {
flex: 0.35; flex: 0.35;
min-width: $body-min-width * 0.35; min-width: defaults.$body-min-width * 0.35;
} }
&--large > :first-child { &--large > :first-child {
flex: 1.65; flex: 1.65;
min-width: $body-min-width * 1.65; min-width: defaults.$body-min-width * 1.65;
} }
&__content { &__content {
flex: 1 1; flex: 1 1;
min-width: $body-min-width * 0.66; min-width: defaults.$body-min-width * 0.66;
padding: 0; padding: 0;
} }
@ -98,12 +101,12 @@
// {{< button >}} // {{< button >}}
.gdoc-button { .gdoc-button {
$root: &; $root: &;
margin: $padding-16 0; margin: defaults.$padding-16 0;
display: inline-block; display: inline-block;
background: var(--accent-color-lite); background: var(--accent-color-lite);
border: $border-1 solid var(--accent-color); border: defaults.$border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
cursor: pointer; cursor: pointer;
&__link { &__link {
@ -115,78 +118,78 @@
&:hover { &:hover {
background: var(--button-background); background: var(--button-background);
border-color: var(--button-border-color); border-color: var(--button-border-color);
color: $gray-100; color: defaults.$gray-100;
} }
&--regular { &--regular {
font-size: $font-size-base; font-size: defaults.$font-size-base;
#{$root}__link { #{$root}__link {
padding: $padding-4 $padding-8; padding: defaults.$padding-4 defaults.$padding-8;
} }
} }
&--large { &--large {
font-size: $font-size-20; font-size: defaults.$font-size-20;
#{$root}__link { #{$root}__link {
padding: $padding-8 $padding-16; padding: defaults.$padding-8 defaults.$padding-16;
} }
} }
} }
// {{< hint >}} // {{< hint >}}
.gdoc-hint { .gdoc-hint {
@each $name, $color in $hint-colors { @each $name, $color in defaults.$hint-colors {
&.#{$name} { &.#{$name} {
border-left-color: $color; border-left-color: $color;
background-color: color.scale($color, $lightness: 95%, $saturation: -30%); background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color; color: defaults.$body-font-color;
padding: 0; padding: 0;
code, code,
pre { pre {
background-color: color.scale($color, $lightness: 80%, $saturation: -75%); background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
color: $code-font-color; color: defaults.$code-font-color;
} }
} }
} }
&__title { &__title {
padding: $padding-4 $padding-16; padding: defaults.$padding-4 defaults.$padding-16;
background-color: color.scale($gray-600, $alpha: -95%); background-color: color.scale(defaults.$gray-600, $alpha: -95%);
font-weight: bold; font-weight: bold;
color: color.scale($body-font-color, $alpha: -15%); color: color.scale(defaults.$body-font-color, $alpha: -15%);
i.fa::after { i.fa::after {
content: attr(title); content: attr(title);
font-style: normal; font-style: normal;
padding-left: $padding-24; padding-left: defaults.$padding-24;
} }
i.fa { i.fa {
color: $black; color: defaults.$black;
background-size: auto 90%; background-size: auto 90%;
background-repeat: no-repeat; background-repeat: no-repeat;
filter: invert(30%); filter: invert(30%);
margin-left: -5px; margin-left: -5px;
} }
@each $name, $icon in $hint-icons { @each $name, $icon in defaults.$hint-icons {
i.fa.#{$name} { i.fa.#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon}); background-image: url(img/geekdoc-stack.svg##{$icon});
} }
} }
.gdoc-icon { .gdoc-icon {
width: $font-size-24; width: defaults.$font-size-24;
height: $font-size-24; height: defaults.$font-size-24;
margin-left: -5px; margin-left: -5px;
} }
} }
&__text { &__text {
padding: $padding-4 $padding-16; padding: defaults.$padding-4 defaults.$padding-16;
} }
.gdoc-page__anchor { .gdoc-page__anchor {
@ -201,7 +204,7 @@
// Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481) // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
> svg { > svg {
height: 100%; height: 100%;
padding: $padding-8; padding: defaults.$padding-8;
} }
} }
@ -217,14 +220,14 @@
&__meta { &__meta {
gap: 0.5em; gap: 0.5em;
line-height: normal; line-height: normal;
margin-bottom: $padding-4; margin-bottom: defaults.$padding-4;
&:hover .gdoc-page__anchor svg.gdoc-icon { &:hover .gdoc-page__anchor svg.gdoc-icon {
color: var(--control-icons); color: var(--control-icons);
} }
} }
@each $name, $color in $hint-colors { @each $name, $color in defaults.$hint-colors {
&__tag.#{$name} { &__tag.#{$name} {
border-color: color.scale($color, $lightness: 90%, $saturation: -30%); border-color: color.scale($color, $lightness: 90%, $saturation: -30%);
background-color: color.scale($color, $lightness: 95%, $saturation: -30%); background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
@ -232,26 +235,26 @@
} }
&__tag { &__tag {
font-size: $font-size-14; font-size: defaults.$font-size-14;
font-weight: normal; font-weight: normal;
background-color: $gray-100; background-color: defaults.$gray-100;
border: $border-1 solid $gray-200; border: defaults.$border-1 solid defaults.$gray-200;
border-radius: $border-radius; border-radius: defaults.$border-radius;
padding: $padding-2 $padding-4; padding: defaults.$padding-2 defaults.$padding-4;
color: $body-font-color; color: defaults.$body-font-color;
} }
&__default { &__default {
font-size: $font-size-14; font-size: defaults.$font-size-14;
} }
} }
// {{% progress %}} // {{% progress %}}
.gdoc-progress { .gdoc-progress {
margin-bottom: $padding-16; margin-bottom: defaults.$padding-16;
&__label { &__label {
padding: $padding-4 0; padding: defaults.$padding-4 0;
&--name { &--name {
font-weight: bold; font-weight: bold;
@ -261,7 +264,7 @@
&__wrap { &__wrap {
background-color: var(--accent-color-lite); background-color: var(--accent-color-lite);
border-radius: 1em; border-radius: 1em;
box-shadow: inset 0 0 0 $border-1 var(--accent-color); box-shadow: inset 0 0 0 defaults.$border-1 var(--accent-color);
} }
&__bar { &__bar {
@ -278,6 +281,6 @@
transparent transparent
); );
background-size: 2.5em 2.5em; background-size: 2.5em 2.5em;
background-color: $main-color !important; background-color: defaults.$main-color !important;
} }
} }

10
src/sass/_utils.scss
View file

@ -1,3 +1,5 @@
@use "defaults";
.flex { .flex {
display: flex; display: flex;
} }
@ -24,14 +26,14 @@
.flex-grid { .flex-grid {
flex-direction: column; flex-direction: column;
border: $border-1 solid var(--accent-color); border: defaults.$border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: defaults.$border-radius;
background: var(--accent-color-lite); background: var(--accent-color-lite);
} }
.flex-gap { .flex-gap {
flex-wrap: wrap; flex-wrap: wrap;
gap: $padding-16; gap: defaults.$padding-16;
} }
.justify-start { .justify-start {
@ -83,7 +85,7 @@
.table-wrap { .table-wrap {
overflow: auto; overflow: auto;
margin: $padding-16 0; margin: defaults.$padding-16 0;
> table { > table {
margin: 0 !important; margin: 0 !important;

24
src/sass/main.scss
View file

@ -1,18 +1,8 @@
@use "sass:map"; @use "_normalize";
@use "sass:meta"; @use "_utils";
@use "sass:color"; @use "_fonts";
@use "_base";
@import "_defaults"; @use "_markdown";
@import "_color_mode"; @use "_asciidoc";
@import "_chroma_base"; @use "_shortcodes";
@import "_chroma_light";
@import "_chroma_dark";
@import "_normalize";
@import "_utils";
@import "_fonts";
@import "_base";
@import "_markdown";
@import "_asciidoc";
@import "_shortcodes";

5
src/sass/mobile.scss
View file

@ -1,5 +1,4 @@
@use "sass:color"; @use "sass:color";
@import "_defaults"; @use "_defaults";
@use "_mobile";
@import "_mobile";

5
src/sass/print.scss
View file

@ -1,5 +1,4 @@
@use "sass:color"; @use "sass:color";
@import "_defaults"; @use "_defaults";
@use "_print";
@import "_print";