From 379ad520deb18bdc5a29186021600dbac946cbe1 Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Mon, 13 May 2024 17:43:39 -0500
Subject: [PATCH] Port education styles

---
 public/style.css                              | 32 +++++++++++++++++++
 .../scss/{_education.scss => education.css}   | 16 +++++-----
 src/rawdata/scss/style.css                    |  1 +
 todo-styles.md                                |  4 ++-
 4 files changed, 44 insertions(+), 9 deletions(-)
 rename src/rawdata/scss/{_education.scss => education.css} (62%)

diff --git a/public/style.css b/public/style.css
index 0ddc191..40614d2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -7816,6 +7816,38 @@ code,
   }
 }
 
+/* src/rawdata/scss/education.css */
+.edu-course.highlight {
+  border-left: 0.25rem solid black;
+  border-color: var(--link-color);
+  background-color: var(--theme-color-dimmest);
+}
+.edu-course .edu-article.coming-soon {
+  color: var(--dimmer-color);
+  font-style: italic;
+}
+.edu-course .edu-article::after {
+  --height: 10rem;
+  content: "";
+  position: absolute;
+  width: 1rem;
+  height: var(--height);
+  border-width: 0 0 1px 1px;
+  border-style: solid;
+  border-color: var(--dimmest-color);
+  left: -1.5rem;
+  top: calc(1rem - var(--height));
+  border-bottom-left-radius: 0.5rem;
+}
+.edu-topic img {
+  width: 100%;
+  height: 14rem;
+  object-fit: cover;
+}
+.edu-article .note {
+  color: red;
+}
+
 /* src/rawdata/scss/forum.css */
 .thread-list-item .latestpost {
   width: 16.5rem;
diff --git a/src/rawdata/scss/_education.scss b/src/rawdata/scss/education.css
similarity index 62%
rename from src/rawdata/scss/_education.scss
rename to src/rawdata/scss/education.css
index 35e59fd..6e0b3e3 100644
--- a/src/rawdata/scss/_education.scss
+++ b/src/rawdata/scss/education.css
@@ -1,26 +1,26 @@
 .edu-course {
     &.highlight {
         border-left: 0.25rem solid black;
-        @include usevar(border-color, link-color);
-        @include usevar(background-color, theme-color-dimmest);
+        border-color: var(--link-color);
+        background-color: var(--theme-color-dimmest);
     }
 
     .edu-article.coming-soon {
-        @extend .c--dimmer;
+        color: var(--dimmer-color);
         font-style: italic;
     }
 
     .edu-article::after {
-        $height: 10rem;
+        --height: 10rem;
         content: '';
         position: absolute;
         width: 1rem;
-        height: $height;
+        height: var(--height);
         border-width: 0 0 1px 1px;
         border-style: solid;
-        @include usevar(border-color, dimmest-color);
+        border-color: var(--dimmest-color);
         left: -1.5rem;
-        top: 1rem - $height;
+        top: calc(1rem - var(--height));
         border-bottom-left-radius: 0.5rem;
     }
 }
@@ -37,4 +37,4 @@
     .note {
         color: red;
     }
-}
+}
\ No newline at end of file
diff --git a/src/rawdata/scss/style.css b/src/rawdata/scss/style.css
index 3e45fb5..8828e3d 100644
--- a/src/rawdata/scss/style.css
+++ b/src/rawdata/scss/style.css
@@ -5,6 +5,7 @@
 
 @import "carousel.css";
 @import "editor.css";
+@import "education.css";
 @import "forum.css";
 @import "header.css";
 @import "icons.css";
diff --git a/todo-styles.md b/todo-styles.md
index 1e44754..06f4d8f 100644
--- a/todo-styles.md
+++ b/todo-styles.md
@@ -3,7 +3,9 @@
 ## How to build
 
 ```
-esbuild src\rawdata\scss\style.css --bundle --outdir=public --target=chrome109,firefox109,safari12
+esbuild src\rawdata\scss\style.css --bundle --loader:.ttf=file --outdir=public --target=chrome109,firefox109,safari12
+
+nodemon --exec "esbuild src\rawdata\scss\style.css --bundle --loader:.ttf=file --outdir=public --target=chrome109,firefox109,safari12" src\rawdata\scss\style.css --ignore public
 ```
 
 ## TODO