chore: refine dark theme declarations + search ui

package.json

@@ -4,7 +4,7 @@
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
-    "start": "ELEVENTY_PRODUCTION=false eleventy --serve --incremental",
+    "start": "ELEVENTY_PRODUCTION=false eleventy --serve",
     "start:search": "run-s build:11ty index:local",
 		"start:quick": "eleventy --serve --incremental --ignore-initial",
     "build": "ELEVENTY_PRODUCTION=true eleventy && npm run build:index",

src/assets/styles/index.css

@@ -3,19 +3,19 @@ html {
   font-family: var(--font-sans);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
-  color: var(--black);
-  background: var(--white);
+  color: var(--text-color);
+  background: var(--background-color);
   margin: 0;
 }
 
 ::-moz-selection {
-  color: var(--white);
-  background: var(--blue-600);
+  color: var(--text-color-inverted);
+  background: var(--selection-color);
 }
 
 ::selection {
-  color: var(--white);
-  background: var(--blue-600);
+  color: var(--text-color-inverted);
+  background: var(--selection-color);
 }
 
 p {
@@ -31,7 +31,7 @@ blockquote {
 }
 
 :is(body, html, nav .tags, nav .search) svg {
-  stroke: var(--black);
+  stroke: var(--text-color);
 }
 
 :is(h1, h2, h3, h4, h5, h6, .pill--button) > svg {
@@ -41,13 +41,13 @@ blockquote {
 
 /* links */
 a {
-  color: var(--blue-600);
+  color: var(--accent-color);
   transition-property: color;
 }
 
 /* links: custom */
 :is(.main__title, footer nav:last-child) a {
-  color: var(--black);
+  color: var(--text-color);
   text-decoration: none;
 }
 
@@ -57,15 +57,15 @@ a:active,
 :is(.main__title, footer nav:last-child) a:hover,
 :is(.main__title, footer nav:last-child) a:focus,
 :is(.main__title, footer nav:last-child) a:active {
-  color: var(--blue-800);
+  color: var(--accent-color-hover);
 }
 
 a svg {
-  stroke: var(--blue-600);
+  stroke: var(--accent-color);
 }
 
 :is(a:has(svg):hover, a:has(svg):active, a:has(svg):focus) svg {
-  stroke: var(--blue-800);
+  stroke: var(--accent-color-hover);
 }
 
 strong,
@@ -89,9 +89,16 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 900;
 }
 
+h1 { font-size: var(--font-size-3xl) }
+h2 { font-size: var(--font-size-2xl) }
+h3 { font-size: var(--font-size-xl) }
+h4 { font-size: var(--font-size-lg) }
+h5 { font-size: var(--font-size-base) }
+h6 { font-size: var(--font-size-sm) }
+
 hr {
   height: 1px;
-  background-color: var(--gray-200);
+  background-color: var(--gray-light);
   border: 0;
 }
 
@@ -141,12 +148,12 @@ nav svg:focus {
 }
 
 .active {
-  color: var(--blue-600);
+  color: var(--accent-color);
 }
 
 .active svg,
 nav ul li .active svg {
-  stroke: var(--blue-600);
+  stroke: var(--accent-color);
 }
 
 .active:hover svg,
@@ -186,7 +193,7 @@ main {
 /* now */
 .now__topper,
 article {
-  border-bottom: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--gray-light);
   margin-bottom: 2rem;
   padding-bottom: 1rem;
 }
@@ -226,12 +233,13 @@ footer nav:last-child span {
 
 .highlight-text {
   padding: .125rem;
-  background-color: var(--blue-600);
+  background-color: var(--accent-color);
 }
 
 code {
   padding: .125rem;
-  background-color: var(--black);
+  color: var(--text-color-inverted);
+  background-color: var(--background-color-inverted);
 }
 
 /* buttons */
@@ -243,7 +251,7 @@ code {
   margin: 0 .25rem .75rem 0;
   cursor: pointer;
   text-decoration: none;
-  background-color: var(--blue-600);
+  background-color: var(--accent-color);
   transition-property: background-color;
   display: inline-flex;
   flex-direction: row;
@@ -261,7 +269,7 @@ code {
 .pill--button:hover,
 .pill--button:active,
 .pill--button:focus {
-  background-color: var(--blue-800) !important;
+  background-color: var(--accent-color-hover) !important;
 }
 
 .pill--button > svg,
@@ -271,7 +279,7 @@ code {
 .pill--button:hover svg,
 .pill--button:active svg,
 .pill--button:focus svg {
-  stroke: var(--white) !important;
+  stroke: var(--color-lightest) !important;
 }
 
 /* articles */
@@ -316,7 +324,7 @@ li {
 
 /* images */
 .image__banner {
-  border: 1px solid var(--blue-600);
+  border: 1px solid var(--accent-color);
   border-radius: var(--rounded-lg);
   overflow: hidden;
 }
@@ -365,13 +373,12 @@ li {
   flex-direction: column;
 }
 
-code,
 .highlight-text,
 .pill--button,
 .pill--button:hover,
 .pill--button:active,
 .pill--button:focus {
-  color: var(--white);
+  color: var(--color-lightest);
 }
 
 a,
@@ -421,109 +428,4 @@ footer nav {
   footer nav:first-child {
     gap: .75rem;
   }
-}
-
-/* dark theme */
-@media (prefers-color-scheme: dark) {
-  body,
-  html {
-    color: var(--white);
-    background-color: var(--black);
-  }
-
-  ::-moz-selection {
-    background: var(--blue-400);
-  }
-
-  ::selection {
-    background: var(--blue-400);
-  }
-
-  :is(body, html, nav .tags, nav .search) svg {
-    stroke: var(--white);
-  }
-
-  a {
-    color: var(--blue-400);
-  }
-
-  a svg {
-    stroke: var(--blue-400);
-  }
-
-  .active {
-    color: var(--blue-400);
-  }
-
-  .active svg,
-  nav ul li .active svg {
-    stroke: var(--blue-400);
-  }
-
-  :is(.main__title, footer nav:last-child) a {
-    color: var(--white);
-  }
-
-  a:hover,
-  a:focus,
-  a:active,
-  :is(.main__title, footer nav:last-child) a:hover,
-  :is(.main__title, footer nav:last-child) a:focus,
-  :is(.main__title, footer nav:last-child) a:active {
-    color: var(--blue-200);
-  }
-
-  a:has(svg):hover svg,
-  a:has(svg):active svg,
-  a:has(svg):focus svg {
-    stroke: var(--blue-200);
-  }
-
-  hr {
-    background-color: var(--gray-900);
-  }
-
-  .now__topper,
-  article {
-    border-color: var(--gray-900)
-  }
-
-  code {
-    color: var(--black);
-    background-color: var(--white);
-  }
-
-  /* nav */
-  nav .brand-github svg {
-    stroke: var(--brand-github-light) !important;
-  }
-
-  a:has(svg):hover svg {
-    stroke: var(--blue-200);
-  }
-
-  .active {
-    color: var(--blue-400);
-  }
-
-  .active:has(svg) {
-    stroke: var(--blue-400)
-  }
-
-  /* buttons */
-  .pill--button:hover,
-  .pill--button:active,
-  .pill--button:focus {
-    background-color: var(--blue-200);
-  }
-
-  /* images */
-  .image__banner {
-    border-color: var(--blue-400);
-  }
-
-  .highlight-text,
-  .pill--button {
-    background-color: var(--blue-400);
-  }
 }

src/assets/styles/pages/about.css

@@ -6,11 +6,11 @@
 .avatar__wrapper .avatar__wrapper--interior {
   width: 16rem;
   height: 16rem;
-  border: 1px solid var(--blue-600);
+  border: 1px solid var(--accent-color);
   border-radius: var(--rounded-full);
   display: flex;
   padding: 1rem;
-  background-color: var(--white);
+  background-color: var(--color-lightest);
 }
 
 .avatar__wrapper,

src/assets/styles/partials/vars.css

@@ -27,8 +27,19 @@
   --white: #fff;
   --black: #000;
 
+  /* theme */
+  --color-lightest: var(--white);
+  --color-darkest: var(--black);
+  --text-color: var(--color-darkest);
+  --background-color: var(--color-lightest);
+  --text-color-inverted: var(--color-lightest);
+  --background-color-inverted: var(--color-darkest);
+  --accent-color: var(--blue-600);
+  --accent-color-hover: var(--blue-800);
+  --selection-color: var(--accent-color);
+  --gray-light: var(--gray-200);
+
   --brand-github: #333;
-  --brand-github-light: #f5f5f5;
   --brand-proton: #6d4aff;
   --brand-mastodon: #6364ff;
   --brand-lastfm: #d51007;
@@ -81,6 +92,20 @@
   --stroke-width-bold: 2;
 }
 
+/* dark theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: var(--white);
+    --background-color: var(--black);
+    --text-color-inverted: var(--black);
+    --background-color-inverted: var(--white);
+    --accent-color: var(--blue-400);
+    --accent-color-hover: var(--blue-200);
+    --gray-light: var(--gray-900);
+    --brand-github: #f5f5f5;
+  }
+}
+
 @media (prefers-reduced-motion) {
   :root {
     --transition-duration-default: 0.01ms;

src/assets/styles/widgets/forms.css

@@ -2,15 +2,19 @@ input[type="text"],
 input[type="email"],
 input[type="search"],
 textarea {
-  color: var(--black);
-  background-color: var(--white);
-  width: 100%;
-  border: 1px solid var(--blue-600);
+  /* necessary for pagefind overrides */
+  font-family: var(--font-sans) !important;
+  color: var(--text-color) !important;
+  background-color: var(--background-color) !important;
+  border: 1px solid var(--accent-color) !important;
+  padding: .5rem !important;
+  font-size: var(--font-size-base) !important;
+  width: 100% !important;
+  /* necessary for pagefind overrides */
+
   outline: none;
-  padding: .5rem;
   margin-bottom: 1.5rem;
   font-weight: 400 !important;
-  font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   transition-property: border-color;
   transition-timing-function: var(--transition-ease-in-out);
@@ -21,15 +25,5 @@ input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="search"],
 textarea:focus {
-  border: 1px solid var(--blue-800);
-}
-
-@media (prefers-color-scheme: dark) {
-  input[type="text"],
-  input[type="email"],
-  input[type="search"],
-  textarea {
-    color: var(--white);
-    background-color: var(--black);
-  }
+  border: 1px solid var(--accent-color-hover) !important;
 }

src/assets/styles/widgets/media-grid.css

@@ -24,7 +24,7 @@
   position: relative;
   height: 100%;
   width: 100%;
-  border: 1px solid var(--blue-600);
+  border: 1px solid var(--accent-color);
   border-radius: var(--rounded-lg);
   overflow: hidden;
   transition-property: border-color;
@@ -32,8 +32,10 @@
   transition-duration: 300ms;
 }
 
-.media__grid .item__wrapper:hover {
-  border-color: var(--blue-800)
+.media__grid .item__wrapper:hover,
+.media__grid .item__wrapper:focus,
+.media__grid .item__wrapper:active {
+  border-color: var(--accent-color-hover)
 }
 
 .media__grid .item__cover {
@@ -58,7 +60,7 @@
 
 .media__grid .item__meta-text .header,
 .media__grid .item__meta-text .subheader {
-  color: var(--white);
+  color: var(--color-lightest);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
   text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
@@ -82,16 +84,4 @@
   .media__grid.vertical .item__wrapper {
     max-width: 121px;
   }
-}
-
-@media (prefers-color-scheme: dark) {
-  .media__grid .item__wrapper {
-    border-color: var(--blue-400);
-  }
-
-  .media__grid .item__wrapper:hover,
-  .media__grid .item__wrapper:focus,
-  .media__grid .item__wrapper:active {
-    border-color: var(--blue-200);
-  }
 }

src/assets/styles/widgets/pagefind.css

@@ -1,9 +1,9 @@
-body {
-  --pagefind-ui-primary: var(--blue-600);
-  --pagefind-ui-text: var(--black);
-  --pagefind-ui-background: var(--white);
-  --pagefind-ui-border: var(--gray-200);
-  --pagefind-ui-tag: var(--gray-200);
+.pagefind-ui {
+  --pagefind-ui-primary: var(--accent-color);
+  --pagefind-ui-text: var(--text-color);
+  --pagefind-ui-background: var(--color-lightest);
+  --pagefind-ui-border: var(--gray-light);
+  --pagefind-ui-tag: var(--gray-light);
   --pagefind-ui-border-width: 1px;
   --pagefind-ui-border-radius: 0;
   --pagefind-ui-image-border-radius: 0;
@@ -11,12 +11,76 @@ body {
   --pagefind-ui-font: var(--font-sans);
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    --pagefind-ui-primary: var(--blue-400);
-    --pagefind-ui-text: var(--white);
-    --pagefind-ui-background: var(--black);
-    --pagefind-ui-border: var(--gray-900);
-    --pagefind-ui-tag: var(--gray-900);
-  }
+.pagefind-ui,
+.pagefind-ui__filter-name,
+.pagefind-ui__filter-label,
+.pagefind-ui__result-excerpt,
+.pagefind-ui__message,
+.pagefind-ui__button {
+  font-size: var(--font-size-base) !important;
+}
+
+.pagefind-ui__result-title {
+  color: var(--accent-color);
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-2xl);
+  font-weight: 900;
+  text-decoration: none;
+  margin: 0;
+  transition-property: color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+.pagefind-ui__result-title:hover,
+.pagefind-ui__result-title:focus,
+.pagefind-ui__result-title:active {
+  color: var(--accent-color-hover);
+}
+
+:is(input[type="text"], input[type="search"]).pagefind-ui__search-input {
+  padding-left: 2.375rem !important;
+}
+
+.pagefind-ui__search-clear {
+  color: var(--text-color);
+  background-color: transparent !important;
+}
+
+.pagefind-ui__result-title {
+  margin-bottom: .25rem !important;
+}
+
+.pagefind-ui__result-link {
+  font-size: var(--font-size-2xl) !important;
+  color: var(--accent-color) !important;
+  text-decoration: none !important;
+}
+
+.pagefind-ui__result-link:hover,
+.pagefind-ui__result-link:focus,
+.pagefind-ui__result-link:active {
+  color: var(--accent-color-hover) !important;
+}
+
+.pagefind-ui__button {
+  color: var(--color-lightest) !important;
+  line-height: var(--line-height-base);
+  border-radius: var(--rounded-full) !important;
+  padding: .5rem 1rem !important;
+  margin: 0 .25rem .75rem 0;
+  cursor: pointer !important;
+  height: unset !important;
+  text-decoration: none;
+  background-color: var(--accent-color) !important;
+  transition-property: background-color;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+.pagefind-ui__button:hover,
+.pagefind-ui__button:active,
+.pagefind-ui__button:focus {
+  color: var(--color-lightest) !important;
+  background-color: var(--accent-color-hover) !important;
 }

src/assets/styles/widgets/paginator.css

@@ -9,22 +9,12 @@
 }
 
 .pagination button > svg {
-  stroke: var(--blue-600);
+  stroke: var(--accent-color);
   cursor: pointer;
 }
 
 .pagination button.disabled > svg {
   cursor: not-allowed;
-  stroke: color-mix(in srgb, var(--black), transparent 50%);
+  stroke: color-mix(in srgb, var(--text-color), transparent 50%);
   stroke-width: var(--stroke-width-default);
-}
-
-@media (prefers-color-scheme: dark) {
-  .pagination button > svg {
-    stroke: var(--blue-400);
-  }
-
-  .pagination button.disabled > svg {
-    stroke: var(--white);
-  }
 }

src/assets/styles/widgets/post-graph.css

@@ -11,7 +11,7 @@
 }
 
 .post-graph__progress {
-  background-color: var(--blue-600);
+  background-color: var(--accent-color);
   height: 100%;
 }
 
@@ -22,10 +22,4 @@
 .post-graph__progress,
 .post-graph__data {
   margin-left: .625rem;
-}
-
-@media (prefers-color-scheme: dark) {
-  .post-graph__progress {
-    background-color: var(--blue-400);
-  }
 }

src/assets/styles/widgets/progress-bar.css

@@ -9,11 +9,5 @@
 }
 
 .progress-bar {
-  background-color: var(--blue-600);
-}
-
-@media (prefers-color-scheme: dark) {
-  .progress-bar {
-    background-color: var(--blue-400);
-  }
+  background-color: var(--accent-color);
 }

src/assets/styles/widgets/webmentions.css

@@ -1,6 +1,6 @@
 .webmentions {
-  border-top: 1px solid var(--gray-200);
-  border-bottom: 1px solid var(--gray-200);
+  border-top: 1px solid var(--gray-light);
+  border-bottom: 1px solid var(--gray-light);
   margin-top: 1.5rem;
   margin-bottom: 3.25rem;
   padding-top: 1rem;
@@ -31,8 +31,12 @@
 }
 
 .webmentions .interaction .avatar__wrapper:hover,
-.webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
-  border-color: var(--blue-800);
+.webmentions .interaction .avatar__wrapper:focus,
+.webmentions .interaction .avatar__wrapper:active,
+.webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
+.webmentions .interaction .comment__wrapper:focus .avatar__wrapper
+.webmentions .interaction .comment__wrapper:active .avatar__wrapper {
+  border-color: var(--accent-color-hover);
 }
 
 .webmentions .interaction .comment__wrapper--interior {
@@ -44,7 +48,7 @@
 }
 
 .webmentions .interaction .comment__wrapper--interior .comment a {
-  color: var(--black);
+  color: var(--text-color);
   text-decoration: none;
 }
 
@@ -75,13 +79,13 @@
 }
 
 .webmentions .interaction .avatar__wrapper {
-  background-color: var(--black);
+  border: 4px solid var(--background-color);
+  background-color: var(--background-color-inverted);
   width: 3.5rem;
   height: 3.5rem;
   margin-bottom: 0;
   overflow: hidden;
   border-radius: var(--rounded-full);
-  border: 4px solid var(--white);
   transition-property: border-color;
   transition-timing-function: var(--transition-ease-in-out);
   transition-duration: var(--transition-duration-default);
@@ -106,28 +110,4 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-}
-
-@media (prefers-color-scheme: dark) {
-  .webmentions .interaction .comment__wrapper--interior .comment a {
-    color: var(--white);
-  }
-
-  .webmentions {
-    border-color: var(--gray-900);
-  }
-
-  .webmentions .interaction .avatar__wrapper {
-    background-color: var(--white);
-    border-color: var(--black);
-  }
-
-  .webmentions .interaction .avatar__wrapper:hover,
-  .webmentions .interaction .avatar__wrapper:focus,
-  .webmentions .interaction .avatar__wrapper:active,
-  .webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
-  .webmentions .interaction .comment__wrapper:focus .avatar__wrapper
-  .webmentions .interaction .comment__wrapper:active .avatar__wrapper {
-    border-color: var(--blue-200);
-  }
 }

src/pages/search.html

@@ -5,8 +5,8 @@ layout: default
 permalink: /search.html
 ---
 {% capture css %}
-  {% render "../assets/styles/widgets/pagefind.css" %}
-  {% render "../assets/styles/widgets/forms.css" %}
+{% render "../assets/styles/widgets/forms.css" %}
+{% render "../assets/styles/widgets/pagefind.css" %}
 {% endcapture %}
 <style>
   {{ css | cssmin }}