kyfx
/
hugo-geekdoc
mirror of https://github.com/thegeeklab/hugo-geekdoc.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: harmonize some bg colors, borders and hints

This commit is contained in:
Robert Kaussow 2025-03-01 17:28:51 +01:00
parent 34d0bcfc89
commit 849fae00e2
No known key found for this signature in database
GPG Key ID: 4E692A2EAECC03C0
10 changed files with 94 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/shortcodes/columns.html
View File

@ -5,7 +5,7 @@
{{- end }}
<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
<div class="gdoc-columns gdoc-columns--{{ $size }} flex gap-16 flex-mobile-column">
{{- range split .Inner "<--->" }}
<div class="gdoc-columns__content gdoc-markdown--nested flex-even">
{{ . | $.Page.RenderString -}}

5
layouts/shortcodes/hint.html
View File

@ -4,12 +4,13 @@
<blockquote class="gdoc-hint {{ $type | lower }}">
<div class="gdoc-hint__title flex align-center">
<div class="gdoc-hint__title flex gap-8 align-center">
{{- with $icon -}}
<svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
<span>{{ $title }}</span>
{{- else -}}
<i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
<i class="fa {{ $type | lower }}"></i>
<span>{{ $title }}</span>
{{- end -}}
</div>
<div class="gdoc-hint__text">{{ .Inner | $.Page.RenderString }}</div>

73
src/sass/_asciidoc.scss
View File

@ -2,20 +2,33 @@
@use "defaults";
.admonitionblock {
$root: &;
margin: defaults.$padding-16 0;
padding: 0;
border: defaults.$border-1 solid var(--accent-color);
border-left: defaults.$border-4 solid var(--accent-color);
border-radius: defaults.$border-radius;
@each $name, $color in defaults.$hint-colors {
&.#{$name} {
border-left-color: $color;
background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
border-color: $color;
color: defaults.$body-font-color;
td.icon {
background-color: color.adjust($color, $alpha: -0.9);
border-start-start-radius: inherit;
border-start-end-radius: inherit;
position: relative;
z-index: -10;
outline: color.adjust($color, $alpha: -0.9);
}
}
}
& {
margin: defaults.$padding-16 0;
padding: 0;
border-left: defaults.$border-4 solid var(--accent-color);
border-radius: defaults.$border-radius;
.table-wrap {
margin: 0;
}
table {
@ -35,28 +48,34 @@
font-weight: bold;
&.icon {
.title {
display: flex;
align-items: center;
}
i.fa::after {
content: attr(title);
font-style: normal;
padding-left: defaults.$padding-24;
}
i.fa {
color: defaults.$black;
background-size: auto 90%;
background-repeat: no-repeat;
filter: invert(30%);
margin-left: -5px;
}
margin-left: -5px;
@each $name, $icon in defaults.$hint-icons {
i.fa.icon-#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon});
width: defaults.$font-size-24;
height: defaults.$font-size-24;
position: relative;
&::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: defaults.$font-size-24;
height: defaults.$font-size-24;
mask-image: url(img/geekdoc-stack.svg##{$icon});
mask-repeat: no-repeat;
mask-size: contain;
background-color: var(--body-font-color);
}
&::after {
color: var(--body-font-color);
content: attr(title);
font-style: normal;
padding-left: defaults.$padding-32;
}
}
}
}

4
src/sass/_base.scss
View File

@ -354,8 +354,8 @@ svg.gdoc-icon {
background: var(--body-background);
border-radius: defaults.$border-radius;
box-shadow:
0 1px 3px 0 var(--accent-color-dark),
0 1px 2px 0 var(--accent-color);
0 1px 3px 0 var(--accent-color),
0 1px 2px 0 var(--accent-color-lite);
position: absolute;
margin: 0;
padding: defaults.$padding-8 defaults.$padding-4 !important;

3
src/sass/_chroma_base.scss
View File

@ -20,7 +20,6 @@
/* LineTable */
.chroma .lntable {
border: defaults.$border-1 solid var(--code-accent-color);
border-radius: defaults.$border-radius;
border-spacing: 0;
padding: 0;
@ -39,7 +38,7 @@
.chroma .lntable td:first-child {
code {
background-color: var(--code-accent-color-lite);
border-right: defaults.$border-1 solid var(--code-accent-color);
font-size: defaults.$font-size-12;
padding-left: 0;
padding-right: 0;
border-radius: 0;

39
src/sass/_color_mode.scss
View File

@ -19,10 +19,6 @@
--link-color: #{defaults.$link-color};
--link-color-visited: #{defaults.$link-color-visited};
--hint-link-color: #{defaults.$link-color};
--hint-link-color-visited: #{defaults.$link-color-visited};
--accent-color-dark: #{defaults.$gray-400};
--accent-color: #{defaults.$gray-200};
--accent-color-lite: #{defaults.$gray-100};
@ -40,16 +36,10 @@
}
.gdoc-markdown {
.gdoc-hint,
.gdoc-props__tag,
.admonitionblock {
filter: none;
}
.gdoc-hint__title,
.admonitionblock table td:first-child {
background-color: color.scale(defaults.$gray-600, $alpha: -95%);
}
}
}
@ -68,10 +58,6 @@
--link-color: #{defaults.$link-color-dark};
--link-color-visited: #{defaults.$link-color-visited-dark};
--hint-link-color: #{defaults.$link-color};
--hint-link-color-visited: #{defaults.$link-color-visited};
--accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
--accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
--accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
@ -89,7 +75,6 @@
}
.gdoc-markdown {
.gdoc-hint,
.gdoc-props__tag,
.admonitionblock {
filter: saturate(2.5) brightness(0.85);
@ -98,22 +83,6 @@
.gdoc-progress__bar {
filter: saturate(0.85) brightness(0.85);
}
.gdoc-hint,
.admonitionblock {
a {
color: var(--hint-link-color);
&:visited {
color: var(--hint-link-color-visited);
}
}
}
.gdoc-hint__title,
.admonitionblock table td:first-child {
background-color: color.scale(defaults.$gray-600, $alpha: -85%);
}
}
}
@ -124,7 +93,7 @@
--code-background: #{defaults.$code-background-dark};
--code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
--code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
--code-font-color: #{defaults.$code-font-color-dark};
--code-font-color: #{defaults.$gray-300};
--code-copy-background: #{defaults.$code-background-dark};
--code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
@ -140,11 +109,11 @@
--code-background: #{defaults.$code-background};
--code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
--code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
--code-font-color: #{defaults.$code-font-color};
--code-font-color: #{defaults.$gray-700};
--code-copy-background: #{defaults.$code-background};
--code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
--code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
--code-copy-font-color: #{defaults.$gray-500};
--code-copy-border-color: #{defaults.$gray-400};
--code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
}
}

