design work. explained in the note.

assets/new.scss

@@ -2,45 +2,62 @@
 ---
 
 :root {
-  /* Light Mode */
-  --backgroundColor: #EFF1F5; /* froth */
-  --textColor: #4C4F69; /* text */
-  --secondaryTextColor: #565A6E; /* overlay2 */
-  --mutedTextColor: #727585; /* overlay1 */
-  --subtleBackgroundColor: #E6E9EF; /* surface2 */
-  --heartedBackgroundColor: #F5E0DC; /* peach */
-  --selectionBackgroundColor: #A6E3A1; /* green */
-  --linkColor: #89B4FA; /* blue */
-  --borderColor: #D9E0EE; /* crust */
-  --hrColor: #ABAEC6; /* mantle */
-  --activeColor: #F28FAD; /* pink */
-  --langBackgroundColor: #DCE0EA; /* surface1 */
+  /* Light Mode - Everforest Theme */
+  --backgroundColor: #fdf6e3; /* background */
+  --textColor: #5c6a72; /* foreground */
+  --secondaryTextColor: #7c8377; /* gray2 */
+  --mutedTextColor: #9da9a0; /* gray1 */
+  --subtleBackgroundColor: #f3ece5; /* surface */
+  --heartedBackgroundColor: #e67e80; /* red */
+  --selectionBackgroundColor: #a7c080; /* green */
+  --linkColor: #7fbbb3; /* aqua */
+  --borderColor: #dfc7a1; /* light yellow */
+  --hrColor: #a9b1a1; /* gray3 */
+  --activeColor: #d699b6; /* pink */
+  --langBackgroundColor: #eee8d5; /* surface1 */
   --langShadowColor: transparent;
-  --logoColor: #B8C0E0; /* lavender */
-  --photoBackground: #E9ECF2; /* surface0 */
+  --logoColor: #a7c080; /* green */
+  --photoBackground: #e9e8d5; /* surface0 */
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    /* Dark Mode */
-    --backgroundColor: #1E1E2E; /* base */
-    --textColor: #CDD6F4; /* text */
-    --secondaryTextColor: #A6ADC8; /* overlay2 */
-    --mutedTextColor: #88909F; /* overlay1 */
-    --subtleBackgroundColor: #313244; /* surface2 */
-    --heartedBackgroundColor: #913C3C; /* red */
-    --selectionBackgroundColor: #223249; /* blue darker */
-    --linkColor: #89B4FA; /* blue */
-    --borderColor: #414559; /* crust */
-    --hrColor: #4C4F69; /* mantle */
-    --activeColor: #ABE9B3; /* green */
-    --langBackgroundColor: #2A2A3C; /* surface1 */
+    /* Dark Mode - Everforest Theme */
+    --backgroundColor: #2b3339; /* background */
+    --textColor: #d3c6aa; /* foreground */
+    --secondaryTextColor: #a7c080; /* green */
+    --mutedTextColor: #868d80; /* gray2 */
+    --subtleBackgroundColor: #404a51; /* surface */
+    --heartedBackgroundColor: #e67e80; /* red */
+    --selectionBackgroundColor: #3a494e; /* dark green */
+    --linkColor: #83c092; /* aqua */
+    --borderColor: #454e58; /* dark yellow */
+    --hrColor: #5c6a72; /* gray3 */
+    --activeColor: #d699b6; /* pink */
+    --langBackgroundColor: #323c41; /* surface1 */
     --langShadowColor: #00000033;
-    --logoColor: #6E6C7E; /* lavender darker */
-    --photoBackground: #24273A; /* surface0 */
+    --logoColor: #83c092; /* green */
+    --photoBackground: #2f383e; /* surface0 */
   }
 }
 
+@font-face {
+  font-family: "Departure Mono";
+  src: url('fonts/DepartureMono-Regular.eot');
+  src: url('fonts/DepartureMono-Regular.eot') format('embedded-opentype'),
+       url('fonts/DepartureMono-Regular.woff2') format('woff2'),
+       url('fonts/DepartureMono-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url('fonts/BerkeleyMono-Regular.otf');
+  src: url('fonts/BerkeleyMono-Regular.otf') format('opentype'),
+       url('fonts/BerkeleyMono-Regular.woff') format('woff'),
+       url('fonts/BerkeleyMono-Regular.woff2') format('woff2'),
+       url('fonts/BerkeleyMono-Regular.ttf') format('truetype');
+}
+
 body {
   background: var(--backgroundColor);
   color: var(--textColor);
@@ -52,7 +69,7 @@ body {
 }
 
 body, kbd {
-  font-family: system-ui, sans-serif;
+  font-family: "Berkeley Mono", system-ui, sans-serif;
 }
 
 a {
@@ -80,11 +97,12 @@ footer {
 }
 
 h1, h2, h3, h4, h5, h6, .font {
-  font-family: 'Readex Pro', sans-serif;
+  font-family: 'Berkeley Mono', sans-serif;
 }
 
 .plain {
-  font-family: system-ui, sans-serif
+  // font-family: system-ui, sans-serif
+  font-family: 'Berkeley Mono', sans-serif;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -256,7 +274,8 @@ hr {
 }
 
 article {
-  font-family: system-ui, sans-serif;
+  //font-family: system-ui, sans-serif;
+  font-family: 'Berkeley Mono', sans-serif;
   font-size: 1em;
 }