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

add table of contents button

Browse source
This commit is contained in:
Ruben 2024-10-01 00:52:27 -05:00
commit dd8c404cae
No known key found for this signature in database
4 changed files with 145 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
fedi-guide/index.html
View file

@ -43,6 +43,18 @@
<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>
<!-- 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">
<ul>
<li>
<a href="#fedi-guide">welcome to... ruben's opinionated fediverse guide!</a>
</li>
</ul>
</div>
</div>
<!-- fedi guide introduction -->
<div id="fedi-guide" class="terminal">
<div aria-hidden="true" class="term-titlebar">

30
index.html
View file

@ -44,6 +44,36 @@
<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>
<!-- 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">
<ul>
<li>
<a href="#sneexy">hey, i'm ruben!</a>
</li>
<li>
<a href="#about-me">about me</a>
</li>
<li>
<a href="#socials-and-contacts">socials n' contacts</a>
</li>
<li>
<a href="#fun-facts">"fun" facts</a>
</li>
<li>
<a href="#quotes">quotes</a>
</li>
<li>
<a href="#buttons">buttons</a>
</li>
<li>
<a href="#css">custom css</a>
</li>
</ul>
</div>
</div>
<!-- simple introduction -->
<div id="sneexy" class="terminal">
<!-- theres probably a much better way to do this instead of manually

20
script.js
View file

@ -19,6 +19,26 @@ window.onclick = function(event) {
}
}
// 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>');

86
style.css
View file

@ -189,7 +189,7 @@ body {
text-decoration: underline !important;
}
.nav-systray {
background-color: var(--crust);
background-color: var(--base);
color: var(--text);
margin-left: auto !important;
margin-right: .5em !important;
@ -206,6 +206,78 @@ body {
}
}
/* table of contents button */
.toc {
display: flex;
flex-direction: row;
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;
font-family: "Lexend Deca";
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;
}
.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;
}
ul li {
margin-left: -.5em;
padding-bottom: unset !important;
}
i {
padding-right: .4em;
}
}
.show-dropdown {
display: block !important;
}
}
/* text formatting and config stuff
font-family and <p> is set under .terminal */
@ -322,8 +394,16 @@ details.styled[open] {
/* padding above first terminal */
.terminal:nth-child(2) {
margin-top: 3.8em;
body:has(div.toc) {
.terminal:nth-child(3) {
margin-top: 4.8em;
}
}
body:not(:has(div.toc)) {
.terminal:nth-child(2) {
margin-top: 3.8em;
}
}
/* footer/credits */