Port education styles

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;

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

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";

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