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