make light theme less horrendous
This commit is contained in:
parent
63adc1d843
commit
68177b871a
|
@ -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:
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue