From a0cbd61c0c5791b5258286c3e409c3e278aeb409 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Wed, 20 Nov 2024 11:30:14 -0600
Subject: [PATCH] refactor: Reimplement basic styles

---
 assets/styles/millironx.css     | 121 ++++++++++++++++++++++++++++++++
 content/_index.html             |  24 +++----
 layouts/shortcodes/imgproc.html |   4 +-
 3 files changed, 134 insertions(+), 15 deletions(-)

diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index d4682bb..fba1a0f 100644
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@@ -17,6 +17,7 @@
   --buffalo-blue: #0b496a;
   --saddle-blue: #104165;
   --brown-swiss-gray: #eaddca;
+  --lavender-purple: #d9c1f6;
 
   /*
     Fonts
@@ -37,6 +38,10 @@ html {
   font-family: var(--font-family-slab-serif);
 }
 
+a {
+  color: light-dark(var(--saddle-blue), var(--lavender-purple));
+}
+
 header {
   display: flex;
   justify-content: space-evenly;
@@ -52,6 +57,70 @@ nav {
   top: 0;
 }
 
+nav a {
+  color: light-dark(var(--brown-swiss-gray), var(--manhattan-steel-blue));
+  background-color: light-dark(
+    var(--manhattan-steel-blue),
+    var(--brown-swiss-gray)
+  );
+  border-radius: 0.05rem;
+  border-style: outset;
+  border-width: 0.2rem;
+  border-color: light-dark(
+    var(--manhattan-steel-blue),
+    var(--brown-swiss-gray)
+  );
+  min-width: 7.5rem;
+  max-width: 7.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0.2rem;
+  text-decoration: none;
+  padding: 0 0.2rem;
+  font-family: var(--font-family-system-ui);
+}
+
+nav a:active {
+  border-style: inset;
+}
+
+nav a:hover {
+  background-color: light-dark(
+    var(--buffalo-blue),
+    color-mix(in srgb, var(--prickly-pear-yellow), var(--brown-swiss-gray) 75%)
+  );
+}
+
+figure {
+  border-color: light-dark(var(--eclipse-gray), var(--brown-swiss-gray));
+  border-width: 1.5pt;
+  border-style: inset;
+  padding: 1.25pt;
+}
+
+blockquote {
+  background: linear-gradient(
+    to right,
+    light-dark(lightgray, dimgray),
+    color-mix(
+      in srgb,
+      light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
+      white 25%
+    )
+  );
+  border-left: 5px solid black;
+  padding-left: 6px;
+}
+
+blockquote small::before {
+  content: "\2014 \00A0";
+}
+
+blockquote small {
+  font-size: 80%;
+}
+
 /*
   Container-type helper classes
 */
@@ -61,6 +130,45 @@ nav {
   width: 100%;
 }
 
+/*
+  Helper classes
+*/
+.font-small-caps {
+  font-variant-caps: small-caps;
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.float-left {
+  float: none;
+  max-width: 100%;
+}
+
+.float-right {
+  float: none;
+  max-width: 100%;
+}
+
+/*
+  Application-state helper classes
+*/
+@media (prefers-color-scheme: light) {
+  .active {
+    background-color: var(--coeurdalene-purple);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .active {
+    color: color-mix(in srgb, var(--manhattan-steel-blue), white 75%);
+    background-color: color-mix(in srgb, var(--brown-swiss-gray), black 75%);
+    border-color: color-mix(in srgb, var(--brown-swiss-gray), black 50%);
+  }
+}
+
 /*
   Desktop screen size adjustments
 */
@@ -93,4 +201,17 @@ nav {
   .row {
     flex-direction: row;
   }
+
+  /*
+    Helper classes
+  */
+  .float-left {
+    float: left;
+    max-width: 50%;
+  }
+
+  .float-right {
+    float: right;
+    max-width: 50%;
+  }
 } /* end @media */
diff --git a/content/_index.html b/content/_index.html
index 8df6adc..b33d6af 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -41,7 +41,7 @@ menu:
 
 <h2>Who am I?</h2>
 
-{{% imgproc me-and-lady Resize "768x" "float-md-end w-md-50 p-3" %}}
+{{% imgproc me-and-lady Resize "768x" "float-right" %}}
 Image courtesy [Guy McCutcheon Photography](https://www.guymccutcheon.com/)
 {{% /imgproc %}}
 
@@ -74,7 +74,7 @@ Image courtesy [Guy McCutcheon Photography](https://www.guymccutcheon.com/)
 
 <h2>Where am I?</h2>
 
-{{% imgproc wy-in-ks Resize "768x" "float-md-start w-md-50 p-3" / %}}
+{{% imgproc wy-in-ks Resize "768x" "float-left" / %}}
 
 
 <p>
@@ -127,23 +127,21 @@ Around the web you can find me at (in order of subjective importance)
       <em>not</em> use it as fodder to try and "follow" me on each of these
       platforms. I stand with RMS:
     </p>
-    <figure>
-      <blockquote class="blockquote">
-        <p>
-          Facebook is a bad place for a person to be. When people find us on
-          Facebook, we lead them away from Facebook and then talk with them
-          elsewhere.
-        </p>
-      </blockquote>
-      <figcaption class="blockquote-footer">
+    <blockquote>
+      <p>
+        Facebook is a bad place for a person to be. When people find us on
+        Facebook, we lead them away from Facebook and then talk with them
+        elsewhere.
+      </p>
+      <small>
         Richard Stallman in
         <cite
           ><a href="https://stallman.org/facebook-presence.html"
             >If you feel your organization needs a 'presence' in Facebook</a
           ></cite
         >
-      </figcaption>
-    </figure>
+      </small>
+    </blockquote>
     <p class="card-text">
       I typically don't respond to inqueries made on these platforms. Please use
       <a href="/contact">my contact form</a>, instead.
diff --git a/layouts/shortcodes/imgproc.html b/layouts/shortcodes/imgproc.html
index f83f908..0b03338 100644
--- a/layouts/shortcodes/imgproc.html
+++ b/layouts/shortcodes/imgproc.html
@@ -14,9 +14,9 @@
 {{ else }}
   {{ errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." }}
 {{ end }}
-<figure class="figure {{ $figclass }}">
+<figure class="{{ $figclass }}">
   <img
-    class="figure-img img img-fluid"
+    class="img-fluid"
     src="{{ $img.RelPermalink }}"
     width="{{ $img.Width }}"
     height="{{ $img.Height }}"