From 961679d419d9a699f5e00149df3ca999e97ab2b8 Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Mon, 10 Feb 2025 06:52:25 -0500
Subject: [PATCH] format css and js files with prettier

---
 script/image-enlarger.js |  91 ++++----
 style/guestbook.css      | 104 +++++----
 style/style.css          | 475 +++++++++++++++++++++------------------
 3 files changed, 355 insertions(+), 315 deletions(-)

diff --git a/script/image-enlarger.js b/script/image-enlarger.js
index 19f9aca..4b0b0ee 100644
--- a/script/image-enlarger.js
+++ b/script/image-enlarger.js
@@ -9,55 +9,56 @@ const header = document.querySelector("header");
 const footer = document.querySelector("footer");
 
 enlargeImg.forEach((img) => {
-	img.style.cursor = "pointer";
+  img.style.cursor = "pointer";
 
-	img.addEventListener("click", () => {
-		// make background for image
-		let div = document.createElement("div");
-		div.style.display = "flex";
-		div.style.flexDirection = "column";
-		div.style.alignItems = "center";
-		div.style.justifyContent = "center";
-		div.style.height = "100vh";
-		div.style.width = "auto";
-		div.style.backgroundColor = "#000000";
+  img.addEventListener("click", () => {
+    // make background for image
+    let div = document.createElement("div");
+    div.style.display = "flex";
+    div.style.flexDirection = "column";
+    div.style.alignItems = "center";
+    div.style.justifyContent = "center";
+    div.style.height = "100vh";
+    div.style.width = "auto";
+    div.style.backgroundColor = "#000000";
 
-		// image element
-		let image = document.createElement("img");
-		image.src = img.src;
-		image.style.height = "80%";
-		image.style.width = "auto";
-		div.append(image);
+    // image element
+    let image = document.createElement("img");
+    image.src = img.src;
+    image.style.height = "80%";
+    image.style.width = "auto";
+    div.append(image);
 
-		let paragraph = document.createElement("p");
-		paragraph.textContent = "Click anywhere on the image or the black background to close. You can also press the x key on your keyboard.";
-		paragraph.style.color = "#FFFFFF";
-		div.append(paragraph);
-		// hide current page contents
-		main.style.display = "none";
-		nav.style.display = "none";
-		footer.style.display = "none";
-		header.style.display = "none";
+    let paragraph = document.createElement("p");
+    paragraph.textContent =
+      "Click anywhere on the image or the black background to close. You can also press the x key on your keyboard.";
+    paragraph.style.color = "#FFFFFF";
+    div.append(paragraph);
+    // hide current page contents
+    main.style.display = "none";
+    nav.style.display = "none";
+    footer.style.display = "none";
+    header.style.display = "none";
 
-		// remove display: grid from body and append div with enlarged image
-		body.style.display = "block";
-		body.append(div);
-		
-		const removeDiv = () => {
-			div.remove();
-			body.style.display = "grid";
-			main.style.display = "block";
-			nav.style.display = "block";
-			header.style.display = "flex";
-			footer.style.display = "flex";		
-		};
+    // remove display: grid from body and append div with enlarged image
+    body.style.display = "block";
+    body.append(div);
 
-		div.addEventListener("click", removeDiv);
+    const removeDiv = () => {
+      div.remove();
+      body.style.display = "grid";
+      main.style.display = "block";
+      nav.style.display = "block";
+      header.style.display = "flex";
+      footer.style.display = "flex";
+    };
 
-		body.addEventListener("keydown", (e) => {
-			if (e.key === "x") {
-				removeDiv();
-			} 
-		});	
-	});
+    div.addEventListener("click", removeDiv);
+
+    body.addEventListener("keydown", (e) => {
+      if (e.key === "x") {
+        removeDiv();
+      }
+    });
+  });
 });
diff --git a/style/guestbook.css b/style/guestbook.css
index e87ce5a..c2330cd 100644
--- a/style/guestbook.css
+++ b/style/guestbook.css
@@ -1,89 +1,95 @@
 :root {
-    --pagebg:#232c2f;
-    --pagecolor: #DB7093;
-    --button-border-color: #DB7093;
-    --button-color: #FFB6C1;
-    --border: #DB7093;
+  --pagebg: #232c2f;
+  --pagecolor: #db7093;
+  --button-border-color: #db7093;
+  --button-color: #ffb6c1;
+  --border: #db7093;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-	--border: #474973;
-	--pagecolor: #474973;
-	--button-border-color: #474973;
-	--button-color: #474973;
-	--pagebg: #f1dac4;
-    }
+  :root {
+    --border: #474973;
+    --pagecolor: #474973;
+    --button-border-color: #474973;
+    --button-color: #474973;
+    --pagebg: #f1dac4;
+  }
 
