From f6e5887c04fd3002c60448add23a2a63f1c5b67d Mon Sep 17 00:00:00 2001 From: Ruben Date: Thu, 29 Aug 2024 23:03:18 -0500 Subject: [PATCH] add dropdown box for mobile instead of whatever was before --- eepytab.js | 10 ------- index.html | 38 +++++++++++++++----------- script.js | 20 ++++++++++++++ style.css | 78 +++++++++++++++++++++++++----------------------------- 4 files changed, 78 insertions(+), 68 deletions(-) delete mode 100644 eepytab.js create mode 100644 script.js diff --git a/eepytab.js b/eepytab.js deleted file mode 100644 index 919299b..0000000 --- a/eepytab.js +++ /dev/null @@ -1,10 +0,0 @@ -/* i took this from https://dev.to/codepo8/showing-different-titles-depending-if-the-tab-is-active-or-not-hef */ -let activeTitle = 'sneexy dot pages dot gay'; -let inactiveTitle = 'zzz... synth is eepy... - sneexy dot pages dot gay'; -document.title = activeTitle; -window.addEventListener('blur', e => { - document.title = inactiveTitle; -}); -window.addEventListener('focus', e => { - document.title = activeTitle; -}); diff --git a/index.html b/index.html index ef2c978..52b947c 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ - + @@ -23,8 +23,14 @@
sneexy dot pages dot gay - s p g -
here
+
+ +
+ home + blog + links +
+
-

+
@@ -40,7 +46,7 @@ -
+
-
+
-
+ -

~/socials-and-contacts █

+
-
+
-
+ -

~/quotes █

+
-
+ -

~/buttons █

+
diff --git a/script.js b/script.js new file mode 100644 index 0000000..686bdbe --- /dev/null +++ b/script.js @@ -0,0 +1,20 @@ +/* dropdown menu for mobile users, used https://www.w3schools.com/howto/howto_js_dropdown.asp +When the user clicks on the button, +toggle between hiding and showing the dropdown content */ +function mobileDropdown() { + document.getElementById("dropdown-box").classList.toggle("show-dropdown"); +} + +// Close the dropdown menu if the user clicks outside of it +window.onclick = function(event) { + if (!event.target.matches('.nav-baselink-mobile')) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show-dropdown')) { + openDropdown.classList.remove('show-dropdown'); + } + } + } +} \ No newline at end of file diff --git a/style.css b/style.css index c225a6c..f9764f6 100644 --- a/style.css +++ b/style.css @@ -69,15 +69,6 @@ i use catppuccin color schemes because jod i LOVE catppuccin } } -/* -shell aliasing ass -*/ -:root { - --bg: var(--base); - --fg: var(--text); - --accent: var(--green); -} - /* font config, JetBrains Mono */ @@ -334,10 +325,7 @@ top navbar styling. attempts to look like a desktop panel/window manager bar color: var(--crust); margin-left: .5em !important; } - .nav-baselink-mobile { - display: none; - } - .hover-tip { + .mobile-dropdown { display: none; } .nav-links { @@ -394,7 +382,7 @@ h3 { font-size: 20px } /* TEXT */ -p, li { +p, li, button { font-size: 18px; } /* links should look good i think */ @@ -938,47 +926,53 @@ modify widths and spacing depending on the size of the display .nav-baselink { display: none !important; } + .mobile-dropdown { + position: relative !important; + display: inline-block !important; + } + .dropdown-content { + display: none; + position: absolute; + margin: .5em 0px 0px .4em !important; + background-color: var(--base); + min-width: 2em; + border-radius: 8px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px; + z-index: 1; + a { + display: inline-flex; + align-items: center; + color: var(--text); + padding: .6em .7em; + text-decoration: none; + } + a:hover { + color: var(--green); + text-decoration: underline; + } + i { + padding-right: .4em; + } + } + .show-dropdown { + display: block; + } .nav-baselink-mobile { - display: unset !important; + display: block !important; + font-family: "Lexend Deca"; background-color: var(--green); text-decoration: unset !important; color: var(--crust); margin-left: .4em !important; + border: unset !important; i:not(:first-child) { margin-left: -.5em; margin-right: -.5em; opacity: .6; } } - .hover-tip { - display: unset !important; - background-color: var(--base); - margin-left: .5em !important; - animation: blink 3s ease-inr-out infinite; - -moz-animation: blink 3s ease-in-out infinite; - -webkit-animation: blink 3s ease-in-out infinite; - } .nav-links { display: none !important; - order: 1; - margin-top: .5em; - } - } - .navbar:hover { - min-height: 4.06em !important; - .hover-tip { - display: none !important; - } - .nav-links { - display: unset !important; - padding: .2em; - margin-left: .4em !important; - } - .nav-baselink-mobile { - padding: .2em !important; - } - .nav-systray { - margin-left: auto !important; } }