10 files changed, 260 insertions, 6 deletions

diff --git a/blog/2024-04-05/FontFeaturesToggle.tsx b/blog/2024-04-05/FontFeaturesToggle.tsx
index 9424748..470ec35 100644
--- a/blog/2024-04-05/FontFeaturesToggle.tsx
+++ b/blog/2024-04-05/FontFeaturesToggle.tsx
@@ -42,7 +42,7 @@ function FontFeatureToggle({
           id={id}
           checked={value}
           disabled={setValue === undefined}
-          onClick={toggle}
+          onChange={toggle}
         />{' '}
       </div>
       <div onClick={toggle} className={styles.number}>
diff --git a/src/components/landing/Elsewhere.module.css b/src/components/landing/Elsewhere.module.css
index 0697b12..8233cee 100644
--- a/src/components/landing/Elsewhere.module.css
+++ b/src/components/landing/Elsewhere.module.css
@@ -46,3 +46,12 @@
   width: 1.75rem;
   height: 1.75rem;
 }
+
+@media (forced-colors: active) {
+  .elsewhere__icon:hover,
+  .elseshere__icon:focus {
+    color: HighlightText;
+    background: Highlight;
+    transition: none;
+  }
+}
diff --git a/src/components/landing/Section.module.css b/src/components/landing/Section.module.css
index 3f2bbdc..666254e 100644
--- a/src/components/landing/Section.module.css
+++ b/src/components/landing/Section.module.css
@@ -36,3 +36,9 @@
   background: var(--ifm-color-primary);
   transform: skew(-30deg, 0);
 }
+
+@media (forced-colors: active) {
+  .section__title::after {
+    background: CanvasText;
+  }
+}
diff --git a/src/components/landing/sections/Contact.module.css b/src/components/landing/sections/Contact.module.css
index 7b64a5e..d93488f 100644
--- a/src/components/landing/sections/Contact.module.css
+++ b/src/components/landing/sections/Contact.module.css
@@ -143,8 +143,10 @@
 }
 
 .small__icon {
-  height: 1.5rem;
-  width: 1.5rem;
+  height: 2rem;
+  width: 2rem;
+  padding: 0.25rem;
+  margin: -0.25rem;
 }
 
 .photo__container {
@@ -180,3 +182,35 @@
     transform: none !important;
   }
 }
+
+@media (forced-colors: active) {
+  .contact__icon-holder {
+    border: 2px solid ButtonBorder;
+    background: ButtonFace;
+    transition: none;
+  }
+
+  .contact__icon {
+    color: ButtonText;
+    transition: none;
+  }
+
+  .contact:not(:has(.contact__action:hover)):hover .contact__icon-holder,
+  .contact:focus-within:not(:has(.contact__action:focus)) .contact__icon-holder,
+  .contact:has(.contact__action--alternate:hover) .contact__icon-holder,
+  .contact:has(.contact__action--alternate:focus) .contact__icon-holder {
+    background: Highlight;
+  }
+
+  .contact:not(:has(.contact__action:hover)):hover .contact__icon,
+  .contact:focus-within:not(:has(.contact__action:focus)) .contact__icon,
+  .contact__icon--alternate {
+    color: HighlightText;
+  }
+
+  .small__link:hover .small__icon,
+  .small__link:focus .small__icon {
+    background: Highlight;
+    color: HighlightText;
+  }
+}
diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css
index 01a5b7b..d8aa99a 100644
--- a/src/components/landing/sections/Hero.module.css
+++ b/src/components/landing/sections/Hero.module.css
@@ -112,3 +112,16 @@
   width: 2rem;
   height: 2rem;
 }
+
+@media (forced-colors: active) {
+  .avatar__holder {
+    border: 2px solid CanvasText;
+  }
+
+  .contacts__icon:hover,
+  .contacts__icon:focus {
+    color: HighlightText;
+    background: Highlight;
+    transition: none;
+  }
+}
diff --git a/src/components/landing/sections/Resume.module.css b/src/components/landing/sections/Resume.module.css
index fee62b5..5974ca9 100644
--- a/src/components/landing/sections/Resume.module.css
+++ b/src/components/landing/sections/Resume.module.css
@@ -166,3 +166,17 @@
 .thesis-links__link {
   font-size: 0.875rem;
 }
