aboutsummaryrefslogtreecommitdiff
path: root/src/lib/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/styles')
-rw-r--r--src/lib/styles/code.css56
-rw-r--r--src/lib/styles/tailwind.css3
-rw-r--r--src/lib/styles/theme.css127
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);
+}