github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-24 05:50:40 +00:00
Code Issues Projects Releases Wiki Activity

fix: replace deprecated darken/lighten scss functions

Browse Source
This commit is contained in:
Robert Kaussow 2024-10-06 21:37:33 +02:00
parent 9c27c6658c
commit b64827d1e9
Signed by: xoxys
GPG Key ID: 4E692A2EAECC03C0
9 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/sass/_asciidoc.scss
View File

@ -2,7 +2,7 @@
@each $name, $color in $hint-colors { @each $name, $color in $hint-colors {
&.#{$name} { &.#{$name} {
border-left-color: $color; border-left-color: $color;
background-color: scale-color($color, $lightness: 95%, $saturation: -30%); background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color; color: $body-font-color;
} }
} }
@ -28,7 +28,7 @@
padding: $padding-4 $padding-16 !important; padding: $padding-4 $padding-16 !important;
&:first-child { &:first-child {
background-color: scale-color($gray-600, $alpha: -95%); background-color: color.scale($gray-600, $alpha: -95%);
font-weight: bold; font-weight: bold;
&.icon { &.icon {

2
src/sass/_base.scss
View File

@ -262,7 +262,7 @@ svg.gblog-icon {
&:hover, &:hover,
&.is-active, &.is-active,
&:visited:hover { &:visited:hover {
background: lighten($second-color, 10%); background: color.scale($second-color, $lightness: 10%);
} }
&:visited { &:visited {

40
src/sass/_color_mode.scss
View File

@ -7,7 +7,7 @@
--mark-color: #{$mark-color}; --mark-color: #{$mark-color};
--button-background: #{lighten($main-color, 2)}; --button-background: #{color.scale($main-color, $lightness: 15%)};
--button-border-color: #{$main-color}; --button-border-color: #{$main-color};
--link-color: #{$link-color}; --link-color: #{$link-color};
@ -20,7 +20,7 @@
--accent-color: #{$gray-200}; --accent-color: #{$gray-200};
--accent-color-lite: #{$gray-100}; --accent-color-lite: #{$gray-100};
--control-icons: #{lighten($body-font-color, 50)}; --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
--footer-background: #{$second-color}; --footer-background: #{$second-color};
--footer-font-color: #{$white}; --footer-font-color: #{$white};
@ -45,11 +45,11 @@
--header-font-color: #{$white}; --header-font-color: #{$white};
--body-background: #{$body-background-dark}; --body-background: #{$body-background-dark};
--body-font-color: #{lighten($body-background-dark, 60)}; --body-font-color: #{color.scale($body-background-dark, $lightness: 70%)};
--mark-color: #{$mark-color}; --mark-color: #{$mark-color};
--button-background: #{lighten($main-color, 2)}; --button-background: #{color.scale($main-color, $lightness: 15%)};
--button-border-color: #{$main-color}; --button-border-color: #{$main-color};
--link-color: #{$link-color-dark}; --link-color: #{$link-color-dark};
@ -58,15 +58,11 @@
--hint-link-color: #{$link-color}; --hint-link-color: #{$link-color};
--hint-link-color-visited: #{$link-color-visited}; --hint-link-color-visited: #{$link-color-visited};
--code-copy-font-color: #{lighten($body-font-color, 48)}; --accent-color-dark: #{color.scale($body-background-dark, $lightness: -60%)};
--code-copy-border-color: #{lighten($body-font-color, 32)}; --accent-color: #{color.scale($body-background-dark, $lightness: -30%)};
--code-copy-success-color: #{map.get($hint-colors, "ok")}; --accent-color-lite: #{color.scale($body-background-dark, $lightness: -15%)};
--accent-color-dark: #{darken($body-background-dark, 8)}; --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
--accent-color: #{darken($body-background-dark, 4)};
--accent-color-lite: #{darken($body-background-dark, 2)};
--control-icons: #{lighten($body-font-color, 50)};
--footer-background: #{$second-color}; --footer-background: #{$second-color};
--footer-font-color: #{$white}; --footer-font-color: #{$white};
@ -106,7 +102,7 @@
.gblog-hint__title, .gblog-hint__title,
.admonitionblock table td:first-child { .admonitionblock table td:first-child {
background-color: scale-color($gray-600, $alpha: -85%); background-color: color.scale($gray-600, $alpha: -85%);
} }
} }
} }
@ -116,14 +112,14 @@
& { & {
--code-background: #{$code-background-dark}; --code-background: #{$code-background-dark};
--code-accent-color: #{darken($code-background-dark, 4)}; --code-accent-color: #{color.scale($code-background-dark, $lightness: -30%)};
--code-accent-color-lite: #{darken($code-background-dark, 2)}; --code-accent-color-lite: #{color.scale($code-background-dark, $lightness: -15%)};
--code-font-color: #{$code-font-color-dark}; --code-font-color: #{$code-font-color-dark};
--code-copy-background: #{$code-background-dark}; --code-copy-background: #{$code-background-dark};
--code-copy-font-color: #{darken($code-font-color-dark, 15)}; --code-copy-font-color: #{color.scale($code-font-color-dark, $lightness: -15%)};
--code-copy-border-color: #{darken($code-font-color-dark, 20)}; --code-copy-border-color: #{color.scale($code-font-color-dark, $lightness: -20%)};
--code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)}; --code-copy-success-color: #{color.scale(map.get($hint-colors, "ok"), $alpha: -55%)};
} }
} }
@ -132,13 +128,13 @@
& { & {
--code-background: #{$code-background}; --code-background: #{$code-background};
--code-accent-color: #{darken($code-background, 6)}; --code-accent-color: #{color.scale($code-background, $lightness: -45%)};
--code-accent-color-lite: #{darken($code-background, 2)}; --code-accent-color-lite: #{color.scale($code-background, $lightness: -15%)};
--code-font-color: #{$code-font-color}; --code-font-color: #{$code-font-color};
--code-copy-background: #{$code-background}; --code-copy-background: #{$code-background};
--code-copy-font-color: #{lighten($code-font-color, 15)}; --code-copy-font-color: #{color.scale($code-font-color, $lightness: 20%)};
--code-copy-border-color: #{lighten($code-font-color, 20)}; --code-copy-border-color: #{color.scale($code-font-color, $lightness: 40%)};
--code-copy-success-color: #{map.get($hint-colors, "ok")}; --code-copy-success-color: #{map.get($hint-colors, "ok")};
} }
} }

