Replace site index text with bulleted list

also style improvements and minor fixes:
- use different colors for headers and links in dark mode
- use dash as list marker thingie
- fix main content column width to 80 characters at most
This commit is contained in:
Riley Apeldoorn 2025-04-03 20:01:26 +02:00
parent 2f1d174156
commit df408aba18
2 changed files with 45 additions and 31 deletions

View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>ezri's page! 🐶✨</title>
<title>ezri's site! 🐶✨</title>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
@ -9,38 +9,36 @@
</head>
<body>
<header>
<h1> riley's page</h1>
<p> beep boop! welcome to my web site. i made it myself using my favorite editor, helix.
i hope you enjoy! :)
<h1> riley's site!</h1>
<p> beep boop! welcome to my web site. i made it by hand using my favorite editor, helix.
i hope you like it! :)
</p>
<p> i'm a non-binary puppyboy living in the Netherlands. i like to play around with
computers and languages and i program Haskell, Rust and PHP for a living. i'm in my
early twenties.
</p>
<p> one may use any pronouns in reference to me. i suggest it/its or they/them.
i prefer my names rendered uncapitalized, but i won't get mad if you don't do that.
in toki pona, use <i>ilo</i> or <i>soweli</i> as my headnoun.
</p>
<h2 style="font-size: 1em"> other pages on this web sight: </h2>
<p> some quick riley facts: </p>
<ul>
<li> also goes by ezri or azrael </li>
<li> uses any pronouns (suggestion: it/its or they/them) </li>
<li> uses <i>ilo</i> or <i>soweli</i> headnouns </li>
<li> touches computers for work and recreationally </li>
<li> loves being outside and kissing boys in a bisexual manner </li>
<li> is transgender and also puppy </li>
<li> lives in the netherlands </li>
</ul>
</header>
<section>
<nav>
<h2> other pages </h2>
<p> check out the other pages on my web sight! </p>
<ul>
<li> <a href="cool-stuff.html">cool stuff</a>: a list of stuff i think is neat </li>
<li> more to come... </li>
</ul>
</nav>
</header>
<section id="interests">
<h2> interests </h2>
<p> my hobbies are touching computers (sometimes), learning languages (i'm not super good
at it but that's okay) and being a puppy on the internet. i also like cooking, reading
and hanging out in the local forest.
</p>
<p> i also play magic: the gathering. i like to play technical, controlling decks. </p>
</section>
<section id="contact">
<h2> elsewhere </h2>
<p> come say hi! <3 </p>
<p> come say hi! &lt;3 </p>
<ul>
<li> fediverse, at <a href="https://tech.lgbt/@azrael">azrael@tech.lgbt</a> </li>
<li> fedi, at <a href="https://tech.lgbt/@azrael">azrael@tech.lgbt</a> </li>
<li> matrix, at <a href="https://matrix.to/#/@riley:badat.dev">riley:badat.dev</a> </li>
<li> email, at <b>hi (at) this domain</b> </li>
<li> signal available upon request </li>

View file

@ -1,17 +1,14 @@
body {
font-family: Fira Code, Fira Mono, monospace;
background-color: #fafafa;
width: 80%;
width: min(80vw, 80ch);
margin: auto;
min-width: 280px;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #212121;
color: #ffffff;
}
ul {
padding-left: 2.5ch;
list-style-type: "- ";
}
section, header {
@ -21,10 +18,29 @@ section, header {
h1 {
color: #be67f9;
font-size: 2em;
margin: 2.5rem 0;
margin: 2rem 0;
}
h2 {
font-size: 1.2em;
}
a {
color: #ff61b5;
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #212121;
color: #ffffff;
}
h1 {
color: #ff61b5;
}
a {
color: #1bd4ff;
}
}