make light theme less horrendous

2024-11-03 12:57:09 -07:00 · 2024-11-03 12:57:09 -07:00 · 68177b871a
parent 63adc1d843
commit 68177b871a
4 changed files with 103 additions and 107 deletions
--- a/config.yaml
+++ b/config.yaml
@ -2,6 +2,7 @@ baseURL: http://yequari.com/
 languageCode: en-us
 title: yequari.com
 theme: dreamcast
+enableGitInfo: true
 params:
  # about: "I write code and occasionally blog posts."
  webmentions: https://webmention.io/yequari.com/webmention
@ -60,7 +61,7 @@ menu:
      params:
        rel: external
        icon: aero-chat.svg
-      url: xmpp:yequari@cardgameson.motorcycles
+      url: xmpp:yequari@omg.lol
      weight: 40
 caches:
  getresource:
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,7 +1,9 @@
 <p>
-    Made without AI tools using Hugo.
-    {{ range first 1 .Site.RegularPages.ByDate.Reverse }}
-        Last updated <time id="last-update" datetime="{{ .PublishDate.Format "2006-01-02 15:04:05 -0700" }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
+    Site updated 
+    <time datetime="{{ .Site.Lastmod.Format "2006-01-02 15:04:05 -0700" }}">{{ .Site.Lastmod.Format "January 2, 2006" }}</time>.
+    {{ $pageLastmod := .Lastmod }}
+    {{ with .GitInfo }}
+    Page version <a href="https://git.32bit.cafe/yequari/yequari.com/commit/{{.Hash}}"><code>{{ .AbbreviatedHash }}</code></a>. 
    {{ end }}
 </p>
 <p>
--- a/themes/dreamcast/static/css/main.css
+++ b/themes/dreamcast/static/css/main.css
@ -1,37 +1,6 @@
@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400|noto-sans:400,500,600,700|m-plus-1:400,500,600,700|audiowide:400|koulen:400|catamaran:400,700);
 /* CSS HEX */
 :root {
-    --isabelline: #EEE5E5;
-
-    --bg: #0046de;
-    --brown: #896D2E;
-    --orange: #DE9B00;
-    --blue-gray: #2F3E5E;
-    --blue: #284D9E;
-    --black: #342F23;
-
-    --russian-violet: #1f0949;
-    --tea-rose: #f8c7cc;
-    --periwinkle: #BEB7DF;
-    --rose-quartz: #ABA9BF;
-    --eerie-black: #1D1E18;
-    --lavender: #E1E2EF;
-    --mardi-gras: #320F76;
-
-    /* --main-bg: linear-gradient(#0045df, #00d4ff); */
-    /* --content-bg: var(--isabelline); */
-    /* --primary-text: var(--black); */
-    /* --secondary-text: var(--blue-gray); */
-    /* --header: var(--orange); */
-    /* --nav-link: var(--orange); */
-    /* --primary-link: var(--brown); */
-    /* --primary-link-hover: var(--blue); */
-    /* --secondary-link: var(--blue); */
-    /* --secondary-link-hover: var(--brown); */
-    /* --ternary-link: var(--blue); */
-    /* --ternary-link-hover: var(--brown); */
-    /* --shadow: #2F3E5E55; */
-
    --heading-1: 2.75rem;
    --heading-2: 2.25rem;
    --heading-3: 1.75rem;
@ -52,37 +21,41 @@
        --primary-link-hover: #E3D5FF;
        --secondary-link: #E3D5FF;
        --secondary-link-hover: #B89AF5;
-        --ternary-link: var(--blue);
-        --ternary-link-hover: var(--brown);
+        --ternary-link: #B89AF5;
+        --ternary-link-hover: #E3D5FF;
+        --link-shadow: #00000088;
        --shadow: #00000088;
+        --nav-spotlight: radial-gradient(
+            circle at center,
+            rgba(255, 255, 255, 0.1) 0%,
+            rgba(255, 255, 255, 0.05) 25%,
+            rgba(255, 255, 255, 0) 40%
+        );
    }
 }

@media (prefers-color-scheme: light) {
    :root {
-        /* --main-bg: linear-gradient(#0045df, #00d4ff); */
-        /* --content-bg: var(--isabelline); */
-        /* --primary-text: var(--black); */
-        /* --secondary-text: var(--blue-gray); */
-        /* --header: var(--orange); */
-        /* --nav-link: var(--orange); */
-        /* --primary-link: var(--brown); */
-        /* --primary-link-hover: var(--blue); */
-        /* --secondary-link: var(--blue); */
-        /* --secondary-link-hover: var(--brown); */
-        /* --ternary-link: var(--blue); */
-        /* --ternary-link-hover: var(--brown); */
-        /* --shadow: #2F3E5E55; */
-
-        --main-bg: linear-gradient(#0045df, #00d4ff);
-        --content-bg: #009BF0;
-        --primary-text: var(--black);
-        --header: #9900F0;
-        --nav-link: #9900F0;
-        --primary-link: #4A00F0;
-        --primary-link-hover: #0050F0;
-
-
+        --main-bg: linear-gradient(#918EF4, #6F9CEB);
+        --content-bg: #98B9F2;
+        --primary-text: #141B41;
+        --secondary-text: #141B41;
+        --header: #141B41;
+        --nav-link: #141B41;
+        --primary-link: #306BAC;
+        --primary-link-hover: #141B41;
+        --secondary-link: #306BAC;
+        --secondary-link-hover: #141B41;
+        --ternary-link: #141B41;
+        --ternary-link-hover: #306BAC;
+        --link-shadow: #00000000;
+        --shadow: #132B40AA;
+        --nav-spotlight: radial-gradient(
+            circle at center,
+            rgba(255, 255, 255, 0.1) 0%,
+            rgba(255, 255, 255, 0.05) 25%,
+            rgba(255, 255, 255, 0) 40%
+        );
    }
 }

@ -109,7 +82,6 @@ h1,h2,h3,h4,h5,h6 {
 h1 {
    font-size: var(--heading-1);
 }
-
 h2 {
    font-size: var(--heading-2);
 }
@ -220,7 +192,7 @@ header .profile {
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 10px;
-    text-shadow: 3px 3px 5px var(--shadow);
+    text-shadow: 3px 3px 5px var(--link-shadow);
 }

 header .profile img {
@ -252,16 +224,6 @@ nav#main-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
-    background: radial-gradient(
-    /* circle at calc(var(--mouse-x) + var(--nav-x)) calc(var(--mouse-y) + var(--nav-y)), */
-    /* circle at var(--mouse-x) var(--mouse-y), */
-    circle at center,
-    rgba(255, 255, 255, 0.1) 0%,
-    rgba(255, 255, 255, 0.05) 25%,
-    rgba(255, 255, 255, 0) 40%
-    );
-    background-position-x: calc(var(--mouse-x) - var(--nav-x-offset));
-    background-position-y: calc(var(--mouse-y) - var(--nav-y-offset));
    border-radius: 15px;
 }

@ -288,7 +250,7 @@ nav#main-navbar li a {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  border-radius: 15px;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
+  text-shadow: 1px 1px 3px var(--link-shadow);
 }

 nav#main-navbar li a:link,
@ -314,7 +276,7 @@ nav#main-navbar li a:active {
  ); */
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+  text-shadow: 1px 1px 3px var(--link-shadow);
 }

@keyframes spotlight {
@ -469,9 +431,20 @@ footer p {
    font-size: 0.8rem;
 }

+footer a, footer a:link, footer a:visited {
+    color: var(--ternary-link);
+    text-decoration: underline dotted;
+}
+
+footer a:hover, footer a:active {
+    color: var(--ternary-link-hover);
+}
+
 #theme-toggle {
    background: var(--content-bg);
    color: var(--primary-text);
+    border: 1px solid var(--primary-text);
+    border-radius: 5px;
 }

 .metadata {
--- a/themes/dreamcast/static/js/main.js
+++ b/themes/dreamcast/static/js/main.js
@ -1,14 +1,14 @@
 const root = document.querySelector(':root');
 const themeToggle = document.getElementById('theme-toggle');
-const mainNavbar = document.querySelector('#main-navbar');
+const mainNavbar = document.querySelector('#main-navbar ul');
 let mouseX = 0;
 let mouseY = 0;
-let navX = mainNavbar.getBoundingClientRect().x;
-let navY = mainNavbar.getBoundingClientRect().y;
-let navW = mainNavbar.getBoundingClientRect().width;
-let navH = mainNavbar.getBoundingClientRect().height;
-root.style.setProperty("--nav-x", `${navX}`);
-root.style.setProperty("--nav-y", `${navY}`);
+let navX = 0;
+let navY = 0;
+let navW = 0;
+let navH = 0;
+let navOffsetX = 0;
+let navOffsetY = 0;

 const darkMode = {
  mainBg: "linear-gradient(#28164B, 70%, #825ECA )",
@ -21,26 +21,40 @@ const darkMode = {
  primaryLinkHover: "#E3D5FF",
  secondaryLink: "#E3D5FF",
  secondaryLinkHover: "#B89AF5",
-  ternaryLink: "var(--blue)",
-  ternaryLinkHover: "var(--brown)",
-  shadow: "#00000088"
+  ternaryLink: "#B89AF5",
+  ternaryLinkHover: "#E3D5FF",
+  linkShadow: "#00000088",
+  shadow: "#00000088",
+  navSpotlight: `radial-gradient(
+    circle at center,
+    rgba(220, 203, 255, 0.05) 0%,
+    rgba(220, 203, 255, 0.03) 25%,
+    rgba(220, 203, 255, 0) 40%
+  )`
 }

 const lightMode = {
  // mainBg: "linear-gradient(#0045df, #00d4ff)",
-  mainBg: "linear-gradient(#2B5F8C, #3DADF2)",
-  contentBg: "white",
-  primaryText: "#132B40",
-  secondaryText: "#2B5F8C",
-  header: "#CFE8FF",
-  navLink: "#CFE8FF",
-  primaryLink: "#337AA6",
-  primaryLinkHover: "#3DADF2",
-  secondaryLink: "#2F4A62",
-  secondaryLinkHover: "#2B5F8C",
-  ternaryLink: "#2B5F8C",
-  ternaryLinkHover: "#3DADF2",
-  shadow: "#132B40AA"
+  mainBg: "linear-gradient(#918EF4, #6F9CEB)",
+  contentBg: "#98B9F2",
+  primaryText: "#141B41",
+  secondaryText: "#141B41",
+  header: "#141B41",
+  navLink: "#141B41",
+  primaryLink: "#306BAC",
+  primaryLinkHover: "#141B41",
+  secondaryLink: "#306BAC",
+  secondaryLinkHover: "#141B41",
+  ternaryLink: "#141B41",
+  ternaryLinkHover: "#306BAC",
+  linkShadow: "#00000000",
+  shadow: "#132B40AA",
+  navSpotlight: `radial-gradient(
+    circle at center,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0) 40%
+  )`
 }

 const applyTheme = (theme) => {
@ -57,18 +71,24 @@ const applyTheme = (theme) => {
  root.style.setProperty("--ternary-link", theme.ternaryLink);
  root.style.setProperty("--ternary-link-hover", theme.ternaryLinkHover);
  root.style.setProperty("--shadow", theme.shadow);
+  root.style.setProperty("--link-shadow", theme.linkShadow);
+  root.style.setProperty("--nav-spotlight", theme.navSpotlight);
+  mainNavbar.style.background = theme.navSpotlight;
+  mainNavbar.style.transition = 'background-position 0.25s';
 }

 const enableDarkMode = () => {
  applyTheme(darkMode);
  localStorage.setItem('theme', 'dark');
-  themeToggle.innerText = 'Light Mode';
+  themeToggle.innerText = '☀️ Light Theme';
+  themeToggle.value = 'Light Mode';
 }

 const disableDarkMode = () => {
  applyTheme(lightMode);
  localStorage.setItem('theme', 'light');
-  themeToggle.innerText = 'Dark Mode';
+  themeToggle.innerText = '🌙 Dark Theme';
+  themeToggle.value = 'Dark Mode';
 }

 const detectTheme = () => {
@ -85,22 +105,22 @@ const detectTheme = () => {
  theme === 'dark' ? enableDarkMode() : disableDarkMode();
 }

-document.addEventListener("mousemove", (evt) => {
-  mouseX = evt.clientX / innerWidth;
-  mouseY = evt.clientY / innerHeight;
+mainNavbar.addEventListener("mousemove", (evt) => {
+  mainNavbar.style.setProperty('background-position-x', `${mouseX - navX - (navW / 2)}px`);
+  mainNavbar.style.setProperty('background-position-y', `${mouseY - navY - (navH / 2)}px`);
+});

-  root.style.setProperty("--mouse-x", `${evt.clientX}px`);
-  root.style.setProperty("--mouse-y", `${evt.clientY}px`);
+document.addEventListener("mousemove", (evt) => {
+  mouseX = evt.clientX;
+  mouseY = evt.clientY;
 });

 const calcNavOffset = () => {
-  let rect = mainNavbar.getBoundingClientRect()
+  const rect = mainNavbar.getBoundingClientRect()
  navX = rect.x;
  navY = rect.y;
  navW = rect.width;
  navH = rect.height;
-  root.style.setProperty("--nav-x-offset", `${navX - (navW / 2)}px`);
-  root.style.setProperty("--nav-y-offset", `${navY - (navH / 2)}px`);
 }

 calcNavOffset();