-    input[type=submit] {
-	color: #f1dac4;
-    }
+  input[type="submit"] {
+    color: #f1dac4;
+  }
 }
 
 ul.pages {
-    list-style:none;
-    margin:auto;
-    margin-top: 1rem;
-    text-align:center;
+  list-style: none;
+  margin: auto;
+  margin-top: 1rem;
+  text-align: center;
 }
 
-ul.pages li { display:inline; }
+ul.pages li {
+  display: inline;
+}
 
-ul.pages li a, ul.pages li.active {
-    font-size: 1.2rem; 
-    border: 1px solid var(--border); 
-    padding:5px;
-    margin:2px;
-    transition:0.5s ease;
-    text-decoration:none;
+ul.pages li a,
+ul.pages li.active {
+  font-size: 1.2rem;
+  border: 1px solid var(--border);
+  padding: 5px;
+  margin: 2px;
+  transition: 0.5s ease;
+  text-decoration: none;
 }
 
 ul.pages li.page a:hover {
-    background:var(--pagecolor);
-    color:var(--pagebg);
-    transition:0.5s ease;
+  background: var(--pagecolor);
+  color: var(--pagebg);
+  transition: 0.5s ease;
 }
 
 ul.pages li.page a {
-    background: var(--pagebg);  
-    color: var(--pagecolor);
+  background: var(--pagebg);
+  color: var(--pagecolor);
 }
 
 ul.pages li.active {
-    background:var(--pagecolor);
-    color:var(--pagebg);
+  background: var(--pagecolor);
+  color: var(--pagebg);
 }
 
 .q {
-    border-bottom: 2px solid var(--border);
+  border-bottom: 2px solid var(--border);
 }
 
 .a {
-    padding-left: 2rem;
-    border-left: 8px double var(--border);
-    margin-bottom: 2rem;
+  padding-left: 2rem;
+  border-left: 8px double var(--border);
+  margin-bottom: 2rem;
 }
 
 .guestbook-text {
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid var(--border);
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--border);
 }
 
