sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add dropdown box for mobile instead of whatever was before

Browse source
This commit is contained in:
Ruben 2024-08-29 23:03:18 -05:00
commit f6e5887c04
No known key found for this signature in database
GPG key ID: AE181294E97E4802
4 changed files with 78 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

10
eepytab.js
View file

@ -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;
});

38
index.html
View file

@ -15,7 +15,7 @@
<meta lang="en-US">
<meta property="og:url" content="https://sneexy.pages.gay/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./eepytab.js" defer="defer"></script>
<script src="./script.js" defer="defer"></script>
</head>
<body>
@ -23,8 +23,14 @@
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-baselink" href="https://sneexy.pages.gay"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
<a class="nav-base nav-baselink-mobile" href="https://sneexy.pages.gay"><i class="ph-bold ph-squares-four"></i> s <i class="ph-bold ph-dot"></i> p <i class="ph-bold ph-dot"></i> g</a>
<div class="nav-base hover-tip"><i class="ph-bold ph-hand-pointing" alt="hover or tap"></i> here</div>
<div class="mobile-dropdown">
<button onclick="mobileDropdown()" class="nav-base nav-baselink-mobile"><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</button>
<div id="dropdown-box" class="dropdown-content">
<a href="https://sneexy.pages.gay"><i class="ph-bold ph-house"></i> home</a>
<a href="https://sneexy.pages.gay/blog"><i class="ph-bold ph-article"></i> blog</a>
<a href="https://sneexy.pages.gay/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
</div>
</div>
<nav class="nav-base nav-links">
<a href="https://sneexy.pages.gay"><i class="ph-bold ph-house"></i> home</a>
<i class="ph-bold ph-dot"></i>
@ -32,7 +38,7 @@
<i class="ph-bold ph-dot"></i>
<a href="https://sneexy.pages.gay/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
</nav>
<p class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
<p aria-hidden="true" class="nav-base nav-systray"><i class="ph-bold ph-bell"></i> <i class="ph-bold ph-speaker-high"></i> <i class="ph-bold ph-network"></i> <i class="ph-bold ph-battery-full"></i> <i class="ph-bold ph-power"></i></p>
</div>
<!-- simple introduction -->
@ -40,7 +46,7 @@
<!-- theres probably a much better way to do this instead of manually
having to use everything like *this*. maybe figure out how to do it all
without needing to use everything in a div so we can only just use <p class="term-title"> or something -->
<div class="term-titlebar">
<div aria-hidden="true" class="term-titlebar">
<i class="ph-fill ph-terminal"></i>
<p><a href="#sneexy">~/sneexy</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
@ -57,12 +63,12 @@
<p><small>i prefer listenbrainz though, <a href="#socials-and-contacts">see below</a></small></p>
</details>
</section>
<p class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/sneexy</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/sneexy</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
</div>
<!-- about me -->
<div id="about-me" class="terminal">
<div class="term-titlebar">
<div aria-hidden="true" class="term-titlebar">
<i class="ph-fill ph-terminal"></i>
<p><a href="#about-me">~/about-me</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
@ -80,12 +86,12 @@
<p>Certified™ idiot <small>(i think this one is obvious)</small></p>
<p>usually pretty tired and sometimes full of ideas that i just can't bring myself to execute for some reason.</p>
</section>
<p class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/about-me</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/about-me</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
</div>
<!-- socials -->
<div id="socials-and-contacts" class="terminal">
<div class="term-titlebar">
<div aria-hidden="true" class="term-titlebar">
<i class="ph-fill ph-terminal"></i>
<p><a href="#socials-and-contacts">~/socials-and-contacts</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
@ -147,12 +153,12 @@
</span>
</div>
</section>
<p class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/socials-and-contacts</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/socials-and-contacts</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
</div>
<!-- "fun" facts -->
<div id="fun-facts" class="terminal">
<div class="term-titlebar">
<div aria-hidden="true" class="term-titlebar">
<i class="ph-fill ph-terminal"></i>
<p><a href="#fun-facts">~/fun-facts</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
@ -168,12 +174,12 @@
<li>i am <i>still</i> <b><i>terrible</i></b> at spelling. still made mistakes even when making this site. online dictionaries my beloved.</li>
</ul>
</section>
<p class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/fun-facts</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/fun-facts</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
</div>
<!-- quotes -->
<div id="quotes" class="terminal">
<div class="term-titlebar">
<div aria-hidden="true" class="term-titlebar">
<i class="ph-fill ph-terminal"></i>
<p><a href="#quotes">~/quotes</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
@ -212,12 +218,12 @@
</span>
</div>
</section>
<p class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/quotes</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/quotes</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
</div>
<!-- buttons -->
<div id="buttons" class="terminal">
<div class="term-titlebar">
<div aria-hidden="true" class="term-titlebar">
<i class="ph-fill ph-terminal"></i>
<p><a href="#buttons">~/buttons</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
@ -292,7 +298,7 @@
<a href="https://www.youtube.com/@ScottTheWoz" target="_blank"><img loading="lazy" src="./assets/buttons/random/scotthere.gif" alt="Hey all, Scott here!" title="Hey all, Scott here!"></a>
</div>
</section>
<p class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/buttons</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
<p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/buttons</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
</div>
<!-- webrings and credits -->

20
script.js Normal file
View file

@ -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');
}
}
}
}

78
style.css
View file

@ -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;
}
}