19
src/sass/_defaults.scss
View File

@ -28,19 +28,18 @@ $border-1: 1px !default;
$border-2: 1.5px !default;
$border-4: 3px !default;
$border-radius: 0.15rem !default;
$border-radius: 0.3rem !default;
// Grayscale
$white: rgba(255, 255, 255, 1) !default;
$gray-100: rgba(248, 249, 250, 1) !default;
$gray-200: rgba(233, 236, 239, 1) !default;
$gray-300: rgba(222, 226, 230, 1) !default;
$gray-400: rgba(206, 212, 218, 1) !default;
$gray-500: rgba(173, 181, 189, 1) !default;
$gray-600: rgba(134, 142, 150, 1) !default;
$gray-700: rgba(73, 80, 87, 1) !default;
$gray-800: rgba(52, 58, 64, 1) !default;
$gray-900: rgba(33, 37, 41, 1) !default;
$gray-100: rgba(244, 246, 247, 1) !default;
$gray-200: rgba(217, 219, 221, 1) !default;
$gray-300: rgba(189, 192, 195, 1) !default;
$gray-400: rgba(162, 165, 169, 1) !default;
$gray-500: rgba(134, 137, 142, 1) !default;
$gray-600: rgba(107, 110, 116, 1) !default;
$gray-700: rgba(79, 83, 90, 1) !default;
$gray-800: rgba(52, 56, 64, 1) !default;
$black: rgba(0, 0, 0, 1) !default;
$link-color: rgba(10, 83, 154, 1) !default;

7
src/sass/_markdown.scss
View File

@ -33,7 +33,7 @@
a,
&__link {
text-decoration: underline;
text-decoration: node;
border-bottom: defaults.$border-1 solid transparent;
line-height: normal;
@ -120,6 +120,7 @@
padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
(defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
border: defaults.$border-1 solid var(--accent-color);
border-left: defaults.$border-4 solid var(--accent-color);
border-radius: defaults.$border-radius;
}
@ -174,7 +175,7 @@
}
code {
padding: defaults.$padding-4 defaults.$padding-8;
padding: defaults.$padding-2 defaults.$padding-4;
}
pre,
@ -183,7 +184,7 @@
border-radius: defaults.$border-radius;
color: var(--code-font-color);
font-size: defaults.$font-size-14;
line-height: defaults.$padding-16;
line-height: defaults.$padding-20;
}
pre code {

43
src/sass/_shortcodes.scss
View File

@ -140,51 +140,44 @@
// {{< hint >}}
.gdoc-hint {
$root: &;
@each $name, $color in defaults.$hint-colors {
&.#{$name} {
border-left-color: $color;
background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
color: defaults.$body-font-color;
border-color: $color;
padding: 0;
code,
pre {
background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
color: defaults.$code-font-color;
#{$root}__title {
background-color: color.adjust($color, $alpha: -0.9);
border-start-start-radius: inherit;
border-start-end-radius: inherit;
position: relative;
z-index: -10;
outline: color.adjust($color, $alpha: -0.9);
}
}
}
&__title {
padding: defaults.$padding-4 defaults.$padding-16;
background-color: color.scale(defaults.$gray-600, $alpha: -95%);
font-weight: bold;
color: color.scale(defaults.$body-font-color, $alpha: -15%);
i.fa::after {
content: attr(title);
font-style: normal;
padding-left: defaults.$padding-24;
}
i.fa {
color: defaults.$black;
background-size: auto 90%;
background-repeat: no-repeat;
filter: invert(30%);
margin-left: -5px;
}
color: var(--body-font-color);
margin-left: -5px;
@each $name, $icon in defaults.$hint-icons {
i.fa.#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon});
width: defaults.$font-size-24;
height: defaults.$font-size-24;
mask-image: url(img/geekdoc-stack.svg##{$icon});
mask-repeat: no-repeat;
mask-size: contain;
background-color: var(--body-font-color);
}
}
.gdoc-icon {
width: defaults.$font-size-24;
height: defaults.$font-size-24;
margin-left: -5px;
}
}

7
src/sass/_utils.scss
View File

@ -31,7 +31,12 @@
background: var(--accent-color-lite);
}
.flex-gap {
.gap-8 {
flex-wrap: wrap;
gap: defaults.$padding-8;
}
.gap-16 {
flex-wrap: wrap;
gap: defaults.$padding-16;
}