diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 34cc6a0..b40f69f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,9 @@

- {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }} - Site last updated . + Made without AI tools using Hugo. + {{ range first 1 .Site.RegularPages.ByDate.Reverse }} + Last updated . {{ end }}

+

+ +

diff --git a/static/images/waves-nobg.svg b/static/images/waves-nobg.svg new file mode 100644 index 0000000..ccfb55d --- /dev/null +++ b/static/images/waves-nobg.svg @@ -0,0 +1,6435 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/dreamcast/layouts/_default/baseof.html b/themes/dreamcast/layouts/_default/baseof.html index 29fc71b..6731621 100644 --- a/themes/dreamcast/layouts/_default/baseof.html +++ b/themes/dreamcast/layouts/_default/baseof.html @@ -15,9 +15,9 @@
{{- block "main" . }}{{- end }}
- - - + diff --git a/themes/dreamcast/static/css/main.css b/themes/dreamcast/static/css/main.css index 273559e..d8ea436 100644 --- a/themes/dreamcast/static/css/main.css +++ b/themes/dreamcast/static/css/main.css @@ -10,7 +10,15 @@ --blue: #284D9E; --black: #342F23; - --main-bg: var(--bg); + --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); @@ -32,8 +40,44 @@ --heading-6: 0.25rem; } +@media (prefers-color-scheme: dark) { + :root { + --main-bg: linear-gradient(#28164B, 70%, #825ECA ); + --content-bg: #1A181B; + --primary-text: #DCCBFF; + --secondary-text: #B89AF5; + --header: #825ECA; + --nav-link: #B89AF5; + --primary-link: #B89AF5; + --primary-link-hover: #E3D5FF; + --secondary-link: #E3D5FF; + --secondary-link-hover: #B89AF5; + --ternary-link: var(--blue); + --ternary-link-hover: var(--brown); + --shadow: #00000088; + } +} + +@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; + } +} + body { - background: fixed no-repeat url('/images/waves.svg') var(--main-bg); + background: fixed no-repeat url('/images/waves-nobg.svg'), fixed no-repeat var(--main-bg); background-size: cover; color: var(--primary-text); font-size: medium; @@ -166,7 +210,7 @@ header .profile { flex-flow: row wrap; justify-content: space-between; margin: 10px; - text-shadow: 3px 3px 5px var(--blue-gray); + text-shadow: 3px 3px 5px var(--shadow); } header .profile img { @@ -234,7 +278,7 @@ nav li a { nav li a:link, nav li a:visited { - color: #de9b00; + color: var(--nav-link); text-decoration: none; border-left: 1px solid rgba(255, 255, 255, 0); border-right: 1px solid rgba(255, 255, 255, 0); @@ -400,11 +444,21 @@ li.page-item { } footer { + border-top: 1px dotted var(--secondary-text); text-align: center; color: var(--secondary-text); flex: 1 1 100%; } +footer p { + font-size: 0.8rem; +} + +#theme-toggle { + background: var(--content-bg); + color: var(--primary-text); +} + .metadata { display: flex; flex-flow: row; diff --git a/themes/dreamcast/static/js/main.js b/themes/dreamcast/static/js/main.js index a10c565..b738e66 100644 --- a/themes/dreamcast/static/js/main.js +++ b/themes/dreamcast/static/js/main.js @@ -1,14 +1,93 @@ -const root = document.documentElement; +const root = document.querySelector(':root'); +const themeToggle = document.getElementById('theme-toggle'); let mouseX = 0; let mouseY = 0; +const darkMode = { + mainBg: "linear-gradient(#28164B, 70%, #825ECA )", + contentBg: "#1A181B", + primaryText: "#DCCBFF", + secondaryText: "#B89AF5", + header: "#825ECA", + navLink: "#B89AF5", + primaryLink: "#B89AF5", + primaryLinkHover: "#E3D5FF", + secondaryLink: "#E3D5FF", + secondaryLinkHover: "#B89AF5", + ternaryLink: "var(--blue)", + ternaryLinkHover: "var(--brown)", + shadow: "#00000088" +} + +const lightMode = { + mainBg: "linear-gradient(#0045df, #00d4ff)", + contentBg: "#EEE5E5", + primaryText: "#342F23", + secondaryText: "#2F3E5E", + header: "#DE9B00", + navLink: "#DE9B00", + primaryLink: "#896D2E", + primaryLinkHover: "#284D9E", + secondaryLink: "#284D9E", + secondaryLinkHover: "#896D2E", + ternaryLink: "#284D9E", + ternaryLinkHover: "#896D2E", + shadow: "#2F3E5E55" +} + +const applyTheme = (theme) => { + root.style.setProperty("--main-bg", theme.mainBg); + root.style.setProperty("--content-bg", theme.contentBg); + root.style.setProperty("--primary-text", theme.primaryText); + root.style.setProperty("--secondary-text", theme.secondaryText); + root.style.setProperty("--header", theme.header); + root.style.setProperty("--nav-link", theme.navLink); + root.style.setProperty("--primary-link", theme.primaryLink); + root.style.setProperty("--primary-link-hover", theme.primaryLinkHover); + root.style.setProperty("--secondary-link", theme.secondaryLink); + root.style.setProperty("--secondary-link-hover", theme.secondaryLinkHover); + root.style.setProperty("--ternary-link", theme.ternaryLink); + root.style.setProperty("--ternary-link-hover", theme.ternaryLinkHover); + root.style.setProperty("--shadow", theme.shadow); +} + +const enableDarkMode = () => { + applyTheme(darkMode); + localStorage.setItem('theme', 'dark'); + themeToggle.innerText = 'Light Mode'; +} + +const disableDarkMode = () => { + applyTheme(lightMode); + localStorage.setItem('theme', 'light'); + themeToggle.innerText = 'Dark Mode'; +} + +const detectTheme = () => { + let theme = 'light'; + let themeObj = lightMode; + + if (localStorage.getItem('theme')) { + theme = localStorage.getItem('theme'); + } + else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + theme = 'dark'; + } + + theme === 'dark' ? enableDarkMode() : disableDarkMode(); +} + document.addEventListener("mousemove", (evt) => { mouseX = evt.clientX / innerWidth; mouseY = evt.clientY / innerHeight; root.style.setProperty("--mouse-x", `${mouseX}`); root.style.setProperty("--mouse-y", `${mouseY}`); - - console.log(root.style.getPropertyValue("--mouse-x")); }); +themeToggle.className = ""; +detectTheme(); + +themeToggle.addEventListener('click', () => { + localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode(); +});