+
+@media (forced-colors: active) {
+  .cv::before {
+    background: CanvasText;
+  }
+
+  .cv__item::before {
+    border-color: CanvasText;
+  }
+
+  .cv__time::before {
+    border: 1px solid CanvasText;
+  }
+}
diff --git a/src/components/landing/sections/Software.module.css b/src/components/landing/sections/Software.module.css
index 5287bc8..7bbeef2 100644
--- a/src/components/landing/sections/Software.module.css
+++ b/src/components/landing/sections/Software.module.css
@@ -399,3 +399,51 @@
     transform: none !important;
   }
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .overlay {
+    background: #ebedf0;
+  }
+
+  [data-theme='dark'] .overlay {
+    background: #21252b;
+  }
+}
+
+@media (forced-colors: active) {
+  .software {
+    border: 2px solid ButtonBorder;
+    background: Canvas;
+  }
+
+  .overlay {
+    background: Canvas !important;
+  }
+
+  .ferdium__icon {
+    border: 2px solid ButtonBorder;
+    background: ButtonFace;
+  }
+
+  .ferdium__icon::after {
+    display: none;
+  }
+
+  .software--ferdium:hover .ferdium__icon,
+  .software--ferdium:focus-within .ferdium__icon {
+    background: Highlight;
+  }
+
+  .ferdium__logo path {
+    fill: ButtonText !important;
+  }
+
+  .software--ferdium:hover .ferdium__logo path,
+  .software--ferdium:focus-within .ferdium__logo path {
+    fill: HighlightText !important;
+  }
+
+  .refinery__logo :global(.refinery-a) {
+    fill: #000;
+  }
+}
diff --git a/src/components/landing/sections/Software.tsx b/src/components/landing/sections/Software.tsx
index 34178cc..7897177 100644
--- a/src/components/landing/sections/Software.tsx
+++ b/src/components/landing/sections/Software.tsx
@@ -31,9 +31,8 @@ function ScreenshotImage() {
   // https://github.com/facebook/docusaurus/blob/e012e0315862b2ca02cad40c58d11d31c319ff75/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx#L32-L36
   const isBrowser = useIsBrowser();
   const { colorMode } = useColorMode();
-  const refineryScreenshot = colorMode === 'dark'
-    ? refineryScreenshotLight
-    : refineryScreenshotDark;
+  const refineryScreenshot =
+    colorMode === 'dark' ? refineryScreenshotLight : refineryScreenshotDark;
 
   const screenshot = (
     <img
diff --git a/src/css/custom.css b/src/css/custom.css
index 29a89b5..3c2ce81 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -139,3 +139,121 @@ h3,
 .katex-display {
   overflow-y: auto;
 }
+
+@media (forced-colors: active) {
+  .navbar,
+  .hero {
+    border-bottom: 2px solid CanvasText;
+  }
+
+  .footer {
+    border-top: 2px solid CanvasText;
+  }
+
+  .button {
+    forced-color-adjust: none;
+    border-width: 2px;
+    --ifm-button-background-color: ButtonFace !important;
+    --ifm-button-border-color: ButtonBorder !important;
+    color: ButtonText !important;
+    transition: none;
+  }
+
+  .button:hover,
+  .button:focus {
+    --ifm-button-background-color: Highlight !important;
+    color: HighlightText !important;
+  }
+
+  .dropdown > .navbar__link:after {
+    border-right-color: Canvas;
+    border-left-color: Canvas;
+  }
+
+  .dropdown__menu {
+    border: 2px solid CanvasText;
+  }
+
+  .navbar__link:hover,
+  .navbar__link:focus,
+  .dropdown__link:hover,
+  .dropdown__link:focus,
+  .menu__link:hover,
+  .menu__link:focus {
+    text-decoration: underline;
+  }
+
+  .navbar-sidebar {
+    outline: 1rem solid CanvasText;
+  }
+
+  .navbar-sidebar__backdrop {
+    display: none;
+  }
+
+  .menu__link--sublist-caret::after {
+    background: Canvas;
+    height: 0;
+    width: 0;
+    min-width: 0;
+    border: 0.5rem solid Canvas;
+    border-bottom-color: CanvasText;
+    filter: none;
+    transform: rotate(180deg) scale(150%) translatey(-0.25rem);
+  }
+
+  .menu__list-item--collapsed .menu__link--sublist-caret::after {
+    transform: rotate(90deg) scale(150%) translatey(-0.25rem);
+  }
+
+  .navbar-sidebar__close * {
+    stroke: CanvasText !important;
+    stroke-width: 2px !important;
+  }
+
+  .menu__list-item {
+    border: 2px solid Canvas;
+  }
+
+  .menu__list-item:has(.menu__link--sublist-caret) {
+    border-color: CanvasText;
+  }
+
+  .theme-admonition,
+  .theme-code-block,
+  .markdown details {
+    border: 2px solid CanvasText;
+  }
+
+  .theme-admonition svg * {
+    fill: CanvasText !important;
+  }
+
+  .markdown summary::before {
+    border-top-color: Canvas !important;
+    border-right-color: Canvas !important;
+    border-bottom-color: Canvas !important;
+  }
+
+  .table-of-contents__link:hover,
+  .table-of-contents__link:focus {
+    text-decoration: underline;
+  }
+
+  .tabs__item[aria-selected='false'] {
+    border-color: Canvas;
+  }
+
+  .menu__link--active, .dropdown__link--active {
+    border-radius: 0;
+  }
+
+  .menu__link--active, .navbar__link--active, .dropdown__link--active, .table-of-contents__link--active,
+  .menu__link--active *, .navbar__link--active *, .dropdown__link--active *, .table-of-contents__link--active * {
+    forced-color-adjust: none;
+    color: HighlightText !important;
+    border-color: HighlightText !important;
+    background: Highlight !important;
+    transition: none;
+  }
+}
diff --git a/src/theme/BlogSidebar/Desktop.module.css b/src/theme/BlogSidebar/Desktop.module.css
index 62d2b66..d30ba4d 100644
--- a/src/theme/BlogSidebar/Desktop.module.css
+++ b/src/theme/BlogSidebar/Desktop.module.css
@@ -56,3 +56,16 @@
   margin-top: 1.6rem;
   margin-bottom: 0.4rem;
 }
+
+@media (forced-colors: active) {
+  .sidebarItemLink:hover {
+    text-decoration: underline;
+  }
+
+  .sidebarItemLinkActive, .sidebarItemLinkActive * {
+    forced-color-adjust: none;
+    color: HighlightText !important;
+    border-color: HighlightText !important;
+    background: Highlight !important;
+  }
+}