diff options
-rw-r--r-- | sass/_colors.scss | 65 | ||||
-rw-r--r-- | sass/_syntax.scss | 207 | ||||
-rw-r--r-- | sass/style.scss | 24 |
3 files changed, 44 insertions, 252 deletions
diff --git a/sass/_colors.scss b/sass/_colors.scss index 35d0c13..2a63c6e 100644 --- a/sass/_colors.scss +++ b/sass/_colors.scss @@ -1,50 +1,49 @@ +@import url("syntax-theme-dark.css") (prefers-color-scheme: dark); +@import url("syntax-theme-light.css") (prefers-color-scheme: light); + :root { color-scheme: light dark; - --bg_h: #1d2021; - --bg_s: #32302f; - --bg: #282828; + --bg: #1d2021; --bg1: #3c3836; --bg2: #504945; --bg3: #665c54; --bg4: #7c6f64; - --fg: #fbf1c7; + --fg: #f9f5d7; --fg1: #ebdbb2; --fg2: #d5c4a1; --fg3: #bdae93; --fg4: #a89984; - --red: #fb4934; - --green: #b8bb26; - --yellow: #fabd2f; - --blue: #83a598; - --purple: #d3869b; - --aqua: #8ec07c; - --gray: #928374; - --orange: #fe8019; + --red: #cc2412; + --green: #98971a; + --yellow: #d79921; + --blue: #458588; + --purple: #b16286; + --cyan: #689d6a; + --gray: #a89984; + --orange: #d65d0e; - --red-dim: #cc2412; - --green-dim: #98971a; - --yellow-dim: #d79921; - --blue-dim: #458588; - --purple-dim: #b16286; - --aqua-dim: #689d6a; - --gray-dim: #a89984; - --orange-dim: #d65d0e; + --bright-red: #fb4934; + --bright-green: #b8bb26; + --bright-yellow: #fabd2f; + --bright-blue: #83a598; + --bright-purple: #d3869b; + --bright-cyan: #8ec07c; + --bright-gray: #928374; + --bright-orange: #fe8019; } @media (prefers-color-scheme: light) { :root { - --bg_h: #f9f5d7; - --bg_s: #f2e5bc; - --bg: #fbf1c7; + --bg: #f9f5d7; --bg1: #ebdbb2; --bg2: #d5c4a1; --bg3: #bdae93; --bg4: #a89984; - --fg: #282828; + --fg: #1d2021; --fg1: #3c3836; --fg2: #504945; --fg3: #665c54; @@ -55,17 +54,17 @@ --yellow: #b57614; --blue: #076678; --purple: #8f3f71; - --aqua: #427b58; + --cyan: #427b58; --orange: #af3a03; --gray: #928374; - --red-dim: #cc2412; - --green-dim: #98971a; - --yellow-dim: #d79921; - --blue-dim: #458598; - --purple-dim: #b16286; - --aqua-dim: #689d6a; - --orange-dim: #d65d0e; - --gray-dim: #7c6f64; + --bright-red: #cc2412; + --bright-green: #98971a; + --bright-yellow: #d79921; + --bright-blue: #458598; + --bright-purple: #b16286; + --bright-cyan: #689d6a; + --bright-orange: #d65d0e; + --bright-gray: #7c6f64; } } diff --git a/sass/_syntax.scss b/sass/_syntax.scss deleted file mode 100644 index d4cafa0..0000000 --- a/sass/_syntax.scss +++ /dev/null @@ -1,207 +0,0 @@ -/* - * theme "gruvbox" generated by syntect - */ - -.z-code { - color: var(--fg); - background-color: var(--bg_h); -} - -.z-punctuation.z-definition.z-tag { - color: var(--blue); -} -.z-punctuation.z-definition.z-entity { - color: var(--purple); -} -.z-constant { - color: var(--purple); -} -.z-constant.z-character.z-escape { - color: var(--green); -} -.z-constant.z-other { - color: var(--fg); -} -.z-entity { - color: var(--aqua); -} -.z-keyword.z-operator.z-comparison, -.z-keyword.z-operator, -.z-keyword.z-operator.z-symbolic, -.z-keyword.z-operator.z-string, -.z-keyword.z-operator.z-assignment, -.z-keyword.z-operator.z-arithmetic, -.z-keyword.z-operator.z-class, -.z-keyword.z-operator.z-key, -.z-keyword.z-operator.z-logical { - color: var(--orange); -} -.z-keyword, -.z-keyword.z-operator.z-new, -.z-keyword.z-other, -.z-keyword.z-control { - color: var(--red); -} -.z-storage { - color: var(--red); -} -.z-string, -.z-string.z-unquoted.z-heredoc .z-string { - color: var(--green); -} -.z-comment { - color: var(--gray); - font-style: italic; -} -.z-string.z-regexp .z-constant.z-character.z-escape { - color: var(--green); -} -.z-support { - color: var(--yellow); -} -.z-variable { - color: var(--fg); -} -.z-variable.z-language { - color: var(--fg); -} -.z-meta.z-function-call { - color: var(--fg); -} -.z-invalid { - color: var(--fg); - background-color: var(--red-dim); -} -.z-text .z-source, -.z-string.z-unquoted.z-heredoc, -.z-source .z-source { - color: var(--fg); -} -.z-string.z-quoted .z-source { - color: var(--green); -} -.z-string { - color: var(--green); -} -.z-support.z-constant { - color: var(--yellow); -} -.z-support.z-class { - color: var(--aqua); -} -.z-entity.z-name.z-tag { - color: var(--aqua); - font-weight: bold; -} -.z-meta.z-tag, -.z-meta.z-tag .z-entity { - color: var(--aqua); -} -.z-constant.z-other.z-color.z-rgb-value { - color: var(--blue); -} -.z-meta.z-selector.z-css .z-entity.z-name.z-tag { - color: var(--red); -} -.z-meta.z-selector.z-css, -.z-entity.z-other.z-attribute-name.z-id { - color: var(--green); -} -.z-meta.z-selector.z-css .z-entity.z-other.z-attribute-name.z-class { - color: var(--green); -} -.z-support.z-type.z-property-name.z-css { - color: var(--aqua); -} -.z-meta.z-preprocessor.z-at-rule .z-keyword.z-control.z-at-rule { - color: var(--yellow); -} -.z-meta.z-property-value .z-constant { - color: var(--yellow); -} -.z-meta.z-property-value .z-support.z-constant.z-named-color.z-css { - color: var(--orange); -} -.z-meta.z-constructor.z-argument.z-css { - color: var(--yellow); -} -.z-meta.z-diff, -.z-meta.z-diff.z-header { - color: var(--blue); -} -.z-markup.z-deleted { - color: var(--red); -} -.z-markup.z-changed { - color: var(--yellow); -} -.z-markup.z-inserted { - color: var(--aqua); -} -.z-markup.z-bold { - font-weight: bold; -} -.z-markup.z-italic { - font-style: italic; -} -.z-markup.z-heading { - color: var(--aqua); - font-weight: bold; -} -.z-entity.z-name.z-type.z-class.z-php { - color: var(--aqua); -} -.z-keyword.z-other.z-phpdoc { - color: var(--gray); -} -.z-constant.z-numeric.z-css, -.z-keyword.z-other.z-unit.z-css { - color: var(--purple); -} -.z-punctuation.z-definition.z-entity.z-css { - color: var(--green); -} -.z-variable.z-language.z-js { - color: var(--yellow); -} -.z-string.z-unquoted.z-label.z-js { - color: var(--fg); -} -.z-constant.z-other.z-table-name.z-sql { - color: var(--green); -} -.z-constant.z-other.z-database-name.z-sql { - color: var(--green); -} -.z-storage.z-type.z-dired.z-item.z-directory, -.z-dired.z-item.z-directory { - color: var(--aqua); -} -.z-orgmode.z-link { - color: var(--yellow); - font-style: underline; -} -.z-orgmode.z-page { - color: var(--green); -} -.z-orgmode.z-break { - color: var(--purple); -} -.z-orgmode.z-headline { - color: var(--aqua); -} -.z-orgmode.z-tack { - color: var(--yellow); -} -.z-orgmode.z-follow_up { - color: var(--yellow); -} -.z-orgmode.z-checkbox { - color: var(--yellow); -} -.z-orgmode.z-checkbox.z-summary { - color: var(--yellow); -} -.z-orgmode.z-tags { - color: var(--red); -} diff --git a/sass/style.scss b/sass/style.scss index c2eddb8..d234f58 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,7 +1,7 @@ -@import "colors", "code", "syntax"; +@import "colors", "code"; html { - background: var(--bg_s); + background: var(--bg); color: var(--fg); font-size: 14pt; font-family: monospace; @@ -20,10 +20,10 @@ ul.simple { } a { - color: var(--aqua); + color: var(--bright-cyan); &:visited { - color: var(--aqua-dim); + color: var(--cyan); } text-decoration: none; @@ -33,12 +33,12 @@ a { } &:active { - background: var(--orange-dim); + background: var(--orange); } } footer { - color: var(--gray); + color: var(--bright-gray); font-size: 0.8rem; } @@ -84,11 +84,11 @@ body { a, a:visited { font-size: 1.2rem; - color: var(--gray); + color: var(--bright-gray); font-weight: bold; &.active { - color: var(--orange-dim); + color: var(--orange); } } } @@ -101,12 +101,12 @@ body { & > header { & > hgroup { & > :first-child { - color: var(--orange); + color: var(--bright-orange); margin-bottom: 0; } & > :not(:first-child) { - color: var(--gray-dim); + color: var(--gray); margin-top: 0; margin-bottom: 0; } @@ -154,10 +154,10 @@ body { } li > article > header > hgroup > :first-child a { - color: var(--blue); + color: var(--bright-blue); &:visited { - color: var(--blue-dim); + color: var(--blue); } } |