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

wip nonjs mobile dropdown

Browse source
This commit is contained in:
Ruben 2024-10-01 11:03:06 -05:00
commit b027f1f4fb
No known key found for this signature in database
2 changed files with 61 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

22
index.html
View file

@ -26,14 +26,20 @@
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-baselink" href="/"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
<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="/"><i class="ph-bold ph-house"></i> home</a>
<a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
<a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
</div>
</div>
<details class="nav-base nav-baselink-mobile">
<summary><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</summary>
<ul>
<li>
<a href="/"><i class="ph-bold ph-house"></i> home</a>
</li>
<li>
<a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
</li>
<li>
<a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
</li>
</ul>
</details>
<nav class="nav-base nav-links">
<a href="/"><i class="ph-bold ph-house"></i> home</a>
<i class="ph-bold ph-dot"></i>

82
style.css
View file

@ -171,7 +171,7 @@ body {
color: var(--crust);
margin-left: .5em !important;
}
.mobile-dropdown {
.nav-baselink-mobile {
display: none;
}
.nav-links {
@ -633,48 +633,60 @@ footer {
.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: block !important;
position: absolute;
margin: 2em 0px 0px .4em !important;
min-width: 2em;
border-radius: 8px;
z-index: 9999;
padding: unset !important;
box-shadow: unset !important;
top: -2em;
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;
}
ul {
background-color: var(--base);
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
border-radius: 8px;
li {
list-style-type: none;
margin-left: -2em;
padding-bottom: unset !important;
}
}
}
.nav-baselink-mobile summary {
display: block !important;
margin-top: 0px !important;
font-family: 'Lexend Deca', system-ui, sans-serif;
background-color: var(--green);
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
text-decoration: unset !important;
color: var(--crust);
margin-left: .4em !important;
border: unset !important;
padding: .3em;
border-radius: 8px;
i:not(:first-child) {
margin-left: -.5em;
margin-right: -.5em;
margin-right: -.9em;
opacity: .6;
}
}