diff --git a/guides.html b/guides.html index 08785cc..6093be5 100644 --- a/guides.html +++ b/guides.html @@ -19,10 +19,11 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; - height: 20vh; + justify-content: flex-start; + height: 100vh; margin: 0; text-align: center; + padding-top: 20px; } .terminal { margin-bottom: 20px; @@ -31,6 +32,7 @@ list-style: none; padding: 0; display: flex; + flex-wrap: wrap; justify-content: center; margin: 0; } @@ -49,7 +51,6 @@ } h4 { display: inline-block; - margin: 0 15px; cursor: pointer; } .guide { @@ -65,8 +66,9 @@ height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); - align-items: center; + align-items: flex-start; justify-content: center; + padding-top: 40px; } .modal-content { background-color: #333; @@ -77,6 +79,9 @@ text-align: left; color: #fff; font-size: 1rem; + overflow-y: auto; + max-height: 80%; + position: relative; } .modal-content img { width: 100%; @@ -113,38 +118,49 @@

Guides


-
-

Ad Blocking

-

Spotify

+
+

Ad Blocking | 

+

Spotify | 

+

Music Piracy

+ + + + + @@ -157,22 +173,34 @@ var spotifyBtn = document.getElementById("spotifyBtn"); var closeSpotify = document.getElementById("closeSpotifyModal"); + var musDownModal = document.getElementById("musDownModal"); + var musDownBtn = document.getElementById("musDownBtn"); + var closeMusDown = document.getElementById("closeMusDownModal"); + adBlockingBtn.onclick = function() { adBlockingModal.style.display = "flex"; } - closeAdBlocking.onclick = function() { - adBlockingModal.style.display = "none"; - } - spotifyBtn.onclick = function() { spotifyModal.style.display = "flex"; } + musDownBtn.onclick = function() { + musDownModal.style.display = "flex"; + } + + closeAdBlocking.onclick = function() { + adBlockingModal.style.display = "none"; + } + closeSpotify.onclick = function() { spotifyModal.style.display = "none"; } + closeMusDown.onclick = function() { + musDownModal.style.display = "none"; + } + window.onclick = function(event) { if (event.target == adBlockingModal) { adBlockingModal.style.display = "none"; @@ -180,19 +208,10 @@ if (event.target == spotifyModal) { spotifyModal.style.display = "none"; } - } - - function showModalFromHash() { - const hash = window.location.hash; - if (hash === '#adBlocking') { - adBlockingModal.style.display = "flex"; - } else if (hash === '#spotify') { - spotifyModal.style.display = "flex"; + if (event.target == musDownModal) { + musDownModal.style.display = "none"; } } - - window.onload = showModalFromHash; - window.onhashchange = showModalFromHash;