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:
parent
2f1d174156
commit
df408aba18
2 changed files with 45 additions and 31 deletions
44
index.html
44
index.html
|
@ -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! <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>
|
||||
|
|
32
style.css
32
style.css
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue