From 68177b871a36553a0077cb3e42b8ddde59ff383c Mon Sep 17 00:00:00 2001 From: yequari Date: Sun, 3 Nov 2024 12:57:09 -0700 Subject: [PATCH] make light theme less horrendous --- config.yaml | 3 +- layouts/partials/footer.html | 8 +- themes/dreamcast/static/css/main.css | 113 ++++++++++----------------- themes/dreamcast/static/js/main.js | 86 ++++++++++++-------- 4 files changed, 103 insertions(+), 107 deletions(-) diff --git a/config.yaml b/config.yaml index d35d91b..cecea07 100644 --- 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: diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index b40f69f..eb7498c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,9 @@

- Made without AI tools using Hugo. - {{ range first 1 .Site.RegularPages.ByDate.Reverse }} - Last updated . + Site updated + . + {{ $pageLastmod := .Lastmod }} + {{ with .GitInfo }} + Page version {{ .AbbreviatedHash }}. {{ end }}

diff --git a/themes/dreamcast/static/css/main.css b/themes/dreamcast/static/css/main.css index 982fdd7..7ec4ad9 100644 --- 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 { diff --git a/themes/dreamcast/static/js/main.js b/themes/dreamcast/static/js/main.js index c38d081..f3b4944 100644 --- 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();