From c8472fcd04eba917e954c691aa1a3f56d9edf508 Mon Sep 17 00:00:00 2001
From: Jean-Nicolas Veigel <art.jnveigel@gmail.com>
Date: Sun, 17 Mar 2024 19:00:27 +0100
Subject: chore: seperate common page styles from lesson page styles

---
 static/css/pages/lesson.css |  95 ++++++++++++++++
 static/css/root.css         | 185 ++++++++++++++++++++++++++++++
 static/style.css            | 266 --------------------------------------------
 3 files changed, 280 insertions(+), 266 deletions(-)
 create mode 100644 static/css/root.css
 delete mode 100644 static/style.css

diff --git a/static/css/pages/lesson.css b/static/css/pages/lesson.css
index e69de29..492c1fe 100644
--- a/static/css/pages/lesson.css
+++ b/static/css/pages/lesson.css
@@ -0,0 +1,95 @@
+#left,
+#output,
+#editor {
+  min-height: 200px;
+  overflow-y: auto;
+  border-bottom: 2px solid var(--color-divider);
+  margin: 0;
+  overflow-wrap: break-word;
+}
+
+#left> :first-child {
+  margin-top: 0;
+}
+
+#editor {
+  position: relative;
+}
+
+@media (min-width: 600px) {
+  #playground {
+    position: fixed;
+    top: var(--navbar-height);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding-top: 0;
+  }
+
+  #left,
+  #right {
+    width: 50vw;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+
+  #left {
+    border-right: 2px solid var(--color-divider);
+  }
+
+  #right {
+    right: 0;
+  }
+
+  #right> :first-child {
+    height: 62%;
+  }
+
+  #right> :last-child {
+    height: 38%;
+  }
+}
+
+#left,
+#output>*,
+#editor .codeflask__flatten {
+  padding: var(--gap);
+}
+
+#output>* {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.error,
+.warning {
+  border-width: var(--gap);
+  border-style: solid;
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.error {
+  border-color: var(--brand-error);
+}
+
+.warning {
+  border-color: var(--brand-warning);
+}
+
+.prev-next {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--gap);
+  gap: 0.5em;
+}
+
+.prev-next span {
+  opacity: 0.5;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/static/css/root.css b/static/css/root.css
new file mode 100644
index 0000000..4bdd8ce
--- /dev/null
+++ b/static/css/root.css
@@ -0,0 +1,185 @@
+/* 
+ * Common page styles
+ *
+ * used by all pages to ensure consistent styling of common elements
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  font-family: var(--font-family-normal);
+  letter-spacing: 0.01em;
+  color: var(--color-text);
+}
+
+.codeflask__textarea,
+pre,
+code {
+  font-weight: normal;
+  letter-spacing: initial;
+}
+
+p code {
+  padding: 1px 2px;
+  color: var(--color-code);
+  background-color: var(--color-background-dim);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-title);
+  font-weight: normal;
+}
+
+a {
+  color: var(--color-link);
+  text-decoration-color: var(--color-link-decoration);
+}
+
+a code {
+  color: inherit;
+}
+
+
+/*
+ * Nav bar & Nav links
+ */
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--navbar-height);
+  min-height: var(--navbar-height);
+  padding: var(--gap);
+  background: var(--color-navbar-background);
+  color: var(--color-navbar-text);
+  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
+}
+
+.navbar .logo {
+  display: flex;
+  align-items: center;
+}
+
+.navbar .logo img {
+  display: inline-block;
+  height: 2em;
+  transform: rotate(-10deg);
+  margin-right: 0.5em;
+}
+
+.navbar a:visited,
+.navbar a {
+  text-decoration: none;
+  color: var(--color-navbar-link);
+}
+
+.navbar .nav-right {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-double);
+}
+
+/*
+ * Theme toggle button
+ */
+
+html.theme-dark .theme-button.-dark {
+  display: none;
+}
+
+html.theme-light .theme-button.-light {
+  display: none;
+}
+
+.theme-button {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+  display: flex;
+  gap: 0.25em;
+  font-size: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.theme-button svg {
+  display: inline-block;
+  fill: currentColor;
+  height: 1em;
+  width: 1em;
+}
+
+/*
+ * utility classes
+ */
+
+/*
+ * dims the background of any element it its applied to
+ */
+
+.dim-bg {
+  position: relative;
+}
+
+.dim-bg * {
+  z-index: 1;
+  position: relative;
+}
+
+.dim-bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: inherit;
+  filter: brightness(0.4) saturate(1.3);
+  z-index: 0;
+  opacity: 0.3;
+}
+
+.theme-light .dim-bg::before {
+  filter: brightness(0.8) saturate(1.3);
+}
+
+/*
+ * highlights an element (usually a link) on hover
+ */
+
+.link {
+  color: var(--color-text-accent);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: background 150ms linear 0s, color 150ms ease-out 0s;
+}
+
+.link:hover {
+  color: var(--color-link);
+  background: var(--color-accent-muted);
+  text-decoration-color: var(--color-accent);
+}
+
+.navbar .link:hover {
+  background: var(--color-accent-light);
+  text-decoration-color: var(--color-accent-hot);
+}
+
+.link.padded,
+.navbar .link {
+  padding: calc(var(--gap-quarter) * 0.5) var(--gap-quarter) 0;
+}
diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index c7468b8..0000000
--- a/static/style.css
+++ /dev/null
@@ -1,266 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-background);
-  font-family: var(--font-family-normal);
-  letter-spacing: 0.01em;
-  color: var(--color-text);
-}
-
-.codeflask__textarea,
-pre,
-code {
-  font-weight: normal;
-  letter-spacing: initial;
-}
-
-p code {
-  padding: 1px 2px;
-  color: var(--color-code);
-  background-color: var(--color-background-dim);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-family-title);
-  font-weight: normal;
-}
-
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--navbar-height);
-  min-height: var(--navbar-height);
-  padding: var(--gap);
-  background: var(--color-navbar-background);
-  color: var(--color-navbar-text);
-  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
-}
-
-a {
-  color: var(--color-link);
-  text-decoration-color: var(--color-link-decoration);
-}
-
-a code {
-  color: inherit;
-}
-
-.navbar .logo {
-  display: flex;
-  align-items: center;
-}
-
-.navbar .logo img {
-  display: inline-block;
-  height: 2em;
-  transform: rotate(-10deg);
-  margin-right: 0.5em;
-}
-
-.navbar a:visited,
-.navbar a {
-  text-decoration: none;
-  color: var(--color-navbar-link);
-}
-
-.navbar .nav-right {
-  display: flex;
-  align-items: center;
-  gap: var(--gap-double);
-}
-
-html.theme-dark .theme-button.-dark {
-  display: none;
-}
-
-html.theme-light .theme-button.-light {
-  display: none;
-}
-
-.theme-button {
-  appearance: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  background: none;
-  color: inherit;
-  display: flex;
-  gap: 0.25em;
-  font-size: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-
-.theme-button svg {
-  display: inline-block;
-  fill: currentColor;
-  height: 1em;
-  width: 1em;
-}
-
-#left,
-#output,
-#editor {
-  min-height: 200px;
-  overflow-y: auto;
-  border-bottom: 2px solid var(--color-divider);
-  margin: 0;
-  overflow-wrap: break-word;
-}
-
-#left > :first-child {
-  margin-top: 0;
-}
-
-#editor {
-  position: relative;
-}
-
-@media (min-width: 600px) {
-  #playground {
-    position: fixed;
-    top: var(--navbar-height);
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding-top: 0;
-  }
-
-  #left,
-  #right {
-    width: 50vw;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-  }
-
-  #left {
-    border-right: 2px solid var(--color-divider);
-  }
-
-  #right {
-    right: 0;
-  }
-
-  #right > :first-child {
-    height: 62%;
-  }
-
-  #right > :last-child {
-    height: 38%;
-  }
-}
-
-#left,
-#output > *,
-#editor .codeflask__flatten {
-  padding: var(--gap);
-}
-
-#output > * {
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-.error,
-.warning {
-  border-width: var(--gap);
-  border-style: solid;
-  border-top: 0;
-  border-bottom: 0;
-}
-
-.error {
-  border-color: var(--brand-error);
-}
-
-.warning {
-  border-color: var(--brand-warning);
-}
-
-.prev-next {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 var(--gap);
-  gap: 0.5em;
-}
-
-.prev-next span {
-  opacity: 0.5;
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-
-/*
- * utility classes
- */
-
-/*
- * dims the background of any element it its applied to
- */
-
-.dim-bg {
-  position: relative;
-}
-
-.dim-bg * {
-  z-index: 1;
-  position: relative;
-}
-
-.dim-bg::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: inherit;
-  filter: brightness(0.4) saturate(1.3);
-  z-index: 0;
-  opacity: 0.3;
-}
-
-.theme-light .dim-bg::before {
-  filter: brightness(0.8) saturate(1.3);
-}
-
-/*
- * highlights an element (usually a link) on hover
- */
-
-.link {
-  color: var(--color-text-accent);
-  text-decoration: underline;
-  text-decoration-color: transparent;
-  transition: background 150ms linear 0s, color 150ms ease-out 0s;
-}
-
-.link:hover {
-  color: var(--color-link);
-  background: var(--color-accent-muted);
-  text-decoration-color: var(--color-accent);
-}
-
-.navbar .link:hover {
-  background: var(--color-accent-light);
-  text-decoration-color: var(--color-accent-hot);
-}
-
-.link.padded,
-.navbar .link {
-  padding: calc(var(--gap-quarter) * 0.5) var(--gap-quarter) 0;
-}
-- 
cgit v1.2.3