add more styling
This commit is contained in:
parent
6e0f46f1b1
commit
1877f252a8
|
|
@ -1,59 +1,164 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>~a</title>
|
<title>~a</title>
|
||||||
<meta name="description" content="a's domain">
|
<meta name="description" content="a's domain">
|
||||||
<meta name="author" content="a (a@trwnh.com)">
|
<meta name="author" content="a (a@trwnh.com)">
|
||||||
<link rel="icon apple-touch-icon shortcut" href="/icon.png" sizes="400x400">
|
<link rel="icon apple-touch-icon shortcut" href="/icon.png" sizes="400x400">
|
||||||
<link rel="me" href="mailto:a@trwnh.com">
|
<link rel="me" href="mailto:a@trwnh.com">
|
||||||
<link rel="me" href="https://mastodon.social/@trwnh">
|
<link rel="me" href="https://mastodon.social/@trwnh">
|
||||||
<link rel="me" href="https://abdullahtarawneh.com">
|
<link rel="me" href="https://abdullahtarawneh.com">
|
||||||
<style>
|
<style>
|
||||||
html {line-height: 1.711; font-family: sans-serif}
|
html {
|
||||||
body {max-inline-size: 80ch; padding: 0; margin: 0; box-sizing: border-box}
|
line-height: 1.711;
|
||||||
main > * {padding-inline: 1rem;}
|
font-family: sans-serif;
|
||||||
section {margin-block: 4rem;}
|
}
|
||||||
section > section {margin-block: 2rem;}
|
|
||||||
/* color scheme */
|
body {
|
||||||
html {
|
max-inline-size: 80ch;
|
||||||
--color-fg: hsl(210, 100%, 20%);
|
padding: 0;
|
||||||
--color-bg: hsl(210, 100%, 90%);
|
margin: 0;
|
||||||
--color-link: hsl(210, 100%, 35%);
|
box-sizing: border-box;
|
||||||
--color-visited: hsl(270, 80%, 35%);
|
}
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
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 {
|
html {
|
||||||
--color-fg: hsl(210, 100%, 90%);
|
--color-fg: hsl(210, 100%, 90%);
|
||||||
--color-bg: hsl(210, 100%, 10%);
|
--color-bg: hsl(210, 100%, 10%);
|
||||||
|
--color-titlebar: hsl(210, 100%, 20%);
|
||||||
--color-link: hsl(210, 100%, 65%);
|
--color-link: hsl(210, 100%, 65%);
|
||||||
--color-visited: hsl(270, 100%, 75%);
|
--color-visited: hsl(270, 100%, 75%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
html {background: var(--color-bg); color: var(--color-fg);}
|
|
||||||
a:link {color: var(--color-link)}
|
html {
|
||||||
a:visited {color: var(--color-visited)}
|
background: var(--color-bg);
|
||||||
aside {opacity: 0.8; font-size: 0.8em;}
|
color: var(--color-fg);
|
||||||
/* 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}
|
/* links */
|
||||||
figure blockquote {line-height: 1.4; font-family: serif; border: 0;}
|
a:link {
|
||||||
figcaption {font-size: 0.8em;}
|
color: var(--color-link);
|
||||||
/* float a lil quotey before the quote */
|
text-decoration-thickness: 0.125rem;
|
||||||
figure {position: relative;}
|
text-underline-offset: 0.25rem;
|
||||||
figure blockquote:before {content: '“'; position: absolute; inset-block-start: 0.25rem; inset-inline-start: 0.5rem; font-size: 2rem;}
|
transition-duration: 100ms;
|
||||||
/* 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;}
|
a:link:hover {
|
||||||
</style>
|
text-underline-offset: 0.375rem;
|
||||||
|
text-decoration-thickness: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: var(--color-visited);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* basic element styling */
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main class="h-card">
|
<main class="h-card vcard">
|
||||||
<header>
|
<header>
|
||||||
<h1>~<span class="p-nickname p-name">a</span></h1>
|
<h1>~<span class="p-nickname p-name nickname fn">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>
|
<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>
|
</header>
|
||||||
<section id="contact">
|
<section id="contact">
|
||||||
<h2>contact me</h2>
|
<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>
|
<dt>Chat (XMPP)</dt>
|
||||||
<dd><a href="xmpp:a@trwnh.com" rel="me" class="u-impp">a@trwnh.com</a></dd>
|
<dd><a href="xmpp:a@trwnh.com" rel="me" class="u-impp">a@trwnh.com</a></dd>
|
||||||
<dt>Mail (SMTP)</dt>
|
<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>
|
<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>
|
</dl>
|
||||||
</section>
|
</section>
|
||||||
<section id="soup">
|
<section id="soup">
|
||||||
<h2>loosely categorized soup</h2>
|
<h2>loosely categorized soup</h2>
|
||||||
<section>
|
<section>
|
||||||
<h3>general stuff</h3>
|
<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>
|
</p>
|
||||||
<aside>
|
<aside>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -80,7 +185,7 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h3>concert/music/band stuff</h3>
|
<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>
|
<figure>
|
||||||
<blockquote>
|
<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>
|
<h4>links to some of my concert/music/band stuff</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<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>
|
||||||
<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>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -148,10 +253,10 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
|
||||||
<h4>links to gameing stuff</h4>
|
<h4>links to gameing stuff</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<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>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</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>
|
<h4>look at this computer stuff</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<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>
|
||||||
<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>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -188,12 +293,12 @@ dd {font-family: monospace; font-size: 1rem; margin-inline-start: 0; margin-bloc
|
||||||
<h4>donate directly</h4>
|
<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>
|
<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>
|
<ul>
|
||||||
<li>you can <a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg">donate via stripe</a> through that handy web form.</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" 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 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">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 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>
|
</ul>
|
||||||
<h4>hire me to do something for you</h4>
|
<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>
|
<ul>
|
||||||
<li>
|
<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.
|
<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,16 +340,17 @@ 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>
|
<h2>done here? check out some other things if you want</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<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>
|
||||||
<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>
|
||||||
<li>
|
<li>
|
||||||
no seriously <a href="#support">i need money</a> aaaa
|
no seriously <a href="#support">i need money</a> aaaa
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue