From f05a472585b2506da21aed71f0252b2d4c04a221 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Mon, 5 Feb 2024 04:15:02 +0530 Subject: React Slides * Adds useState * State * useEffect * Side Effects --- src/lib/styles/theme.css | 127 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 src/lib/styles/theme.css (limited to 'src/lib/styles/theme.css') 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); +} -- cgit v1.2.3