React Slides

* Adds useState
* State
* useEffect
* Side Effects

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);
+}