diff options
Diffstat (limited to 'src/lib/styles')
-rw-r--r-- | src/lib/styles/code.css | 56 | ||||
-rw-r--r-- | src/lib/styles/tailwind.css | 3 | ||||
-rw-r--r-- | src/lib/styles/theme.css | 127 |
3 files changed, 186 insertions, 0 deletions
diff --git a/src/lib/styles/code.css b/src/lib/styles/code.css new file mode 100644 index 0000000..36adfe4 --- /dev/null +++ b/src/lib/styles/code.css @@ -0,0 +1,56 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #e4f0fb; + background-color: var(--r-background-color); +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-selector-class, +.hljs-literal, +.hljs-strong, +.hljs-name, +.hljs-string { + color: #5de4c7; +} + +.hljs-code { + color: #66d9ef; +} + +.hljs-class .hljs-title { + color: #add7ff; +} + +.hljs-symbol, +.hljs-regexp, +.hljs-link { + color: #e4f0fb; +} + +.hljs-bullet, +.hljs-subst, +.hljs-title, +.hljs-section, +.hljs-emphasis, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-attr { + color: #add7ff; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #a6accd; +} diff --git a/src/lib/styles/tailwind.css b/src/lib/styles/tailwind.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/lib/styles/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/lib/styles/theme.css b/src/lib/styles/theme.css new file mode 100644 index 0000000..5215feb --- /dev/null +++ b/src/lib/styles/theme.css @@ -0,0 +1,127 @@ +@import '@fontsource-variable/manrope'; +@import '@fontsource-variable/jetbrains-mono'; + +:root { + --r-background-color: hsl(226 19% 13%); + --r-main-font: 'Manrope Variable'; + --r-main-font-size: 42px; + --r-main-color: hsl(226 19% 98%); + --r-heading-font: 'Manrope'; + --r-code-font: 'JetBrains Mono Variable'; + --r-link-color: hsl(180 100% 50%); +} + +/* required for Reveal.js to work */ +#app { + display: contents; +} + +.reveal-viewport { + background-color: var(--r-background-color); +} + +.reveal { + color: var(--r-main-color); + font-family: var(--r-main-font); + font-size: var(--r-main-font-size); + font-weight: normal; +} + +.reveal pre { + display: block; + position: relative; + margin-inline: auto; + font-family: var(--r-code-font); + font-size: 0.55em; + line-height: 1.6em; + text-align: left; + word-wrap: break-word; +} + +.reveal code { + font-family: var(--r-code-font); + text-transform: none; + tab-size: 2; +} + +.reveal code::-webkit-scrollbar { + display: none; + scrollbar-width: none; +} + +.reveal pre code { + max-height: 600px; + display: block; + padding: 5px; + overflow: auto; + word-wrap: normal; +} + +.reveal .code-wrapper { + white-space: normal; +} + +.reveal .code-wrapper code { + white-space: pre; +} + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; +} + +.reveal table th { + font-weight: bold; +} + +.reveal table th, +.reveal table td { + padding: 0.2em 0.5em 0.2em 0.5em; + text-align: left; + border-bottom: 1px solid; +} + +.reveal table th[align='center'], +.reveal table td[align='center'] { + text-align: center; +} + +.reveal table th[align='right'], +.reveal table td[align='right'] { + text-align: right; +} + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { + border-bottom: none; +} + +.reveal sup { + vertical-align: super; + font-size: smaller; +} + +.reveal sub { + vertical-align: sub; + font-size: smaller; +} + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; +} + +.reveal small * { + vertical-align: top; +} + +.reveal .controls { + color: var(--r-link-color); +} + +.reveal .progress { + color: var(--r-link-color); +} |