chore: seperate common page styles from lesson page styles

1 files changed, 185 insertions, 0 deletions

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