Automatically hide menu & improve poster theme

cdmoro · May 12, 2024 · d88aaeb · d88aaeb
1 parent 360bee6
commit d88aaeb
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 34 deletions.
diff --git a/public/assets/poster-bg.png b/public/assets/poster-bg.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/main.ts b/src/main.ts
@@ -5,7 +5,7 @@ import { initWorkMode } from "./modules/work";
 import { initClock } from "./modules/clock";
 import { initScreensaver } from "./modules/screensaver";
 import { initFont } from "./modules/fonts";
-import { updateFavicon } from "./utils/utils";
+import { onMouseMove, updateFavicon } from "./utils/utils";
 
 document.addEventListener("DOMContentLoaded", () => {
   updateFavicon();
@@ -17,5 +17,6 @@ document.addEventListener("DOMContentLoaded", () => {
   initFont("default");
   initClock();
 
+  document.addEventListener("mousemove", onMouseMove);
   document.body.removeAttribute("data-loading");
 });
diff --git a/src/modules/screensaver.ts b/src/modules/screensaver.ts
@@ -10,7 +10,6 @@ import { exitZenMode } from "./zen";
 const INTERVAL = 10000;
 const TRANSITION_DURATION = `${INTERVAL / 1000}s`;
 let screensaverInterval: NodeJS.Timeout;
-let mouseTimeout: NodeJS.Timeout;
 
 function screensaver() {
   const quote = document.getElementById("quote");
@@ -37,7 +36,6 @@ function screensaver() {
 
 export function initScreensaver(defaultValue = false) {
   const value = initBooleanSetting("screensaver", defaultValue);
-  const footer = document.querySelector<HTMLElement>("footer");
 
   setBooleanSetting("screensaver", value);
   updateBooleanSettingButtonStatus("screensaver", value);
@@ -46,32 +44,16 @@ export function initScreensaver(defaultValue = false) {
     exitZenMode();
   }
 
-  if (value) {
-    footer?.classList.add("hidden");
-  }
-
   document
     .getElementById("screensaver")
     ?.addEventListener("click", toggleScreensaverMode);
 }
 
-function onMouseMove() {
-  const footer = document.querySelector<HTMLElement>("footer");
-  footer?.classList.remove("hidden");
-
-  clearTimeout(mouseTimeout);
-  mouseTimeout = setTimeout(() => {
-    footer?.classList.add("hidden");
-  }, 3000);
-}
-
 export function startScreensaver() {
   clearInterval(screensaverInterval);
 
   screensaver();
   screensaverInterval = setInterval(screensaver, INTERVAL);
-
-  document.addEventListener("mousemove", onMouseMove);
 }
 
 function toggleScreensaverMode() {
@@ -91,14 +73,9 @@ function toggleScreensaverMode() {
 }
 
 export function exitScreensaverMode() {
-  const footer = document.querySelector<HTMLElement>("footer");
-
-  document.removeEventListener("mousemove", onMouseMove);
   clearInterval(screensaverInterval);
 
   setBooleanSetting("screensaver", false);
   updateURL("screensaver", false);
   updateBooleanSettingButtonStatus("screensaver", false);
-
-  footer?.classList.remove("hidden");
 }
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -42,15 +42,6 @@ body:not(.screensaver) blockquote {
   transition-duration: 1s !important;
 }
 
-body.screensaver footer {
-  transition: opacity 0.5s;
-  opacity: 1;
-}
-
-body.screensaver footer.hidden {
-  opacity: 0;
-}
-
 #clock {
   margin: 0 auto;
   max-width: 80vw;
@@ -284,6 +275,12 @@ footer {
   flex-direction: column;
   gap: 5px;
   text-align: center;
+  transition: opacity 0.5s;
+  opacity: 1;
+}
+
+#menu.hidden {
+  opacity: 0;
 }
 
 #settings {

diff --git a/src/styles/themes/poster.css b/src/styles/themes/poster.css
@@ -1,6 +1,7 @@
 [data-theme|="poster"] {
   --quote-font-family: "Averia Serif Libre", sans-serif;
   --cite-font-family: "Allura", sans-serif;
+  --accent-color: #fd4533;
   --quote-line-height: 1.5;
 }
 
@@ -18,6 +19,7 @@
   border-style: solid;
   padding: 3.5rem;
   overflow: hidden;
+  background-image: url("/assets/poster-bg.png");
 }
 
 [data-theme|="poster"] blockquote p {
@@ -48,11 +50,15 @@
 [data-theme="poster-light"] blockquote {
   border-color: #111111;
   box-shadow: 5px 5px 10px #333333 inset, 10px 10px 25px #333;
+  background: #ffffff;
 }
 
 [data-theme="poster-dark"] blockquote {
-  border-color: #bfa783;
+  border-color: #dfab5d;
   box-shadow: 5px 5px 15px #000000 inset, 10px 10px 25px #000000;
+  color: #ffffff;
+  background-color: #000000;
+  background-blend-mode: hard-light;
 }
 
 @media only screen and (max-width: 600px) {

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -5,6 +5,7 @@ import { INITIAL_THEME_FONT_SIZE } from "../modules/fonts";
 
 const GITHUB_NEW_ISSUE_URL =
   "https://github.com/cdmoro/literature-clock/issues/new";
+let mouseTimeout: NodeJS.Timeout;
 
 export function getTime() {
   const urlParams = new URLSearchParams(window.location.search);
@@ -137,3 +138,13 @@ export function updateFavicon(time: string = getTime()) {
   }
   link.href = `/favicon/${getFaviconFileName(time)}.ico`;
 }
+
+export function onMouseMove() {
+  const menu = document.querySelector<HTMLElement>("#menu");
+  menu?.classList.remove("hidden");
+
+  clearTimeout(mouseTimeout);
+  mouseTimeout = setTimeout(() => {
+    menu?.classList.add("hidden");
+  }, 3000);
+}