sites/trwnh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

add more styling

Browse source
This commit is contained in:
a 2024-06-05 10:28:50 -05:00
parent 6e0f46f1b1
commit 1877f252a8
1 changed files with 331 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
public/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,48 +13,152 @@
<link rel="me" href="https://mastodon.social/@trwnh">
<link rel="me" href="https://abdullahtarawneh.com">
<style>
html {line-height: 1.711; font-family: sans-serif}
body {max-inline-size: 80ch; padding: 0; margin: 0; box-sizing: border-box}
main > * {padding-inline: 1rem;}
section {margin-block: 4rem;}
section > section {margin-block: 2rem;}
html {
line-height: 1.711;
font-family: sans-serif;
}
body {
max-inline-size: 80ch;
padding: 0;
margin: 0;
box-sizing: border-box;
}
main > * {
padding-inline: 1rem;
}
section {
margin-block: 4rem;
}
section > section {
margin-block: 2rem;
}
/* color scheme */
html {
--color-fg: hsl(210, 100%, 20%);
--color-bg: hsl(210, 100%, 90%);
--color-titlebar: hsl(210, 100%, 80%);
--color-link: hsl(210, 100%, 35%);
--color-visited: hsl(270, 80%, 35%);
}
@media (prefers-color-scheme: dark) {
html {
--color-fg: hsl(210, 100%, 90%);
--color-bg: hsl(210, 100%, 10%);
--color-titlebar: hsl(210, 100%, 20%);
--color-link: hsl(210, 100%, 65%);
--color-visited: hsl(270, 100%, 75%);
}
}
html {background: var(--color-bg); color: var(--color-fg);}
a:link {color: var(--color-link)}
a:visited {color: var(--color-visited)}
aside {opacity: 0.8; font-size: 0.8em;}
html {
background: var(--color-bg);
color: var(--color-fg);
}
/* links */
a:link {
color: var(--color-link);
text-decoration-thickness: 0.125rem;
text-underline-offset: 0.25rem;
transition-duration: 100ms;
}
a:link:hover {
text-underline-offset: 0.375rem;
text-decoration-thickness: 0.25rem;
}
a:visited {
color: var(--color-visited);
}
/* basic element styling */
blockquote {border-inline-start: 2px solid currentColor; margin-inline-start: 0; padding-inline-start: 1rem}
figure {padding: 1rem; margin-inline: 0; border: 1px solid currentColor}
figure blockquote {line-height: 1.4; font-family: serif; border: 0;}
figcaption {font-size: 0.8em;}
h2 {
background-color: var(--color-titlebar);
padding: 1rem;
margin-left: -1rem;
border-radius: 0 100rem 100rem 0;
}
h3 {
text-decoration-style: solid;
text-decoration-color: var(--color-titlebar);
text-decoration-line: underline;
text-decoration-thickness: 0.5rem;
text-decoration-skip-ink: none;
text-underline-offset: 0rem;
}
section {
padding-inline-start: 1rem;
}
aside {
opacity: 0.6;
font-size: 0.8em;
}
blockquote {
border-inline-start: 2px solid currentColor;
margin-inline-start: 0;
padding-inline-start: 1rem;
}
figure {
padding: 1rem;
margin-inline: 0;
border: 1px solid currentColor;
}
figure blockquote {
line-height: 1.4;
font-family: serif;
border: 0;
}
figcaption {
font-size: 0.8em;
}
/* float a lil quotey before the quote */
figure {position: relative;}
figure blockquote:before {content: '“'; position: absolute; inset-block-start: 0.25rem; inset-inline-start: 0.5rem; font-size: 2rem;}
figure {
position: relative;
}
figure blockquote:before {
content: '“';
position: absolute;
inset-block-start: 0.25rem;
inset-inline-start: 0.5rem;
font-size: 2rem;
}
/* style the contact section */
dt {font-weight: bold}
dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-block-start: 0; margin-block-end: 1rem;}
dt {
font-weight: bold;
}
dd {
font-family: monospace;
font-size: 1rem;
margin-inline-start: 0;
margin-block-start: 0;
margin-block-end: 1rem;
}
</style>
</head>
<body>
<main class="h-card">
<main class="h-card vcard">
<header>
<h1>~<span class="p-nickname p-name">a</span></h1>
<p class="p-note">i have approximate knowledge of many things. perpetual student. (<span class="p-gender-identity">nb</span>/ace/<span class="p-pronouns">they</span>)</p>
<h1>~<span class="p-nickname p-name nickname fn">a</span></h1>
<p class="p-note note">i have approximate knowledge of many things. perpetual student. (<span class="p-gender-identity">nb</span>/ace/<span class="p-pronouns">they</span>)</p>
</header>
<section id="contact">
<h2>contact me</h2>
@ -61,16 +166,16 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
<dt>Chat (XMPP)</dt>
<dd><a href="xmpp:a@trwnh.com" rel="me" class="u-impp">a@trwnh.com</a></dd>
<dt>Mail (SMTP)</dt>
<dd><a href="mailto:a@trwnh.com" rel="me" class="u-email">a@trwnh.com</a></dd>
<dd><a href="mailto:a@trwnh.com" rel="me" class="u-email email">a@trwnh.com</a></dd>
<dt>Social (ActivityPub)</dt>
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="u-url">mastodon.social/@trwnh</a></dd>
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="u-url url">mastodon.social/@trwnh</a></dd>
</dl>
</section>
<section id="soup">
<h2>loosely categorized soup</h2>
<section>
<h3>general stuff</h3>
<p>you can probably find me around the web with the username "<span class="p-name p-nickname">trwnh</span>". it comes from my fleshform's legal name, "<span class="p-name"><span class="p-given-name">abdullah</span> <span class="p-family-name">tarawneh</span></span>"; just take the vowels out of the family name. 2014 they was so hipster. although nowadays "i" mostly just go by "a". historically i've had a really tough time with identity, so this is the best we're gonna get i guess.
<p>you can probably find me around the web with the username "<span class="p-name p-nickname fn nickname">trwnh</span>". it comes from my fleshform's legal name, "<span class="p-name fn"><span class="p-given-name given-name">abdullah</span> <span class="p-family-name family-name">tarawneh</span></span>"; just take the vowels out of the family name. 2014 they was so hipster. although nowadays "i" mostly just go by "a". historically i've had a really tough time with identity, so this is the best we're gonna get i guess.
</p>
<aside>
<p>
@ -80,7 +185,7 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
</section>
<section>
<h3>concert/music/band stuff</h3>
<p>i've used the names "<span class="p-nickname">obvious_humor</span>"/"<span class="p-nickname">obvioushumor</span>" for my vaguely music/band fandom stuff, and "<span class="p-nickname">birdsounds</span>" for more creative stuff like my concert photography. both names are references to lyrics by <a href="https://circasurvive.com">Circa Survive</a>, one of my favorite bands.</p>
<p>i've used the names "<span class="p-nickname nickname">obvious_humor</span>"/"<span class="p-nickname nickname">obvioushumor</span>" for my vaguely music/band fandom stuff, and "<span class="p-nickname nickname">birdsounds</span>" for more creative stuff like my concert photography. both names are references to lyrics by <a href="https://circasurvive.com">Circa Survive</a>, one of my favorite bands.</p>
<figure>
<blockquote>
@ -126,13 +231,13 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
<h4>links to some of my concert/music/band stuff</h4>
<ul>
<li>
<a href="https://birdsounds.media" rel="me" class="u-url">birdsounds.media</a> -- my concert photography.
<a href="https://birdsounds.media" rel="me" class="u-url url">birdsounds.media</a> -- my concert photography.
</li>
<li>
<a href="https://www.youtube.com/@obvious_humor" rel="me" class="u-url">youtube.com/@obvious_humor</a> -- my concert videos. (also my de facto main youtube channel, but my youtube presence is really messy)
<a href="https://www.youtube.com/@obvious_humor" rel="me" class="u-url url">youtube.com/@obvious_humor</a> -- my concert videos. (also my de facto main youtube channel, but my youtube presence is really messy)
</li>
<li>
<a href="https://society6.com/trwnh" rel="me" class="u-url">society6.com/trwnh</a> -- on-demand custom merch printing service for my concert photos. (i haven't uploaded all my good photos there but there are a few. ask me if you'd like to buy a print of one of my other photos, and i can upload it.)
<a href="https://society6.com/trwnh" rel="me" class="u-url url">society6.com/trwnh</a> -- on-demand custom merch printing service for my concert photos. (i haven't uploaded all my good photos there but there are a few. ask me if you'd like to buy a print of one of my other photos, and i can upload it.)
</li>
</ul>
</section>
@ -148,10 +253,10 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
<h4>links to gameing stuff</h4>
<ul>
<li>
<a href="https://twitch.tv/triggerofsol" rel="me" class="u-url">twitch.tv/triggerofsol</a> -- retro video game streams. (de facto defunct)
<a href="https://twitch.tv/triggerofsol" rel="me" class="u-url url">twitch.tv/triggerofsol</a> -- retro video game streams. (de facto defunct)
</li>
<li>
i guess you can also add me on <a href="https://steamcommunity.com/id/triggerofsol" rel="me" class="u-url">steam (triggerofsol)</a> if you need to or want to?
i guess you can also add me on <a href="https://steamcommunity.com/id/triggerofsol" rel="me" class="u-url url">steam (triggerofsol)</a> if you need to or want to?
</li>
</ul>
</section>
@ -169,13 +274,13 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
<h4>look at this computer stuff</h4>
<ul>
<li>
<a href="https://git.trwnh.com/a" rel="me" class="u-url">git.trwnh.com</a> -- personal stuff goes here
<a href="https://git.trwnh.com/a" rel="me" class="u-url url">git.trwnh.com</a> -- personal stuff goes here
</li>
<li>
<a href="https://github.com/trwnh" rel="me" class="u-url">github.com/trwnh</a> -- this is where pretty much everyone is forced to collaborate due to network effects, so that's where you can find my contributions i guess
<a href="https://github.com/trwnh" rel="me" class="u-url url">github.com/trwnh</a> -- this is where pretty much everyone is forced to collaborate due to network effects, so that's where you can find my contributions i guess
</li>
<li>
<a href="https://socialhub.activitypub.rocks/u/trwnh" rel="me" class="u-url">SocialHub</a> -- this is the forum where ActivityPub and the fediverse get discussed a lot
<a href="https://socialhub.activitypub.rocks/u/trwnh" rel="me" class="u-url url">SocialHub</a> -- this is the forum where ActivityPub and the fediverse get discussed a lot
</li>
</ul>
</section>
@ -188,12 +293,12 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
<h4>donate directly</h4>
<p>here's how this one works: you can just give me money. i'll keep doing the stuff i do. this option is good if you already think the stuff i do is cool and worthwhile and valuable without me needing to convince you.</p>
<ul>
<li>you can <a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg">donate via stripe</a> through that handy web form.</li>
<li>you can back me on <a href="https://liberapay.com/trwnh" rel="me" class="u-url">liberapay.com/trwnh</a> via bank, card, stripe or paypal. liberapay is a bit weird with how it processes payments, but you generally have an option to do "automatic renewal" or "manual renewal". you can do manual renewal and then cancel the subscription if you want to do a one-time payment.</li>
<li>you can also donate via <a href="https://paypal.me/obvioushumor">paypal: tarawneh.abdullah@gmail.com</a> if you prefer paypal for some reason. i'm not sure if that paypal.me link charges extra fees, so you might need to do it manually, and if so, make sure to select "friends and family" instead of "business".</li>
<li>you can <a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg" rel="payment">donate via stripe</a> through that handy web form.</li>
<li>you can back me on <a href="https://liberapay.com/trwnh" rel="me payment" class="u-url url">liberapay.com/trwnh</a> via bank, card, stripe or paypal. liberapay is a bit weird with how it processes payments, but you generally have an option to do "automatic renewal" or "manual renewal". you can do manual renewal and then cancel the subscription if you want to do a one-time payment.</li>
<li>you can also donate via <a href="https://paypal.me/obvioushumor" rel="payment">paypal: tarawneh.abdullah@gmail.com</a> if you prefer paypal for some reason. i'm not sure if that paypal.me link charges extra fees, so you might need to do it manually, and if so, make sure to select "friends and family" instead of "business".</li>
</ul>
<h4>hire me to do something for you</h4>
<p>i can explain things and i can do websites. generally, i'm really really really good at thinking things through and analyzing them. i put stuff up on <a href="https://abdullahtarawneh.com" rel="me" class="u-url">abdullahtarawneh.com</a> last year and i kinda stalled due to a lot going on in my life and not much going on marketably. but maybe check out the following pages:</p>
<p>i can explain things and i can do websites. generally, i'm really really really good at thinking things through and analyzing them. i put stuff up on <a href="https://abdullahtarawneh.com" rel="me" class="u-url url">abdullahtarawneh.com</a> last year and i kinda stalled due to a lot going on in my life and not much going on marketably. but maybe check out the following pages:</p>
<ul>
<li>
<a href="https://abdullahtarawneh.com/work">Work</a> -- the landing page i made that was intended to get people to hire me or contract me. not really happy with it at the moment, but still worth looking at.
@ -235,10 +340,10 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
<h2>done here? check out some other things if you want</h2>
<ul>
<li>
<a href="https://wiki.trwnh.com" rel="me" class="u-url">wiki.trwnh.com</a> -- a place to dump my thoughts
<a href="https://wiki.trwnh.com" rel="me" class="u-url url">wiki.trwnh.com</a> -- a place to dump my thoughts
</li>
<li>
<a href="https://obvious-humor.com" rel="me" class="u-url">tumblr</a> -- i kinda don't use this anymore but idk where else to put this link on this page :x
<a href="https://obvious-humor.com" rel="me" class="u-url url">tumblr</a> -- i kinda don't use this anymore but idk where else to put this link on this page :x
</li>
<li>
no seriously <a href="#support">i need money</a> aaaa
@ -247,4 +352,5 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
</section>
</main>
</body>
</html>