-h1, h3, p {
-    margin: 0.5rem;
+h1,
+h3,
+p {
+  margin: 0.5rem;
 }
 
 main {
-    margin-top: 0.5rem;
+  margin-top: 0.5rem;
 }
 
-input[type="text"], textarea {
-    width: 30vw;
-    margin-bottom: 0.5rem;
+input[type="text"],
+textarea {
+  width: 30vw;
+  margin-bottom: 0.5rem;
 }
 
 input[type="submit"] {
-    background-color: var(--button-color);
-    border-color: var(--button-border-color);
-    padding: 0.5rem;
+  background-color: var(--button-color);
+  border-color: var(--button-border-color);
+  padding: 0.5rem;
 }
diff --git a/style/style.css b/style/style.css
index 756db9c..5dac142 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,343 +1,376 @@
 @font-face {
-	font-family: lato-regular;
-	src: url("../site-resources/fonts/lato-regular.woff2");
+  font-family: lato-regular;
+  src: url("../site-resources/fonts/lato-regular.woff2");
 }
 
 @font-face {
-	font-family: pacifico;
-	src: url("../site-resources/fonts/pacifico.woff2");
+  font-family: pacifico;
+  src: url("../site-resources/fonts/pacifico.woff2");
 }
 
 :root {
-	--text-color: #0C0C0C;
-	--background-color: #ffd4de;
-	--body-background-color: #ffcccc;
-	--scroll-gutter: #eb76ff88;
-	--scroll-bar: #ffa8ec88;
-	--link-hover: #FF1493;
-	--link-visited: #8A2BE2;
-	--link-color: #4B0082;
-	--border-color: #DB7093;
-	--bi-pride-pink-light: #D60270;
-	--bi-pride-purple-light: #9B4F96;
-	--bi-pride-blue-light: #0038A8;
-	--disability-pride-black-light: #595959;
-	--disability-pride-red-light: #CF7280;
-	--disability-pride-yellow-light: #EEDE77;
-	--disability-pride-white-light: #E8E8E8;
-	--disability-pride-blue-light: #7BC2E0;
-	--disability-pride-green-light: #3BB07D;
-	--trans-pride-blue-light: #5BCEFA;
-	--trans-pride-pink-light: #F5A9B8;
-	--trans-pride-white-light: #FFFFFF;
+  --text-color: #0c0c0c;
+  --background-color: #ffd4de;
+  --body-background-color: #ffcccc;
+  --scroll-gutter: #eb76ff88;
+  --scroll-bar: #ffa8ec88;
+  --link-hover: #ff1493;
+  --link-visited: #8a2be2;
+  --link-color: #4b0082;
+  --border-color: #db7093;
+  --bi-pride-pink-light: #d60270;
+  --bi-pride-purple-light: #9b4f96;
+  --bi-pride-blue-light: #0038a8;
+  --disability-pride-black-light: #595959;
+  --disability-pride-red-light: #cf7280;
+  --disability-pride-yellow-light: #eede77;
+  --disability-pride-white-light: #e8e8e8;
+  --disability-pride-blue-light: #7bc2e0;
+  --disability-pride-green-light: #3bb07d;
+  --trans-pride-blue-light: #5bcefa;
+  --trans-pride-pink-light: #f5a9b8;
+  --trans-pride-white-light: #ffffff;
 }
 
-*, *::before, *::after {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html {
-	font-size: 16px;
+  font-size: 16px;
 }
 
 body {
-	height: 100vh;
-	width: auto;
-	background-color: var(--body-background-color);
-	background-image: url("../img/site/assets/sakura.webp");
-	display: grid;
-	grid-template-columns: 20vw 60vw;
-	grid-template-rows: 6vh 85vh 6vh;
-	justify-content: center;
-	align-items: end;
-	align-content: center;
-	overflow: hidden;
-	color: var(--text-color);
+  height: 100vh;
+  width: auto;
+  background-color: var(--body-background-color);
+  background-image: url("../img/site/assets/sakura.webp");
+  display: grid;
+  grid-template-columns: 20vw 60vw;
+  grid-template-rows: 6vh 85vh 6vh;
+  justify-content: center;
+  align-items: end;
+  align-content: center;
+  overflow: hidden;
+  color: var(--text-color);
 }
 
-h1, h2, h3, h4, h5, h6, p, ul, figcaption, details {
-	margin: 0.5rem;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+figcaption,
+details {
+  margin: 0.5rem;
 }
 
-main, nav {
-	padding-bottom: 0.5rem;
-	font-family: system-ui;
-	letter-spacing: 0.05rem;
+main,
+nav {
+  padding-bottom: 0.5rem;
+  font-family: system-ui;
+  letter-spacing: 0.05rem;
 }
 
 main {
-	background-color: var(--background-color);
-	height: 85vh;
-	width: 60vw;
-	padding-left: 2.5rem;
-	overflow: auto;
-	scrollbar-width: thin;
-	scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
-	grid-column: 2/3;
-	grid-row: 2/3;
-	align-self: end;
-	padding-top: 0.5rem;
+  background-color: var(--background-color);
+  height: 85vh;
+  width: 60vw;
+  padding-left: 2.5rem;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-gutter) var(--scroll-bar);
+  grid-column: 2/3;
+  grid-row: 2/3;
+  align-self: end;
+  padding-top: 0.5rem;
 }
 
 header {
-	background-color: var(--background-color);
-	grid-row: 1/2;
-	grid-column: 1/3;
-	height: 6vh;
-	width: 80vw;
-	border-top-left-radius: 15px;
-	border-top-right-radius: 15px;
-	border-bottom: 10px solid;
-	border-image-slice: 1;
-	border-width: 5px;
-	border-image-source: linear-gradient(to right, var(--bi-pride-pink-light) 0 33%, var(--bi-pride-purple-light) 33% 66%, var(--bi-pride-blue-light) 66%);
-	font-size: 1.4rem;
-	margin-top: 0.43rem;
+  background-color: var(--background-color);
+  grid-row: 1/2;
+  grid-column: 1/3;
+  height: 6vh;
+  width: 80vw;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  border-bottom: 10px solid;
+  border-image-slice: 1;
+  border-width: 5px;
+  border-image-source: linear-gradient(
+    to right,
+    var(--bi-pride-pink-light) 0 33%,
+    var(--bi-pride-purple-light) 33% 66%,
+    var(--bi-pride-blue-light) 66%
+  );
+  font-size: 1.4rem;
+  margin-top: 0.43rem;
 }
 
 footer {
-	background-color: var(--background-color);
-	grid-row: 3/4;
-	grid-column: 1/3;
-	height: 6vh;
-	width: 80vw;
-	border-bottom-left-radius: 15px;
-	border-bottom-right-radius: 15px;
-	border-top: 10px solid;
-	border-image-slice: 1;
-	border-width: 5px;
-	border-image-source: linear-gradient(to right, var(--disability-pride-black-light) 0 35%, var(--disability-pride-red-light) 35% 41%, var(--disability-pride-yellow-light) 41% 47%, var(--disability-pride-white-light) 47% 53%, var(--disability-pride-blue-light) 53% 59%, var(--disability-pride-green-light) 59% 65%, var(--disability-pride-black-light) 65% 71%);
-	font-family: system-ui;
-	font-size: 1.3rem;
-	letter-spacing: 0.05rem;
+  background-color: var(--background-color);
+  grid-row: 3/4;
+  grid-column: 1/3;
+  height: 6vh;
+  width: 80vw;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  border-top: 10px solid;
+  border-image-slice: 1;
+  border-width: 5px;
+  border-image-source: linear-gradient(
+    to right,
+    var(--disability-pride-black-light) 0 35%,
+    var(--disability-pride-red-light) 35% 41%,
+    var(--disability-pride-yellow-light) 41% 47%,
+    var(--disability-pride-white-light) 47% 53%,
+    var(--disability-pride-blue-light) 53% 59%,
+    var(--disability-pride-green-light) 59% 65%,
+    var(--disability-pride-black-light) 65% 71%
+  );
+  font-family: system-ui;
+  font-size: 1.3rem;
+  letter-spacing: 0.05rem;
 }
 
-header, footer {
-	display: flex;
-	justify-content: center;	
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 0.75rem;
+header,
+footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
 }
 
 nav {
-	background-color: var(--background-color);
-	grid-row: 2/3;
-	grid-column: 1/2;
-	justify-self: end;
-	align-self: end;
-	width: 20vw;
-	height: 85vh;
-	padding-top: 0.75rem;
-	padding-left: 1.5rem;
-	border-right: 10px solid;
-	border-image-slice: 1;
-	border-width: 5px;
-	border-image-source: linear-gradient(to bottom, var(--trans-pride-blue-light) 0 20%, var(--trans-pride-pink-light) 20% 40%, var(--trans-pride-white-light) 40% 60%, var(--trans-pride-pink-light) 60% 80%, var(--trans-pride-blue-light) 80%);
+  background-color: var(--background-color);
+  grid-row: 2/3;
+  grid-column: 1/2;
+  justify-self: end;
+  align-self: end;
+  width: 20vw;
+  height: 85vh;
+  padding-top: 0.75rem;
+  padding-left: 1.5rem;
+  border-right: 10px solid;
+  border-image-slice: 1;
+  border-width: 5px;
+  border-image-source: linear-gradient(
+    to bottom,
+    var(--trans-pride-blue-light) 0 20%,
+    var(--trans-pride-pink-light) 20% 40%,
+    var(--trans-pride-white-light) 40% 60%,
+    var(--trans-pride-pink-light) 60% 80%,
+    var(--trans-pride-blue-light) 80%
+  );
 }
 
 section {
-	width: 55vw;
+  width: 55vw;
 }
 
 .status {
-	height: 120px;
-	margin-top: 0.5rem;
-	margin-bottom: 0.5rem;
+  height: 120px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .mobile-header {
-	display: none;
+  display: none;
 }
 
 @media (prefers-color-scheme: dark) {
-	:root {
-		--background-color: #240046;
-		--body-background-color: #0d0c1d;
-		--text-color: #f1dac4;
-		--scroll-bar: #474973;
-		--scroll-gutter: #a69cac;
-		--link-color: #4cc9f0;
-		--link-hover: #f72585;
-		--link-visited: #4cc9f0;
-		--border-color: #474973;
-	}
+  :root {
+    --background-color: #240046;
+    --body-background-color: #0d0c1d;
+    --text-color: #f1dac4;
+    --scroll-bar: #474973;
+    --scroll-gutter: #a69cac;
+    --link-color: #4cc9f0;
+    --link-hover: #f72585;
+    --link-visited: #4cc9f0;
+    --border-color: #474973;
+  }
 
-	body {
-		background-color: var(--body-background-color);
-		background-image: url("../img/site/assets/stardust.png");
-	}
+  body {
+    background-color: var(--body-background-color);
+    background-image: url("../img/site/assets/stardust.png");
+  }
 
-	.status .statuslol_content p {
-		color: var(--text-color);
-	}
+  .status .statuslol_content p {
+    color: var(--text-color);
+  }
 
-	.status .statuslol_content .statuslol_time a {
-		color: var(--link-color) !important;
-	}
+  .status .statuslol_content .statuslol_time a {
+    color: var(--link-color) !important;
+  }
 }
 
- @media only screen and (max-width: 600px) {
-	.mobile-header {
-		display: flex;
-		height: 10vh;
-		width: 100vw;
-		border-radius: 0;
-		border: none;
-	}
+@media only screen and (max-width: 600px) {
+  .mobile-header {
+    display: flex;
+    height: 10vh;
+    width: 100vw;
+    border-radius: 0;
+    border: none;
+  }
 
-	.mobile-header span {
-		font-size: 2rem;
-	}
+  .mobile-header span {
+    font-size: 2rem;
+  }
 
-	.mobile-header span img {
-		height: 24px;
-		width: 24px;
-	}
+  .mobile-header span img {
+    height: 24px;
+    width: 24px;
+  }
 
-	header {
-		display: none;
-	}
+  header {
+    display: none;
+  }
 
-	footer {
-		display: none;
-	}
+  footer {
+    display: none;
+  }
 
-	nav {
-		display: none;
-	}
+  nav {
+    display: none;
+  }
 
-	body {
-		height: 100vh;
-		width: auto;
-		display: flex;
-		flex-direction: column;
-		background-image: none;
-	}
+  body {
+    height: 100vh;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    background-image: none;
+  }
 
-	main {
-		display: flex;
-		justify-content: center;
-		align-items: baseline;
-		height: 90vh;
-		width: 100vw;
-		padding: 0;
-		padding-top: 1.25rem;
-		padding-bottom: 1.25rem;
-	}
+  main {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    height: 90vh;
+    width: 100vw;
+    padding: 0;
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
 
-	section {
-		width: 95vw;
-	}
+  section {
+    width: 95vw;
+  }
 
-	.status {
-		height: auto;
-		margin: 0;
-	}
+  .status {
+    height: auto;
+    margin: 0;
+  }
 }
 
 a {
-	color: var(--link-color);
-	text-decoration: none;
+  color: var(--link-color);
+  text-decoration: none;
 }
 
 a:visited {
-	color: var(--link-visited);
+  color: var(--link-visited);
 }
 
 a:hover {
-	color: var(--link-hover);
-	text-decoration: underline;
+  color: var(--link-hover);
+  text-decoration: underline;
 }
 
 ul {
-	list-style-type: none;
+  list-style-type: none;
 }
 
 nav ul li {
-	padding-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 nav ul li a {
-	font-size: 1rem;
+  font-size: 1rem;
 }
 
 main section {
-	font-size: 1rem;
+  font-size: 1rem;
 }
 
 main section p {
-	line-height: 1.25;
+  line-height: 1.25;
 }
 
 main section ul li {
-	padding-bottom: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 
 .logo {
-	font-family: pacifico;
-	font-size: 1.35rem;
-	letter-spacing: .1rem;
+  font-family: pacifico;
+  font-size: 1.35rem;
+  letter-spacing: 0.1rem;
 }
 
 .motto {
-	font-family: lato-regular;
-	letter-spacing: .05rem;
+  font-family: lato-regular;
+  letter-spacing: 0.05rem;
 }
 
-
-
 .status .statuslol_container .statuslol {
-	background: var(--background-color) !important;
+  background: var(--background-color) !important;
 }
 
 .picrew-gallery {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 2rem;
-	margin: 1.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+  margin: 1.75rem;
 }
 
 .picrew-gallery img {
-	border: 4px solid var(--border-color);
-	border-radius: 5%;
+  border: 4px solid var(--border-color);
+  border-radius: 5%;
 }
 
-.picrew-gallery, .picrew-gallery-header {
-	text-align: center;
+.picrew-gallery,
+.picrew-gallery-header {
+  text-align: center;
 }
 
 .photo-gallery-header {
-	text-align: center;
+  text-align: center;
 }
 
 .photography-gallery {
-	margin-top: 1rem;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 1rem;
-	justify-content: center;
+  margin-top: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
 }
 
 .gallery {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
 }
 
 .gallery-text {
-	text-align: center;
+  text-align: center;
 }
 
 .gallery-text-left {
-	text-align: left;
+  text-align: left;
 }
 
 .nested-list {
-	list-style-type: disc;
-	margin-left: 2rem;
+  list-style-type: disc;
+  margin-left: 2rem;
 }