memori

commit a5f80166b5208b9d3396dba78ae7247c7c926048
parent c1004fcb8a7d279867a0f9337001aa56c01f1319
Author: Hunter
Date:   Fri, 31 Jul 2026 12:14:09 -0400

round corners on pantry theme; shift+F2 to cycle themes in reverse

Diffstat:
M
resources/style.css
 | 
12
+++++++++++-
M
resources/theme.js
 | 
21
+++++++++++++++++----

2 files changed, 28 insertions(+), 5 deletions(-)
diff --git a/resources/style.css b/resources/style.css
@@ -98,6 +98,7 @@
 
 	--theme-transition: 250ms ease;
 	--marquee-fade: 75ms;
+	--page-radius: 0px;
 	transition:
 		--desk var(--theme-transition),
 		--page var(--theme-transition),
@@ -106,7 +107,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-	:root {
+	:root,
+	.page.theming {
 		transition: none;
 	}
 }
@@ -159,6 +161,7 @@
 	--page: var(--nori);
 	--grid-line: var(--pesto);
 	--accent: var(--beet);
+	--page-radius: 2.45% / 1.89%;
 
 	& .add-images-btn,
 	& .popup-notification {
@@ -190,12 +193,17 @@ body {
 	aspect-ratio: 8.5 / 11;
 	background: var(--page);
 	position: relative;
+	border-radius: var(--page-radius);
 	box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
+.page.theming {
+	transition: border-radius var(--theme-transition);
+}
+
 .grid {
 	/* Grid dimensions as percentage of page to scale responsively */
 	width: var(--grid-width-percent);
@@ -258,6 +266,7 @@ body {
 
 	.page {
 		box-shadow: none;
+		border-radius: 0;
 	}
 
 	.grid-cell {
@@ -562,6 +571,7 @@ body.selecting .image-container {
 		width: auto !important;
 		height: auto !important;
 		max-width: none !important;
+		border-radius: 0 !important;
 		box-shadow: none;
 		margin: 0;
 		padding: 0;
diff --git a/resources/theme.js b/resources/theme.js
@@ -4,6 +4,8 @@ let isF2Pressed = false;
 const themes = ['sea-breeze', 'grape-soda', 'grapefruit', 'guac', 'mojito', 'banana', 'pantry'];
 const DEFAULT_THEME = 'guac';
 const DEFAULT_DARK_THEME = 'pantry';
+const THEME_TRANSITION_MS = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--theme-transition'));
+let pageTransitionTimer = null;
 
 function syncThemeColorMeta() {
 	const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--desk').trim();
@@ -21,9 +23,20 @@ document.documentElement.addEventListener('transitionend', (e) => {
 	}
 });
 
-function cycleTheme() {
-	currentThemeIndex = (currentThemeIndex + 1) % themes.length;
+// Only do border-radius transition on page when changing themes
+function withPageTransition() {
+	const page = document.querySelector('.page');
+	if (!page) return;
+
+	page.classList.add('theming');
+	clearTimeout(pageTransitionTimer);
+	pageTransitionTimer = setTimeout(() => page.classList.remove('theming'), THEME_TRANSITION_MS + 50);
+}
+
+function cycleTheme(step = 1) {
+	currentThemeIndex = (currentThemeIndex + step + themes.length) % themes.length;
 	const newTheme = themes[currentThemeIndex];
+	withPageTransition();
 	setTheme(newTheme);
 	saveThemeToLocalStorage(newTheme);
 }
@@ -45,12 +58,12 @@ function loadThemeFromLocalStorage() {
 	}
 }
 
-// F2 key handler for theme cycling
+// F2 cycles themes, shift+F2 cycles backwards
 document.addEventListener('keydown', (e) => {
 	if (e.key === 'F2' && !isF2Pressed) {
 		e.preventDefault();
 		isF2Pressed = true;
-		cycleTheme();
+		cycleTheme(e.shiftKey ? -1 : 1);
 	}
 });