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

finish the (pretty dirty tbh, clean later) nonjs dropdowns

Browse source
This commit is contained in:
Ruben 2024-10-01 12:11:47 -05:00
commit 9b66f37bd8
No known key found for this signature in database
4 changed files with 96 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

28
fedi-guide/index.html
View file

@ -25,14 +25,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>
@ -45,14 +51,14 @@
<!-- dedicated table of contents button -->
<div class="toc">
<button onclick="tocDropdown()" class="toc-button" alt="Table of Contents" title="Table of Contents"><i style="pointer-events:none;" class="ph-bold ph-list-bullets"></i></button>
<div id="toc-dropdown" class="toc-content">
<details>
<summary alt="Table of Contents" title="Table of Contents"><i style="pointer-events:none;" class="ph-bold ph-list-bullets"></i></summary>
<ul>
<li>
<a href="#fedi-guide">welcome to... ruben's opinionated fediverse guide!</a>
</li>
</ul>
</div>
</details>
</div>
<!-- fedi guide introduction -->

6
index.html
View file

@ -52,8 +52,8 @@
<!-- dedicated table of contents button -->
<div class="toc">
<button onclick="tocDropdown()" class="toc-button" alt="Table of Contents" title="Table of Contents"><i style="pointer-events:none;" class="ph-bold ph-list-bullets"></i></button>
<div id="toc-dropdown" class="toc-content">
<details>
<summary alt="Table of Contents" title="Table of Contents"><i style="pointer-events:none;" class="ph-bold ph-list-bullets"></i></summary>
<ul>
<li>
<a href="#sneexy">hey, i'm ruben!</a>
@ -77,7 +77,7 @@
<a href="#css">custom css</a>
</li>
</ul>
</div>
</details>
</div>
<!-- simple introduction -->

41
script.js
View file

@ -1,44 +1,3 @@
// 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');
}
}
}
}
// Same snippet as above, but for the Table of Contents of button.
function tocDropdown() {
document.getElementById("toc-dropdown").classList.toggle("show-dropdown");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.toc-button')) {
var dropdowns = document.getElementsByClassName("toc-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');
}
}
}
}
// TODO: Replace the above(s) with CSS?
// snippet that copies the html for my button(s)
function copyButtonRegular() {
navigator.clipboard.writeText ('<a href="https://sneexy.pages.gay"><img src="https://sneexy.pages.gay/assets/buttons/sneexy.png" alt="Sneexy" title="Sneexy"></a>');

135
style.css
View file

@ -208,76 +208,79 @@ body {
/* table of contents button */
.toc {
display: flex;
flex-direction: row;
.toc details {
display: block !important;
position: fixed;
top: 2.5rem;
z-index: 10;
max-width: 10rem;
min-height: 1.8em !important;
max-height: 1.8em !important;
margin-top: .5em;
float: left;
margin: 2em 0px 0px .4em !important;
min-width: 2em;
border-radius: 8px;
z-index: 9999;
padding: unset !important;
box-shadow: unset !important;
right: .5em;
top: 1em;
font-family: 'Lexend Deca', system-ui, sans-serif;
align-content: center;
vertical-align: middle;
color: var(--text);
.toc-button {
padding: 0px .4em !important;
border-radius: 8px;
border: .1rem solid var(--green);
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
max-width: fit-content;
align-content: center;
background-color: var(--base);
text-decoration: unset !important;
color: var(--green);
margin-left: .5em !important;
a {
display: inline-flex;
align-items: center;
color: var(--text);
padding: .6em .7em;
text-decoration: none;
}
.toc-content {
display: none;
position: absolute;
margin: 2.2em 0px 0px .4em !important;
background-color: var(--base);
min-width: 10em;
width: 30rem;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
z-index: 1;
ul li a {
display: inline-flex;
align-items: center;
color: var(--text);
padding: .2em .5em;
text-decoration: none;
}
ul li a:hover {
color: var(--green);
text-decoration: underline;
}
a:hover {
color: var(--green);
text-decoration: underline;
}
ul li {
i {
padding-right: .4em;
}
ul {
background-color: var(--base);
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
border-radius: 8px;
margin-top: 2.5em;
max-width: 40em;
width: max-content;
z-index: 9999;
li {
margin-left: -.5em;
padding-bottom: unset !important;
}
i {
padding-right: .4em;
li::marker {
color: var(--text);
}
}
}
.show-dropdown {
display: block !important;
.toc details summary {
display: block !important;
right: 0em !important;
position: absolute;
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);
padding: .3em;
border-radius: 8px;
width: 2.5em;
i:not(:first-child) {
margin-left: -.5em;
margin-right: -.9em;
opacity: .6;
}
}
.toc details summary::after {
margin-left: unset;
}
/* text formatting and config stuff
font-family and <p> is set under .terminal */
@ -637,7 +640,8 @@ footer {
display: block !important;
position: absolute;
margin: 2em 0px 0px .4em !important;
min-width: 2em;
max-width: 40em;
width: max-content;
border-radius: 8px;
z-index: 9999;
padding: unset !important;
@ -665,6 +669,9 @@ footer {
background-color: var(--base);
box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 15px;
border-radius: 8px;
max-width: 10em;
width: auto;
z-index: 9999;
li {
list-style-type: none;
@ -683,6 +690,7 @@ footer {
color: var(--crust);
padding: .3em;
border-radius: 8px;
width: 6.4em;
i:not(:first-child) {
margin-left: -.5em;
@ -695,9 +703,18 @@ footer {
}
}
.terminal:nth-child(2) {
margin-top: 2.8em;
body:has(.toc) {
.terminal:nth-child(3) {
margin-top: 5.4em !important;
}
}
body:not(:has(.toc)) {
.terminal:nth-child(2) {
margin-top: 2.7em !important;
}
}
.terminal {
.term-titlebar {
margin: -16px 0px -24px;