Settings refactor / add birb

public/css/index.css

@@ -23,7 +23,8 @@
 	--color-gray-90: #333333;
 
 	--card-color: rgba(250, 250, 250, 1);
-	--contrast-color: #027860;
+	--contrast-color: rgb(2, 120, 96);
+	--contrast-color-translucent: rgba(2, 120, 96, 0.5);
 	--background-color: #faf5f5;
 	--rss-orange: rgb(255, 152, 0);
 	--text-color: var(--color-gray-90);
@@ -98,7 +99,7 @@
 	--border-radius: 0.3rem;
 
 	/* Transitions */
-	--transition-normal: all 0.3s;
+	--transition-normal: all 0.3s allow-discrete;
 
 	/* Links */
 	--link-decoration-thickness: 0.06rem;
@@ -119,7 +120,8 @@
 		--color-gray-20: #253848;
 		--color-gray-90: #dad8d8;
 		--card-color: #333333;
-		--contrast-color: #04c49e;
+		--contrast-color: rgb(4, 196, 158);
+		--contrast-color-translucent: rgba(4, 196, 158, 0.5);
 
 		/* --text-color is assigned to --color-gray-_ above */
 		--text-color-link: var(--text-color);
@@ -576,6 +578,31 @@ sup {
 }
 
 /* Site Settings */
+#siteSettings {
+	border: 1.5px solid var(--color-gray-20);
+	border-radius: var(--border-radius);
+	background-color: var(--card-color);
+	transition: var(--transition-normal);
+	&::backdrop {
+		backdrop-filter: blur(3px);
+		background-color: var(--contrast-color-translucent);
+		transition: var(--transition-normal);
+	}
+	&[open] {
+		opacity: 1;
+		transition: var(--transition-normal);
+		@starting-style {
+			opacity: 0;
+		}
+	}
+	&[open]::backdrop {
+		opacity: 1;
+		@starting-style {
+			opacity: 0;
+		}
+	}
+} /* TODO: figure out why exit animation doesn't work */
+
 #siteSettingsContainer {
 	& button:not(#settingsDone) {
 		margin-top: 0;

public/js/main.js

@@ -0,0 +1,64 @@
+/*
+ * Function to handle settings toggles and the effects they control
+ * handleOnToggle: Function to be called if user turns the setting on
+ * handleOnDefault: Function to be called if the setting is on by default
+ * handleOffToggle: Function to be called if user turns the setting off
+ * handleOffDefault: Function to be called if the setting is off by default
+ * settingToggle: String - ID of the user-facing toggle element to control the effect
+ * preferenceName: String - Name to be used to record the user's setting preference in local storage'
+ * defaultSetting: Boolean
+ * forcedOn: Boolean - whether to ignore the user preference if defaultSetting = true
+ */
+
+const settingHandler = (settingsObject) => {
+	const toggle = document.getElementById(settingsObject.settingToggle);
+	const preference = localStorage.getItem(settingsObject.preferenceName);
+
+	// Report settings
+	console.info(
+		`
+		Settings: ${settingsObject.preferenceName}
+		----------
+		Default: ${settingsObject.defaultSetting}
+		Forced on: ${settingsObject.forcedOn}
+		User preference: ${preference}
+		`,
+	);
+
+	// User preference is positive
+	if (preference === "1") {
+		toggle.checked = true;
+		settingsObject.forcedOn ? (toggle.disabled = true) : null;
+		settingsObject.handleOnDefault();
+	} else if (settingsObject.defaultSetting && settingsObject.forcedOn) {
+		// Default on, user preference ignored
+		toggle.checked = true;
+		toggle.disabled = true;
+		settingsObject.handleOnDefault();
+	} else if (settingsObject.defaultSetting && !preference) {
+		// Default on, no user preference
+		toggle.checked = true;
+		settingsObject.forcedOn ? (toggle.disabled = true) : null;
+		settingsObject.handleOnDefault();
+	} else {
+		toggle.checked = false;
+		settingsObject.handleOffDefault();
+	}
+
+	// Handle setting toggle
+	toggle.addEventListener("change", function () {
+		if (this.checked) {
+			console.info(
+				`Settings: User turned on ${settingsObject.preferenceName}.`,
+			);
+			localStorage.setItem(settingsObject.preferenceName, 1);
+			settingsObject.handleOnToggle();
+		} else {
+			console.info(
+				`Settings: User turned off ${settingsObject.preferenceName}.`,
+			);
+			localStorage.setItem(settingsObject.preferenceName, 0);
+			settingsObject.handleOffToggle();
+		}
+	});
+};