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

add clickable anchors inside headers

Browse source
This commit is contained in:
Ruben 2023-11-06 10:27:31 -06:00
commit 8220bc0cd1
No known key found for this signature in database
2 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -30,7 +30,7 @@
<div class="pixel-corners"> <div class="pixel-corners">
<article id="links" class="links-n-socials"> <article id="links" class="links-n-socials">
<h1>~/links-n-socials</h1> <h1><span class="anchors"><a href="#links">~/links-n-socials</a></span></h1>
<small>(in order of most prefered to least prefered! <span class="dot">●</span> some of these have extra info you can find by clicking their icons)</small> <small>(in order of most prefered to least prefered! <span class="dot">●</span> some of these have extra info you can find by clicking their icons)</small>
<main class="fedi"> <main class="fedi">
@ -150,7 +150,7 @@
<div class="pixel-corners"> <div class="pixel-corners">
<article id="about-me" class="about-me"> <article id="about-me" class="about-me">
<h1>~/about-me</h1> <h1><span class="anchors"><a href="#about-me">~/about-me</a></span></h1>
<p>i'm your "average" 17 year old <a href="https://en.wikipedia.org/wiki/Gay_men" target="_blank">gay</a> foss enjoyer.</p> <p>i'm your "average" 17 year old <a href="https://en.wikipedia.org/wiki/Gay_men" target="_blank">gay</a> foss enjoyer.</p>
<p>i enjoy messing around with random technology things, especially retro and unique things. modern tech things too depending on how much i can actually do with them.</p> <p>i enjoy messing around with random technology things, especially retro and unique things. modern tech things too depending on how much i can actually do with them.</p>
<p>as my subtitle says, i love me some <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">FOSS</a> and privacy stuff although i don't think i nerd too much over it, i will prefer it over anything. not a programmer or anything special though.</p> <p>as my subtitle says, i love me some <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">FOSS</a> and privacy stuff although i don't think i nerd too much over it, i will prefer it over anything. not a programmer or anything special though.</p>
@ -164,7 +164,7 @@
<div class="pixel-corners"> <div class="pixel-corners">
<article id="fun-facts" class="fun-facts"> <article id="fun-facts" class="fun-facts">
<h1>~/fun-facts</h1> <h1><span class="anchors"><a href="#fun-facts">~/fun-facts</a></span></h1>
<ul> <ul>
<li>my profile pictures are usually random characters from different types of media that i grayscale and use as my profile picture. my current phase is <a href="https://www.mariowiki.com/Yoshi" target="_blank">yoshi</a>.</li> <li>my profile pictures are usually random characters from different types of media that i grayscale and use as my profile picture. my current phase is <a href="https://www.mariowiki.com/Yoshi" target="_blank">yoshi</a>.</li>
<li>i used to have a joke where i loved cheese, in a "i cannot live with cheese, give me the cheese or i die" way. technically the joke does still exist to some extent in a friend group, but otherwise has mostly died out. 🧀</li> <li>i used to have a joke where i loved cheese, in a "i cannot live with cheese, give me the cheese or i die" way. technically the joke does still exist to some extent in a friend group, but otherwise has mostly died out. 🧀</li>
@ -185,7 +185,7 @@
<p>made with love, lack of sleep and procrastination</p> <p>made with love, lack of sleep and procrastination</p>
</footer> </footer>
<img class="yoshi" src="/assets/yoshi.gif" alt="GIF of a dancing yoshi" /> <img id="yoshi" class="yoshi" src="/assets/yoshi.gif" alt="GIF of a dancing yoshi" />
</div> </div>

12
style.css
View file

@ -349,6 +349,18 @@ footer > a {
font-size: 16px; font-size: 16px;
} }
.anchors, .anchors > a {
color: var(--header);
font-size: 32px;
text-shadow: 0px 0px 14px var(--accent-1);
margin: 0px 0px 5px;
text-decoration: none;
}
.anchors:hover, .anchors > a:hover {
text-decoration: underline;
}
.links-n-socials > .fedi > .dot, .links-n-socials > .messaging > .dot, .links-n-socials > .platforms > .dot, .links-n-socials > .misc > .dot { .links-n-socials > .fedi > .dot, .links-n-socials > .messaging > .dot, .links-n-socials > .platforms > .dot, .links-n-socials > .misc > .dot {
color: var(--accent-1); color: var(--accent-1);
text-shadow: 0px 0px 8px var(--accent-1); text-shadow: 0px 0px 8px var(--accent-1);