add clickable anchors inside headers
This commit is contained in:
parent
6d50c2240b
commit
8220bc0cd1
2 changed files with 16 additions and 4 deletions
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<div class="pixel-corners">
|
||||
<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>
|
||||
|
||||
<main class="fedi">
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
|
||||
<div class="pixel-corners">
|
||||
<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 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>
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
|
||||
<div class="pixel-corners">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
<p>made with love, lack of sleep and procrastination</p>
|
||||
</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>
|
||||
|
||||
|
||||
|
|
|
|||
12
style.css
12
style.css
|
|
@ -349,6 +349,18 @@ footer > a {
|
|||
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 {
|
||||
color: var(--accent-1);
|
||||
text-shadow: 0px 0px 8px var(--accent-1);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue