mirror of
https://github.com/thegeeklab/hugo-geekblog.git
synced 2024-11-23 21:50:38 +00:00
fix: replace deprecated darken/lighten scss functions
This commit is contained in:
parent
9c27c6658c
commit
b64827d1e9
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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")};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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,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";
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
|
||||||
@import "_defaults";
|
@import "_defaults";
|
||||||
|
|
||||||
@import "_mobile";
|
@import "_mobile";
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@use "sass:color";
|
||||||
|
|
||||||
@import "_defaults";
|
@import "_defaults";
|
||||||
|
|
||||||
@import "_print";
|
@import "_print";
|
||||||
|
Loading…
Reference in New Issue
Block a user