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

chore: add anchored links

Browse source
This commit is contained in:
Ruben 2024-04-19 23:26:23 -05:00
commit 69199641f9
No known key found for this signature in database
GPG key ID: AE181294E97E4802
2 changed files with 31 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

32
index.html
View file

@ -20,16 +20,16 @@
<body>
<!-- simple introduction -->
<div class="terminal">
<div id="sneexy" class="terminal">
<!-- theres probably a much better way to do this instead of manually
having to use everything like *this*. maybe figure out how to do it all
without needing to use everything in a div so we can only just use <p class="term-title"> or something -->
<div class="term-titlebar">
<img src="./assets/terminal.svg">
<p>~/sneexy</p>
<p><a href="#sneexy">~/sneexy</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<article id="sneexy">
<article>
<img src="./assets/me.png" onmouseover="this.src='./assets/petpet_flip.gif'" onmouseout="this.src='./assets/me.png'" alt="Crudely drawn picture of a synth character, looking derpy and staring at the viewer with a large green eye. Their body is mostly colored with shades of grey and accents of green." title="Crudely drawn picture of a synth character, looking derpy and staring at the viewer with a large green eye. Their body is mostly colored with shades of grey and accents of green.">
<h1>hey, i'm <span class="rainbow">ruben!</span></h1>
<small>cheesed to meet ya.</small>
@ -38,14 +38,14 @@
</div>
<!-- about me -->
<div class="terminal">
<div id="about-me" class="terminal">
<div class="term-titlebar">
<img src="./assets/terminal.svg">
<p>~/about-me</p>
<p><a href="#about-me">~/about-me</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<article id="about-me">
<h1>about me</h1>
<article>
<h1><a href="#about-me">about me</a></h1>
<p>i'm your "average" 17 year old <span class="rainbow">gay</span> foss enjoyer.</p>
<p>i enjoy messing around with technology, unique and retro, or when it's not being stupid and ruined by "modernity" or corporations.</p>
<p>i'm a nerd into <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">free and open source</a> software and privacy stuff, along with other libre things. i'm not a programmer or anything, though.</p>
@ -58,14 +58,14 @@
</div>
<!-- "fun" facts -->
<div class="terminal">
<div id="fun-facts" class="terminal">
<div class="term-titlebar">
<img src="./assets/terminal.svg">
<p>~/fun-facts</p>
<p><a href="#fun-facts">~/fun-facts</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<article id="about-me">
<h1>"fun" facts</h1>
<article>
<h1><a href="#fun-facts">"fun" facts</a></h1>
<ul>
<li>my profile pictures used to be random characters from different types of media that i would just grayscaled. ever since then, i realized that i've very much enjoyed being a <a href="https://synthspecies.com/" target="_blank">synth</a> instead.</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>
@ -78,14 +78,14 @@
</div>
<!-- buttons -->
<div class="terminal">
<div id="buttons" class="terminal">
<div class="term-titlebar">
<img src="./assets/terminal.svg">
<p>~/buttons</p>
<p><a href="#buttons">~/buttons</a></p>
<div> <div id="minimize-btn"></div> <div id="maximize-btn"></div> <div id="close-btn"></div> </div>
</div>
<article id="buttons">
<h1>buttons</h1>
<article>
<h1><a href="#buttons">buttons</a></h1>
<p>fun little 88x31 buttons! all goes to awesome friends and some cool websites! <small>friends listed alphabetically. <span style="color: var(--red);">if any are broken and/or missing, poke me.</span> <span style="color: var(--green);">last 2 friend buttons are mine! please hotlink whichever you like!</span></small></p>
<div class="buttons">
<!--
@ -137,7 +137,7 @@
<!-- webrings and credits -->
<footer>
<div class="terminal">
<div id="webring-credits" class="terminal">
<p><a href="https://git.gay/sneexy/pages" target="_blank">website source</a> (feel free to copy! 💚)</p>
<p><a href="https://catppuccin.com" target="_blank">Catppuccin</a> <a href="https://raw.githubusercontent.com/catppuccin/catppuccin/main/LICENSE" target="_blank">license</a> 💜</p>
<p><a href="https://www.jetbrains.com/lp/mono" target="_blank">JBM</a> <a href="./assets/fonts/JetBrainsMono/OFL.txt" target="_blank">license</a>/<a href="./assets/fonts/JetBrainsMono/AUTHORS.txt" target="_blank">authors</a></p>

18
style.css
View file

@ -183,9 +183,12 @@ styling of the terminal windows
}
/* title text */
p {
p, a {
font-family: "Lexend Deca";
font-size: 16px;
color: var(--text);
text-decoration: none;
grid-column: 2;
}
@ -273,6 +276,9 @@ styling of the terminal windows
transition: .2s border-color;
}
.terminal > .term-titlebar > p:hover, a:hover {
text-decoration: underline;
}
/*
text formatting and config stuff
@ -280,8 +286,10 @@ font-family and <p> is set under .terminal
*/
/* the only headings i use */
h1 {
h1, h1 a {
color: var(--text);
font-size: 32px;
text-decoration: none;
}
h2 {
font-size: 28px;
@ -311,6 +319,10 @@ li {
.rainbow {
animation: 2s linear infinite rainbow;
}
/* heading 1 is also clickable */
h1 a:hover {
text-decoration: underline;
}
/*
about me section/terminal
@ -319,7 +331,7 @@ about me section/terminal
margin-top: 3.8em;
}
article#sneexy {
#sneexy > article {
img {
width: 256px;
height: 256px;