From b14a6dbed43c729578f02a46fb19a394955161ef Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.top>
Date: Thu, 16 Sep 2021 15:30:19 +0400
Subject: [PATCH] Let's fix terminology. The term overlay is more suitable
 here, so let's stick to it.

---
 files/static/assets/css/main.css | 10 +++++-----
 files/static/assets/js/main.js   | 14 +++++++-------
 files/views/index.pug            |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/files/static/assets/css/main.css b/files/static/assets/css/main.css
index ab06338..0438178 100644
--- a/files/static/assets/css/main.css
+++ b/files/static/assets/css/main.css
@@ -11,7 +11,7 @@
 	--secondary-color: #9f2b68;
 	--text-color: #f5f5f5;
 	--text-indent: 1.6rem;
-	--view-background-color: #f5f5f574;
+	--overlay-background-color: #f5f5f574;
 	scrollbar-color: var(--primary-color) var(--background-color); }
 
 @media (prefers-color-scheme: light) {
@@ -20,7 +20,7 @@
 		--primary-color: #9f2b68;
 		--secondary-color: #cd2682;
 		--text-color: #0a0a0a;
-		--view-background-color: #0a0a0a74; } }
+		--overlay-background-color: #0a0a0a74; } }
 
 * { margin: 0; }
 
@@ -101,9 +101,9 @@ nav h1 {
 
 section { margin-top: 1rem; }
 
-#view { 
+#overlay { 
 	align-items: center;
-	background-color: var(--view-background-color);
+	background-color: var(--overlay-background-color);
 	display: flex;
 	visibility: hidden;
 	height: 100%; 
@@ -113,7 +113,7 @@ section { margin-top: 1rem; }
 	vertical-align: middle;
 	width: 100%; }
 
-#view * {
+#overlay * {
 	flex: none;
 	margin: 0 auto;
 	max-height: 100%;
diff --git a/files/static/assets/js/main.js b/files/static/assets/js/main.js
index d42d78f..7187b6a 100644
--- a/files/static/assets/js/main.js
+++ b/files/static/assets/js/main.js
@@ -11,7 +11,7 @@ function mousescroll(e) {
     e.target.style.transform = `scale(${scale})`;
 }
 
-document.getElementById("view").addEventListener("click", e => {
+document.getElementById("overlay").addEventListener("click", e => {
     e.target.firstChild.remove();
     e.target.style.visibility = "hidden";
     scale = 1;
@@ -27,23 +27,23 @@ file_links.forEach(f => f.addEventListener('click', e => {
         video.autoplay = true;
         video.controls = true;
         video.src = e.target.pathname;
-        document.getElementById("view").appendChild(video);
-        document.getElementById("view").style.visibility = "visible";
+        document.getElementById("overlay").appendChild(video);
+        document.getElementById("overlay").style.visibility = "visible";
     } else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
         e.preventDefault();
         const audio = document.createElement("audio");
         audio.autoplay = true;
         audio.controls = true;
         audio.src = e.target.pathname;
-        document.getElementById("view").appendChild(audio);
-        document.getElementById("view").style.visibility = "visible";
+        document.getElementById("overlay").appendChild(audio);
+        document.getElementById("overlay").style.visibility = "visible";
     } else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
         e.preventDefault();
         const image = document.createElement("img");
         image.addEventListener('wheel', mousescroll);
         image.src = e.target.pathname;
-        document.getElementById("view").appendChild(image);
-        document.getElementById("view").style.visibility = "visible";
+        document.getElementById("overlay").appendChild(image);
+        document.getElementById("overlay").style.visibility = "visible";
     }
 }));
 
diff --git a/files/views/index.pug b/files/views/index.pug
index 1d2c8cb..e0cbd4c 100644
--- a/files/views/index.pug
+++ b/files/views/index.pug
@@ -39,4 +39,4 @@ html(lang='en')
             h2 Privacy statements
             p I collect access logs that include access date and time, IP-address, User-Agent, referer URL that tells me where have you came from, request that you sent to me. In addition there are GeoIP information added based on your IP-address that includes country, region, and city for my convenience.
             p This site makes use of JavaScript purely for convenient functionality, like being able to watch video, listen to music, and look images in an overlay without the need to open a file in a new tab or return back.
-        div#view
\ No newline at end of file
+        div#overlay
\ No newline at end of file