6
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;
@ -66,8 +68,8 @@ $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;
$link-color-visited-dark: rgba(186, 142, 240) !default; $link-color-visited-dark: rgba(186, 142, 240) !default;
$code-background: lighten($gray-200, 4) !default; $code-background: $gray-100 !default;
$code-background-dark: darken($body-background-dark, 3) !default; $code-background-dark: color.scale($body-background-dark, $lightness: -15%) !default;
$header-font-family: "Metropolis", sans-serif !default; $header-font-family: "Metropolis", sans-serif !default;
$header-height: 3.5rem !default; $header-height: 3.5rem !default;

4
src/sass/_mobile.scss
View File

@ -23,7 +23,7 @@
} }
&__list { &__list {
background: lighten($second-color, 10%); background: color.scale($second-color, $lightness: 10%);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
max-height: 0; max-height: 0;
@ -42,7 +42,7 @@
&:hover, &:hover,
&:visited:hover, &:visited:hover,
&.is-active { &.is-active {
background: lighten($second-color, 5%); background: color.scale($second-color, $lightness: 5%);
} }
} }

12
src/sass/_shortcodes.scss
View File

@ -187,13 +187,13 @@
@each $name, $color in $hint-colors { @each $name, $color in $hint-colors {
&.#{$name} { &.#{$name} {
border-left-color: $color; border-left-color: $color;
background-color: scale-color($color, $lightness: 95%, $saturation: -30%); background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color; color: $body-font-color;
padding: 0; padding: 0;
code, code,
pre { pre {
background-color: scale-color($color, $lightness: 80%, $saturation: -75%); background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
color: $code-font-color; color: $code-font-color;
} }
} }
@ -201,9 +201,9 @@
&__title { &__title {
padding: $padding-4 $padding-16; padding: $padding-4 $padding-16;
background-color: scale-color($gray-600, $alpha: -95%); background-color: color.scale($gray-600, $alpha: -95%);
font-weight: bold; font-weight: bold;
color: scale-color($body-font-color, $alpha: -15%); color: color.scale($body-font-color, $alpha: -15%);
i.fa::after { i.fa::after {
content: attr(title); content: attr(title);
@ -273,8 +273,8 @@
@each $name, $color in $hint-colors { @each $name, $color in $hint-colors {
&__tag.#{$name} { &__tag.#{$name} {
border-color: scale-color($color, $lightness: 90%, $saturation: -30%); border-color: color.scale($color, $lightness: 90%, $saturation: -30%);
background-color: scale-color($color, $lightness: 95%, $saturation: -30%); background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
} }
} }

1
src/sass/main.scss
View File

@ -1,5 +1,6 @@
@use "sass:map"; @use "sass:map";
@use "sass:meta"; @use "sass:meta";
@use "sass:color";
@import "_defaults"; @import "_defaults";
@import "_color_mode"; @import "_color_mode";

2
src/sass/mobile.scss
View File

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

2
src/sass/print.scss
View File

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