diff options
author | sadbeast <sadbeast@sadbeast.com> | 2024-01-31 17:47:56 -0800 |
---|---|---|
committer | sadbeast <sadbeast@sadbeast.com> | 2024-01-31 17:47:56 -0800 |
commit | 332ec93366315fa1ed7b4acd7a3407c96e8ddfa7 (patch) | |
tree | 6ae553317f12a7a6a29c849c8805ffab96436dc2 /app/assets/stylesheets/content/_code.scss | |
download | td-main.tar.gz td-main.tar.bz2 |
Diffstat (limited to 'app/assets/stylesheets/content/_code.scss')
-rw-r--r-- | app/assets/stylesheets/content/_code.scss | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/stylesheets/content/_code.scss b/app/assets/stylesheets/content/_code.scss new file mode 100644 index 0000000..e03b191 --- /dev/null +++ b/app/assets/stylesheets/content/_code.scss @@ -0,0 +1,91 @@ +/** + * Code + */ + +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css +// –––––––––––––––––––– + +// 1. Correct the inheritance and scaling of font size in all browsers +// 2. Correct the odd `em` font sizing in all browsers +pre, +code, +kbd, +samp { + font-size: 0.875em; // 2 + font-family: var(--font-family); // 1 +} + +// Prevent overflow of the container in all browsers (opinionated) +pre { + -ms-overflow-style: scrollbar; + overflow: auto; +} + +// Pico +// –––––––––––––––––––– + +pre, +code, +kbd { + border-radius: var(--border-radius); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); + line-height: initial; +} + +code, +kbd { + display: inline-block; + padding: 0.375rem 0.5rem; +} + +pre { + display: block; + margin-bottom: var(--spacing); + overflow-x: auto; + + > code { + display: block; + padding: var(--spacing); + background: none; + font-size: 14px; + line-height: var(--line-height); + } +} + +// Code Syntax +code { + // Tags + b { + color: var(--code-tag-color); + font-weight: var(--font-weight); + } + + // Properties + i { + color: var(--code-property-color); + font-style: normal; + } + + // Values + u { + color: var(--code-value-color); + text-decoration: none; + } + + // Comments + em { + color: var(--code-comment-color); + font-style: normal; + } +} + +// kbd +kbd { + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: baseline; +} |