danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-22 13:51:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

add colors to variables, add one highlight color

Browse Source
This commit is contained in:
Stacy Kvernmo 2023-05-30 15:42:18 -05:00
parent d4a6771912
commit 8ade38ce69
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/_layouts/base.liquid
View File

@ -17,7 +17,7 @@
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link
href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400;1,600|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
media="screen"
rel="stylesheet" />
<link

8
source/assets/sass/config/color/_content.scss
View File

@ -8,3 +8,11 @@ $sl-color--active: color.adjust(brand.$sl-color--venus, $lightness: -10%);
$sl-color--code-background: #f8f8f8;
$sl-color--code-text: color.adjust(brand.$sl-color--pale-sky, $lightness: -25%);
$sl-color--link-action: rgba(218, 219, 223, 25%);
$sl-color--code-warm: #cf1666;
$sl-color--code-bright-dark: #990000;
$sl-color--code-bright: #df1144;
$sl-color--code-muted-dark: #393A34;
$sl-color--code-muted: #656556;
$sl-color--code-base: #006666;
$sl-color--code-cool: #445588;
$sl-color--code-dark: #000000;

25
source/assets/sass/vendor/_syntax-accessible.scss vendored
View File

@ -32,17 +32,17 @@ pre[class*="language-"] {
.token.prolog,
.token.doctype,
.token.cdata {
--sl-color--code-text: #656556;
--sl-color--code-text: var(--sl-color--code-muted);
font-style: italic;
}
[class*='language-scss'] {
--sl-color--code-text: #006666;
--sl-color--code-text: var(--sl-color--code-base);
}
[class*='language-css'] {
& .token.comment {
--sl-color--code-text: #006666;
--sl-color--code-text: var(--sl-color--code-base);
}
}
@ -52,12 +52,12 @@ pre[class*="language-"] {
.token.string,
.token.attr-value {
--sl-color--code-text: #df1144;
--sl-color--code-text: var(--sl-color--code-bright);
}
.token.punctuation,
.token.operator {
--sl-color--code-text: #393A34;
--sl-color--code-text: var(--sl-color--code-muted-dark);
/* no highlight */
font-weight: typography.$sl-font-weight--bold;
}
@ -71,29 +71,28 @@ pre[class*="language-"] {
.token.property,
.token.regex,
.token.inserted {
--sl-color--code-text: #990000;
--sl-color--code-text: var(--sl-color--code-warm);
font-weight: typography.$sl-font-weight--bold;
}
.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
--sl-color--code-text: #000000;
--sl-color--code-text: var(--sl-color--code-dark);
font-weight: typography.$sl-font-weight--bold;
}
.token.function,
.token.deleted,
.language-autohotkey .token.tag {
--sl-color--code-text: #9a050f;
--sl-color--code-text: var(--sl-color--code-bright-dark);
}
.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
--sl-color--code-text: #445588;
--sl-color--code-text: var(--sl-color--code-cool);
font-weight: typography.$sl-font-weight--bold;
}
@ -106,7 +105,7 @@ pre[class*="language-"] {
[class*="language-shell"] {
& .token.function {
--sl-color--code-text: unset;
font-weight: normal;
font-weight: typography.$sl-font-weight--regular;
}
}
@ -116,6 +115,6 @@ pre[class*="language-"] {
.token.variable,
.token[class*="placeholder"] {
--sl-color--code-text: #006666;
font-weight: normal;
--sl-color--code-text: var(--sl-color--code-base);
font-weight: typography.$sl-font-weight--regular;
}