diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-25 16:31:20 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-25 16:31:20 +0100 |
| commit | 4aedfb4f57a55f39909b96ce86493daa39f3b9f0 (patch) | |
| tree | 6ee6a8d90cd965f3cae10816ad78c8dd87302d5d /src/styles/base | |
| parent | f6e0e444820f67f212e362c54816df5d0e4d4cf0 (diff) | |
chore: adjust colors and grid layout
Diffstat (limited to 'src/styles/base')
| -rw-r--r-- | src/styles/base/_colors.scss | 6 | ||||
| -rw-r--r-- | src/styles/base/_typography.scss | 16 |
2 files changed, 16 insertions, 6 deletions
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index e6e2612..1f90968 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -3,8 +3,9 @@ :root { --color-bg: #{var.$light-theme_white}; --color-bg-opacity: #{var.$light-theme_white-o90}; - --color-bg-secondary: #{var.$light-theme_grey-brighter}; + --color-bg-secondary: #{var.$light-theme_white-dark}; --color-bg-tertiary: #{var.$light-theme_grey-bright}; + --color-bg-code: #{var.$light-theme_grey-brighter}; --color-fg: #{var.$light-theme_black}; --color-fg-light: #{var.$light-theme_grey-dark}; --color-fg-inverted: #{var.$light-theme_white}; @@ -36,7 +37,8 @@ --color-bg-opacity: #{var.$dark-theme_black-o90}; --color-bg-light: #{var.$dark-theme_grey}; --color-bg-secondary: #{var.$dark-theme_black-bright}; - --color-bg-tertiary: #{var.$dark-theme_black-brighter}; + --color-bg-tertiary: #{var.$dark-theme_grey-darker}; + --color-bg-code: #{var.$dark-theme_black-brighter}; --color-fg: #{var.$dark-theme_white}; --color-fg-light: #{var.$dark-theme_grey}; --color-fg-inverted: #{var.$dark-theme_black}; diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index a6d8e50..272d2c7 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -99,7 +99,7 @@ ol { } ::marker { - color: var(--color-secondary); + color: var(--color-primary-dark); } } @@ -206,15 +206,23 @@ var { font-family: var(--font-family-mono); } -:not(pre) > code { - background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border-light); +:not(pre) > code, +kbd, +var { + background: var(--color-bg-code); + border: fun.convert-px(1) solid var(--color-border); border-radius: fun.convert-px(3); color: var(--color-primary-darker); + font-style: normal; padding: fun.convert-px(2) fun.convert-px(5) fun.convert-px(1) fun.convert-px(5); } +kbd { + box-shadow: fun.convert-px(1) fun.convert-px(1) 0 fun.convert-px(1) + var(--color-shadow); +} + pre { display: block; max-width: 100%; |