WIP: more idk
This commit is contained in:
parent
ba18d2e27f
commit
bdde3cd49f
34 changed files with 606 additions and 532 deletions
|
|
@ -1,3 +1,5 @@
|
|||
@import "mixins/prepend-icon";
|
||||
|
||||
@import "common/reset";
|
||||
@import "common/colors";
|
||||
@import "common/base";
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
@import "components/quote-block";
|
||||
@import "components/codeblock";
|
||||
@import "components/alt-formats";
|
||||
@import "components/figure-with-blockquote";
|
||||
|
||||
@import "features/footnotes";
|
||||
|
||||
|
|
|
|||
|
|
@ -55,4 +55,8 @@ Containers are an immediate child <div>, purely for constraining width.
|
|||
|
||||
.nobr {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
cite.short-work {
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
--ui-overlay-text: var(--ui-text);
|
||||
--ui-overlay-highlight: hsl(210, 100%, 80%);
|
||||
--ui-overlay-deemphasized: hsl(210, 100%, 95%);
|
||||
--ui-blend: hsla(210, 100%, 87.5%, 75%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -37,5 +38,6 @@
|
|||
--ui-overlay-text: var(--ui-text);
|
||||
--ui-overlay-highlight: hsl(210, 100%, 27.5%);
|
||||
--ui-overlay-deemphasized: hsl(210, 100%, 5%);
|
||||
--ui-blend: hsla(210, 100%, 10%, 75%);
|
||||
}
|
||||
}
|
||||
|
|
@ -45,21 +45,10 @@ th, td {
|
|||
}
|
||||
/* figures */
|
||||
figure {
|
||||
margin: 0;
|
||||
max-width: max-content;
|
||||
|
||||
}
|
||||
figcaption {
|
||||
padding-block: 1em;
|
||||
padding-inline: 1em;
|
||||
}
|
||||
figure img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
figure img ~ figcaption {
|
||||
background: var(--ui-overlay);
|
||||
color: var(--ui-overlay-text);
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
/* extra style and flair */
|
||||
code {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
margin-block-end: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
body {line-height: 2;}
|
||||
body {line-height: 2; letter-spacing: -0.022em;}
|
||||
pre {
|
||||
line-height: 1.2;
|
||||
font-family: monospace;
|
||||
|
|
|
|||
|
|
@ -2,28 +2,11 @@
|
|||
.path, .mediaType {font-family: monospace;}
|
||||
&-hint {
|
||||
margin-block-end: 0;
|
||||
display: grid;
|
||||
place-items: start start;
|
||||
grid-template-columns: auto 1fr;
|
||||
&__text {
|
||||
place-self: center start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: var(--ui-overlay);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNOS44IDE0LjVoMS42bC44LTIuM2gzLjY1bC44IDIuM2gxLjU1bC0zLjQtOWgtMS42em0yLjg1LTMuNmwxLjMtMy43NWguMWwxLjMgMy43NXpNOCAxOHEtLjgyNSAwLTEuNDEyLS41ODdUNiAxNlY0cTAtLjgyNS41ODgtMS40MTJUOCAyaDEycS44MjUgMCAxLjQxMy41ODhUMjIgNHYxMnEwIC44MjUtLjU4NyAxLjQxM1QyMCAxOHptLTQgNHEtLjgyNSAwLTEuNDEyLS41ODdUMiAyMFY2aDJ2MTRoMTR2MnoiLz48L3N2Zz4=);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0.25em;
|
||||
border-radius: 100em;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60%;
|
||||
background-position-x: 45%;
|
||||
background-position-y: 55%;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
@include prepend-icon(
|
||||
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNOS44IDE0LjVoMS42bC44LTIuM2gzLjY1bC44IDIuM2gxLjU1bC0zLjQtOWgtMS42em0yLjg1LTMuNmwxLjMtMy43NWguMWwxLjMgMy43NXpNOCAxOHEtLjgyNSAwLTEuNDEyLS41ODdUNiAxNlY0cTAtLjgyNS41ODgtMS40MTJUOCAyaDEycS44MjUgMCAxLjQxMy41ODhUMjIgNHYxMnEwIC44MjUtLjU4NyAxLjQxM1QyMCAxOHptLTQgNHEtLjgyNSAwLTEuNDEyLS41ODdUMiAyMFY2aDJ2MTRoMTR2MnoiLz48L3N2Zz4=),
|
||||
45%,
|
||||
55%
|
||||
);
|
||||
}
|
||||
.alt-formats-list {
|
||||
margin-block-start: 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
}
|
||||
.article-summary {
|
||||
font-style: italic;
|
||||
font-size: 1.215rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.022rem;
|
||||
margin-block-start: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,7 @@
|
|||
.article-permalink {
|
||||
display: grid;
|
||||
place-items: start start;
|
||||
grid-template-columns: auto 1fr;
|
||||
&__text {
|
||||
place-self: center start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: var(--ui-overlay);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMyAzdjE4aDE4VjN6bTE1IDE1SDZ2LTFoMTJ6bTAtMkg2di0xaDEyem0wLTRINlY2aDEyeiIvPjwvc3ZnPg==);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0.25em;
|
||||
border-radius: 100em;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 50%;
|
||||
background-position-y: 47.5%;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
@include prepend-icon(
|
||||
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMyAzdjE4aDE4VjN6bTE1IDE1SDZ2LTFoMTJ6bTAtMkg2di0xaDEyem0wLTRINlY2aDEyeiIvPjwvc3ZnPg==),
|
||||
50%,
|
||||
50%
|
||||
);
|
||||
}
|
||||
|
|
@ -5,25 +5,9 @@
|
|||
.date {
|
||||
|
||||
}
|
||||
display: grid;
|
||||
place-items: start start;
|
||||
grid-template-columns: auto 1fr;
|
||||
&__text {
|
||||
place-self: center start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: var(--ui-overlay);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTIgMkExMCAxMCAwIDAgMCAyIDEyYTEwIDEwIDAgMCAwIDEwIDEwYTEwIDEwIDAgMCAwIDEwLTEwQTEwIDEwIDAgMCAwIDEyIDJtNC4yIDE0LjJMMTEgMTNWN2gxLjV2NS4ybDQuNSAyLjd6Ii8+PC9zdmc+);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0.25em;
|
||||
border-radius: 100em;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 50%;
|
||||
background-position-y: 47.5%;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
@include prepend-icon(
|
||||
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTIgMkExMCAxMCAwIDAgMCAyIDEyYTEwIDEwIDAgMCAwIDEwIDEwYTEwIDEwIDAgMCAwIDEwLTEwQTEwIDEwIDAgMCAwIDEyIDJtNC4yIDE0LjJMMTEgMTNWN2gxLjV2NS4ybDQuNSAyLjd6Ii8+PC9zdmc+),
|
||||
52.5%,
|
||||
47.5%
|
||||
);
|
||||
}
|
||||
|
|
@ -1,25 +1,10 @@
|
|||
.article-syndication-hint {
|
||||
margin-block-end: 0;
|
||||
display: grid;
|
||||
place-items: start start;
|
||||
grid-template-columns: auto 1fr;
|
||||
&__text {
|
||||
place-self: center start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: var(--ui-overlay);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTcgMjJxLTEuMjUgMC0yLjEyNS0uODc1VDE0IDE5cTAtLjE1LjA3NS0uN0w3LjA1IDE0LjJxLS40LjM3NS0uOTI1LjU4OFQ1IDE1cS0xLjI1IDAtMi4xMjUtLjg3NVQyIDEydC44NzUtMi4xMjVUNSA5cS42IDAgMS4xMjUuMjEzdC45MjUuNTg3bDcuMDI1LTQuMXEtLjA1LS4xNzUtLjA2Mi0uMzM3VDE0IDVxMC0xLjI1Ljg3NS0yLjEyNVQxNyAydDIuMTI1Ljg3NVQyMCA1dC0uODc1IDIuMTI1VDE3IDhxLS42IDAtMS4xMjUtLjIxM1QxNC45NSA3LjJsLTcuMDI1IDQuMXEuMDUuMTc1LjA2My4zMzhUOCAxMnQtLjAxMi4zNjN0LS4wNjMuMzM3bDcuMDI1IDQuMXEuNC0uMzc1LjkyNS0uNTg3VDE3IDE2cTEuMjUgMCAyLjEyNS44NzVUMjAgMTl0LS44NzUgMi4xMjVUMTcgMjIiLz48L3N2Zz4=);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0.25em;
|
||||
border-radius: 100em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
@include prepend-icon(
|
||||
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTcgMjJxLTEuMjUgMC0yLjEyNS0uODc1VDE0IDE5cTAtLjE1LjA3NS0uN0w3LjA1IDE0LjJxLS40LjM3NS0uOTI1LjU4OFQ1IDE1cS0xLjI1IDAtMi4xMjUtLjg3NVQyIDEydC44NzUtMi4xMjVUNSA5cS42IDAgMS4xMjUuMjEzdC45MjUuNTg3bDcuMDI1LTQuMXEtLjA1LS4xNzUtLjA2Mi0uMzM3VDE0IDVxMC0xLjI1Ljg3NS0yLjEyNVQxNyAydDIuMTI1Ljg3NVQyMCA1dC0uODc1IDIuMTI1VDE3IDhxLS42IDAtMS4xMjUtLjIxM1QxNC45NSA3LjJsLTcuMDI1IDQuMXEuMDUuMTc1LjA2My4zMzhUOCAxMnQtLjAxMi4zNjN0LS4wNjMuMzM3bDcuMDI1IDQuMXEuNC0uMzc1LjkyNS0uNTg3VDE3IDE2cTEuMjUgMCAyLjEyNS44NzVUMjAgMTl0LS44NzUgMi4xMjVUMTcgMjIiLz48L3N2Zz4=),
|
||||
50%,
|
||||
50%
|
||||
);
|
||||
}
|
||||
.article-syndication-list {
|
||||
margin-block-start: 0;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,7 @@
|
|||
.article-tags {
|
||||
display: grid;
|
||||
place-items: start start;
|
||||
grid-template-columns: auto 1fr;
|
||||
&__text {
|
||||
place-self: center start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: var(--ui-overlay);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNNS41IDdBMS41IDEuNSAwIDAgMSA0IDUuNUExLjUgMS41IDAgMCAxIDUuNSA0QTEuNSAxLjUgMCAwIDEgNyA1LjVBMS41IDEuNSAwIDAgMSA1LjUgN20xNS45MSA0LjU4bC05LTlDMTIuMDUgMi4yMiAxMS41NSAyIDExIDJINGMtMS4xMSAwLTIgLjg5LTIgMnY3YzAgLjU1LjIyIDEuMDUuNTkgMS40MWw4Ljk5IDljLjM3LjM2Ljg3LjU5IDEuNDIuNTlzMS4wNS0uMjMgMS40MS0uNTlsNy03Yy4zNy0uMzYuNTktLjg2LjU5LTEuNDFjMC0uNTYtLjIzLTEuMDYtLjU5LTEuNDIiLz48L3N2Zz4=);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0.25em;
|
||||
border-radius: 100em;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 55%;
|
||||
background-position-y: 55%;
|
||||
background-size: 60%;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
@include prepend-icon(
|
||||
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNNS41IDdBMS41IDEuNSAwIDAgMSA0IDUuNUExLjUgMS41IDAgMCAxIDUuNSA0QTEuNSAxLjUgMCAwIDEgNyA1LjVBMS41IDEuNSAwIDAgMSA1LjUgN20xNS45MSA0LjU4bC05LTlDMTIuMDUgMi4yMiAxMS41NSAyIDExIDJINGMtMS4xMSAwLTIgLjg5LTIgMnY3YzAgLjU1LjIyIDEuMDUuNTkgMS40MWw4Ljk5IDljLjM3LjM2Ljg3LjU5IDEuNDIuNTlzMS4wNS0uMjMgMS40MS0uNTlsNy03Yy4zNy0uMzYuNTktLjg2LjU5LTEuNDFjMC0uNTYtLjIzLTEuMDYtLjU5LTEuNDIiLz48L3N2Zz4=),
|
||||
55%,
|
||||
55%
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +1,4 @@
|
|||
.article {
|
||||
h1 {font-size: 1.476rem}
|
||||
h2 {font-size: 1.383rem}
|
||||
h3 {font-size: 1.296rem}
|
||||
h4 {font-size: 1.215rem}
|
||||
h5 {font-size: 1.138rem}
|
||||
h6 {font-size: 1.067rem}
|
||||
|
||||
&-footer {
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
}
|
||||
.feed-title {
|
||||
margin-block-start: 0;
|
||||
font-size: 2.025rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.022rem;
|
||||
grid-area: title;
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
}
|
||||
.feed-summary {
|
||||
font-style: italic;
|
||||
font-size: 1.266rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.022rem;
|
||||
margin-block-start: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
figure:has(blockquote) {
|
||||
|
||||
margin-block: 1rem;
|
||||
margin-inline: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
max-width: max-content;
|
||||
|
||||
blockquote {
|
||||
max-inline-size: 100%;
|
||||
line-height: 1.66;
|
||||
letter-spacing: -0.022em;
|
||||
font-size: 1.266rem;
|
||||
|
||||
font-family: serif;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
|
||||
> p:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
> p:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.889rem;
|
||||
|
||||
}
|
||||
|
||||
/* float a lil quotey before the quote */
|
||||
|
||||
position: relative;
|
||||
|
||||
blockquote:before {
|
||||
content: '“';
|
||||
position: absolute;
|
||||
font-size: 3rem;
|
||||
inset-block-start: -0.5rem;
|
||||
// inset-inline-start: 0.75rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-block-start: 2em;
|
||||
}
|
||||
|
||||
/* fixes for no-style option */
|
||||
|
||||
blockquote {
|
||||
margin-inline-start: -1rem;
|
||||
}
|
||||
|
||||
&:has(figcaption) blockquote {
|
||||
padding-block-end: 0rem;
|
||||
}
|
||||
|
||||
/* basic style */
|
||||
|
||||
// border-block-start: 1px solid currentColor;
|
||||
// border-inline-start: 1px solid currentColor;
|
||||
|
||||
// figcaption {
|
||||
// padding-inline: 1rem;
|
||||
// padding-block-end: 1rem;
|
||||
// }
|
||||
|
||||
/* framing style */
|
||||
|
||||
// background: var(--ui-overlay);
|
||||
// border: 0.5rem solid var(--ui-overlay);
|
||||
|
||||
// blockquote:not(:has(div)) {
|
||||
// background: var(--ui-background);
|
||||
// }
|
||||
|
||||
// figcaption {
|
||||
// border-block-start: 1px solid var(--ui-overlay);
|
||||
// background: var(--ui-overlay);
|
||||
// color: var(--ui-overlay-text);
|
||||
// padding: 1rem;
|
||||
// }
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
figure:has(img) {
|
||||
|
||||
}
|
||||
|
|
@ -1,23 +1,7 @@
|
|||
.in-reply-to-prepend {
|
||||
display: grid;
|
||||
place-items: start start;
|
||||
grid-template-columns: auto 1fr;
|
||||
&__text {
|
||||
place-self: center start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: var(--ui-overlay);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTAgOVY1bC03IDdsNyA3di00LjFjNSAwIDguNSAxLjYgMTEgNS4xYy0xLTUtNC0xMC0xMS0xMSIvPjwvc3ZnPg==);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 0.25em;
|
||||
border-radius: 100em;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: center;
|
||||
background-position-y: 45%;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
@include prepend-icon(
|
||||
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMTAgOVY1bC03IDdsNyA3di00LjFjNSAwIDguNSAxLjYgMTEgNS4xYy0xLTUtNC0xMC0xMS0xMSIvPjwvc3ZnPg==),
|
||||
50%,
|
||||
45%
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,86 @@
|
|||
.site-header {
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
.container {
|
||||
|
||||
}
|
||||
.please-wait-warmly {
|
||||
background: var(--ui-overlay);
|
||||
padding: 1em;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
place-items: center;
|
||||
gap: 1em;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.022em;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
background-color: hsl(210, 100%, 40%);
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJtMTguOSAyMWwtNS40NzUtNS40NzVsMi4xLTIuMUwyMSAxOC45ek01LjEgMjFMMyAxOC45TDkuOSAxMmwtMS43LTEuN2wtLjcuN2wtMS4yNzUtMS4yNzV2Mi4wNWwtLjcuN0wyLjUgOS40NWwuNy0uN2gyLjA1TDQgNy41bDMuNTUtMy41NXEuNS0uNSAxLjA3NS0uNzI1VDkuOCAzdDEuMTc1LjIyNXQxLjA3NS43MjVsLTIuMyAyLjNMMTEgNy41bC0uNy43TDEyIDkuOWwyLjI1LTIuMjVxLS4xLS4yNzUtLjE2Mi0uNTc1dC0uMDYzLS42cTAtMS40NzUgMS4wMTMtMi40ODh0Mi40ODctMS4wMTJxLjM3NSAwIC43MTMuMDc1dC42ODcuMjI1TDE2LjQ1IDUuNzVsMS44IDEuOGwyLjQ3NS0yLjQ3NXEuMTc1LjM1LjIzOC42ODd0LjA2Mi43MTNxMCAxLjQ3NS0xLjAxMiAyLjQ4OHQtMi40ODggMS4wMTJxLS4zIDAtLjYtLjA1dC0uNTc1LS4xNzV6Ii8+PC9zdmc+);
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border-radius: 100em;
|
||||
}
|
||||
&:before {
|
||||
grid-column: 1;
|
||||
}
|
||||
> * {
|
||||
grid-column: 2;
|
||||
}
|
||||
&:after {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
.site-nav {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.site-masthead {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.site-icon {
|
||||
block-size: 3rem;
|
||||
inline-size: 3rem;
|
||||
border-radius: 100em;
|
||||
justify-self: center;
|
||||
}
|
||||
.site-masthead__text {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.site-title {
|
||||
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
line-height: 2rem;
|
||||
display: inline-grid;
|
||||
}
|
||||
.site-tagline {
|
||||
line-height: 1rem;
|
||||
}
|
||||
.main-menu {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: end;
|
||||
&-item {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
.menu-link {
|
||||
display: inline-grid;
|
||||
padding-inline: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
unified.test.hugo/assets/styles/mixins/prepend-icon.scss
Normal file
28
unified.test.hugo/assets/styles/mixins/prepend-icon.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@mixin prepend-icon($icon, $how_far_right, $how_far_down) {
|
||||
display: grid;
|
||||
place-items: start start;
|
||||
grid-template-columns: auto 1fr;
|
||||
> * {
|
||||
place-self: center start;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
block-size: 1em;
|
||||
inline-size: 1em;
|
||||
padding: 0.25em;
|
||||
border-radius: 100em;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
&:before {
|
||||
background: var(--ui-overlay);
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
background: var(--ui-overlay-text);
|
||||
mask-image: $icon;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: $how_far_right $how_far_down;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,86 @@
|
|||
+++
|
||||
title = "~a"
|
||||
summary = "i have approximate knowledge of many things. perpetual student. (nb/ace/they)"
|
||||
+++
|
||||
title = "trwnh.com"
|
||||
summary = "trwnh.com is the personal site of a"
|
||||
+++
|
||||
|
||||
<section id="a" class="h-card vcard"
|
||||
resource="#a"
|
||||
prefix="
|
||||
as: https://www.w3.org/ns/activitystreams#
|
||||
foaf: http://xmlns.com/foaf/0.1/
|
||||
schema: http://schema.org/
|
||||
"
|
||||
typeof="as:Person schema:Person">
|
||||
|
||||
## who am i?
|
||||
|
||||
hi i'm <span class="p-nickname p-name nickname fn" property="as:name schema:name">a</span>. <span class="p-note note" property="as:summary schema:description">perpetual student. (<span class="p-gender-identity">nb</span>/ace/<span class="p-pronouns">they</span>)</span>
|
||||
|
||||
### general stuff
|
||||
|
||||
you can probably find me around the web with the username "<span class="p-name p-nickname fn nickname" property="">trwnh</span>". it comes from my fleshform's legal name, "<span class="p-name fn" property="as:name schema:name"><span class="p-given-name given-name" property="schema:givenName">abdullah</span> <span class="p-family-name family-name" property="schema:familyName">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.
|
||||
|
||||
<aside><small>(sidenote: i am apparently not the only person to arrive at these five consonants in a row. in particular, trwnh on twitter is not me; someone claimed my username after i deleted twitter in 2018. not that i really care about twitter anymore. depending on how things go in the near-mid future, everyone else might not care either.)</small></aside>
|
||||
|
||||
### concert/music/band stuff
|
||||
|
||||
i've used the names "<span class="p-nickname nickname" property="foaf:nick">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.
|
||||
|
||||
<figure>
|
||||
<blockquote style="position: relative;">
|
||||
<!-- <div style="background-image: url(https://i.scdn.co/image/ab67616d0000b27331a0cd45d16d3945d33913f9); background-blend-mode: soft-light; background-size: cover; background-position: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.5; filter: blur(0.25rem); z-index: -1; background-color: var(--ui-blend);"></div> -->
|
||||
|
||||
Make your move, obvious humor<br/>
|
||||
Desperate and respiratory plight<br/>
|
||||
Always on, dressed to impress<br/>
|
||||
I'll be the last one to find out why<br/>
|
||||
Time takes its toll on us (this changes everything)<br/>
|
||||
And I'd be a liar if I denied you at all<br/>
|
||||
Oh, now that I know<br/>
|
||||
This changes everything<br/>
|
||||
I've been trading ideas with intriguing men, and I<br/>
|
||||
I perceive an honest solution to all of your pride<br/>
|
||||
[...]<br/>
|
||||
I'm going home, but my own way<br/>
|
||||
Going home on my own<br/>
|
||||
I'm going home, but my own way<br/>
|
||||
Going home on my own
|
||||
|
||||
</blockquote>
|
||||
<figcaption>
|
||||
<a href="https://circasurvive.bandcamp.com/track/the-great-golden-baby">
|
||||
Circa Survive, "<cite class="short-work">The Great Golden Baby</cite>" -- Juturna (2005)
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<blockquote style="position: relative;">
|
||||
<!-- <div style="background-image: url(https://upload.wikimedia.org/wikipedia/en/c/c2/Violent_Waves_cover.jpg); background-blend-mode: soft-light; background-size: cover; background-position: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.5; filter: blur(0.25rem); z-index: -1; background-color: var(--ui-blend);"></div> -->
|
||||
|
||||
And it remains the only meaningful mistake<br/>
|
||||
But you won't let go, you don't know how to<br/>
|
||||
And every morning I begin my dreams when I'm awake<br/>
|
||||
Empty bird sounds are reminders<br/>
|
||||
You're not awake at all
|
||||
|
||||
</blockquote>
|
||||
<figcaption>
|
||||
<a href="https://circasurvive.bandcamp.com/track/bird-sounds">
|
||||
Circa Survive, "<cite class="short-work">Bird Sounds</cite>" -- Violent Waves (2012)
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
### gameing
|
||||
|
||||
most of my "gamer" stuff is under the name triggerofsol. the name came from boktai; in the first boktai game "boktai: the sun is in your hand", if you 100% s-rank and get all items you get "the highest title of the delegate of Sol the solar will -- Trigger of Sol". idk the boktai games are kinda quirky and left an impact on me during my formative years. vampires, norse mythology, magitek, post-apocalyptic absurdism, lotta good stuff in those games.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>"So you're the Trigger of Sol? How embarrassing..."</p>
|
||||
</blockquote>
|
||||
<figcaption>Sunflower Girl Zazie, in response to Solar Boy Django losing his Solar Gun "Gun del Sol" at the start of <cite>Boktai 2</cite> and being unable to defeat a low-level skeleton</figcaption>
|
||||
</figure>
|
||||
|
||||
</section>
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
+++
|
||||
layout = "raw"
|
||||
+++
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
11
unified.test.hugo/content/kb/activitypub/Announce.md
Normal file
11
unified.test.hugo/content/kb/activitypub/Announce.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
## in theory
|
||||
|
||||
https://github.com/w3c/activitystreams/issues/179#issuecomment-119305076
|
||||
|
||||
> `as:Announce` is intended to provide separation between one particular activity and the act of announcing that activity to the world. For instance, previously in AS1, we used the "post" verb to identify the dual action of creating and publishing an object. In AS2, we could represent the same actions using separate `as:Create` and `as:Announce` actions.
|
||||
|
||||
https://github.com/w3c/activitystreams/issues/196#issuecomment-127697366
|
||||
|
||||
> The use case for Announce is to make the intent to notify explicit. For instance, a system may keep track of events such as Arrive, but not actually notify anyone that the event occurred. The Announce allows the notification activity to be performed separately from the thing being Announced.
|
||||
|
||||
> The semantics of Announce are simply: Call attention to this thing...
|
||||
|
|
@ -135,4 +135,6 @@ fwiw mastodon doesn't seem interested in changing this so you will have to Deal
|
|||
|
||||
## see also
|
||||
|
||||
- SocialWG: Media type for AS2 <https://www.w3.org/wiki/Socialwg/Media_type_for_AS2> -- a discussion from when AS2 was being written.
|
||||
- SocialWG: Media type for AS2 <https://www.w3.org/wiki/Socialwg/Media_type_for_AS2> -- a discussion from when AS2 was being written.
|
||||
- https://github.com/w3c/activitystreams/issues/86#issuecomment-105692492
|
||||
- > a document served as "application/activity+json" has an implied default context document if the @context field happens to be missing. A document served as "application/ld+json" would not carry the same assumption. Likewise, a document served as "application/activity+json" has the requirement that it must be in json-ld compact form using, at least, the normative AS2 @context document. A document served as "application/ld+json" could be any valid JSON-LD form, including expanded.
|
||||
|
|
@ -1 +1,7 @@
|
|||
in theory `tag` is for "association by reference". you reference other nodes, which can be either objects or links. but what's the best way to reference an arbitrary string? there is the unofficial extension of a `Hashtag` but this ends up getting used as a signal to show your tag alongside other posts that share the same tag. also the format of hashtags is a little weird -- no one can really agree on it. does it contain the hash sign? is it allowed to contain spaces? is it a subtype of Link, or a subtype of Object? should it or should it not appear in the content, since `tag` seems to be used to markup microsyntaxes?
|
||||
in theory `tag` is for "association by reference". you reference other nodes, which can be either objects or links. but what's the best way to reference an arbitrary string? there is the unofficial extension of a `Hashtag` but this ends up getting used as a signal to show your tag alongside other posts that share the same tag. also the format of hashtags is a little weird -- no one can really agree on it. does it contain the hash sign? is it allowed to contain spaces? is it a subtype of Link, or a subtype of Object? should it or should it not appear in the content, since `tag` seems to be used to markup microsyntaxes?
|
||||
|
||||
## see also
|
||||
|
||||
- https://github.com/w3c/activitystreams/issues/62 Best practices for @mentions
|
||||
- https://github.com/w3c/activitystreams/issues/63 Best practices for #hashtags
|
||||
- > Right, there are no additional semantics in AS2 for the #.
|
||||
16
unified.test.hugo/content/meta/design-decisions.md
Normal file
16
unified.test.hugo/content/meta/design-decisions.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
+++
|
||||
title = "Site design and metamodel"
|
||||
summary = "Decisions I've made while building this website."
|
||||
updated = 2024-11-16
|
||||
toc = true
|
||||
+++
|
||||
|
||||
## Distinction between "personal website" and "person"
|
||||
|
||||
Early in the development cycle of this website, I initially made no real distinction between myself and my site. For most intents and purposes, I *was* trwnh.com -- and with that, certain design decisions fell into place:
|
||||
|
||||
### Why I removed the site header, and why I later added it back.
|
||||
|
||||
I wanted no site header or site footer at first. This was partly due to not knowing what to put in there (making them be empty and therefore unnecessary), and partly due to wanting the focus to be entirely on the content itself, which was the main subject of the page.
|
||||
|
||||
My thinking around this changed when I started to toy around with and consider the possibility that, even though this is a personal site, I might want to identify or refer to the site separately from myself. In some ways, this makes the site less "personal", or at least, it feels that way. It feels like drawing that distinction makes the website feel more "generic", like it could be repurposed for something else that wasn't me or about me, and it would mostly continue to work just fine.
|
||||
|
|
@ -92,7 +92,8 @@ series = "series"
|
|||
stream = "streams"
|
||||
|
||||
[params]
|
||||
summary = "trwnh.com is the personal site of a"
|
||||
# try not to exceed ~37ch for the tagline
|
||||
tagline = "trwnh.com"
|
||||
themeColor = "#001a33"
|
||||
icon = "/.assets/icon.png"
|
||||
|
||||
|
|
|
|||
|
|
@ -34,10 +34,10 @@
|
|||
{{- block "head" . }}
|
||||
{{- end }}
|
||||
</head>
|
||||
{{- block "body" . }}
|
||||
<body>
|
||||
|
||||
</body>
|
||||
{{- end -}}
|
||||
{{- block "body" . }}
|
||||
<body>
|
||||
|
||||
</body>
|
||||
{{- end -}}
|
||||
</html>
|
||||
{{- end -}}
|
||||
|
|
@ -1,368 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" prefix="og: https://ogp.me/ns#">
|
||||
{{ define "head" }}
|
||||
{{ end }}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title property="og:title">~a</title>
|
||||
<meta name="description" property="og:description" content="a's domain" />
|
||||
<meta name="author" content="a (a@trwnh.com)" />
|
||||
|
||||
<meta property="og:type" content="profile" />
|
||||
<meta property="og:url" content="https://trwnh.com" />
|
||||
<meta property="og:site_name" content="trwnh.com" />
|
||||
|
||||
<link rel="icon apple-touch-icon shortcut" href="https://trwnh.com/.assets/icon.png" sizes="400x400" />
|
||||
<meta property="og:image" content="https://trwnh.com/.assets/icon.png" />
|
||||
<meta property="og:image:alt" content="a's avatar">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="400">
|
||||
<meta property="og:image:height" content="400">
|
||||
|
||||
<link rel="me" href="mailto:a@trwnh.com" />
|
||||
<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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
h2 {
|
||||
background-color: var(--color-titlebar);
|
||||
padding: 1rem;
|
||||
margin-inline-start: -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>
|
||||
|
||||
<body>
|
||||
<main class="h-card vcard">
|
||||
<header>
|
||||
<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>
|
||||
<dl>
|
||||
<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 email">a@trwnh.com</a></dd>
|
||||
<dt>Social (ActivityPub)</dt>
|
||||
<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 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>
|
||||
(sidenote: i am apparently not the only person to arrive at these five consonants in a row. in particular, trwnh on twitter is not me; someone claimed my username after i deleted twitter in 2018. not that i really care about twitter anymore. depending on how things go in the near-mid future, everyone else might not care either.)
|
||||
</p>
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h3>concert/music/band stuff</h3>
|
||||
<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>
|
||||
|
||||
Make your move, obvious humor<br/>
|
||||
Desperate and respiratory plight<br/>
|
||||
Always on, dressed to impress<br/>
|
||||
I'll be the last one to find out why<br/>
|
||||
Time takes its toll on us (this changes everything)<br/>
|
||||
And I'd be a liar if I denied you at all<br/>
|
||||
Oh, now that I know<br/>
|
||||
This changes everything<br/>
|
||||
I've been trading ideas with intriguing men, and I<br/>
|
||||
I perceive an honest solution to all of your pride<br/>
|
||||
[...]<br/>
|
||||
I'm going home, but my own way<br/>
|
||||
Going home on my own<br/>
|
||||
I'm going home, but my own way<br/>
|
||||
Going home on my own
|
||||
|
||||
</blockquote>
|
||||
<figcaption>
|
||||
<a href="https://circasurvive.bandcamp.com/track/the-great-golden-baby">
|
||||
<cite>Circa Survive, "The Great Golden Baby" -- Juturna (2005)</cite>
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<blockquote>
|
||||
|
||||
And it remains the only meaningful mistake<br/>
|
||||
But you won't let go, you don't know how to<br/>
|
||||
And every morning I begin my dreams when I'm awake<br/>
|
||||
Empty bird sounds are reminders<br/>
|
||||
You're not awake at all
|
||||
|
||||
</blockquote>
|
||||
<figcaption>
|
||||
<a href="https://circasurvive.bandcamp.com/track/bird-sounds">
|
||||
<cite>Circa Survive, "Bird Sounds" -- Violent Waves (2012)</cite>
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<h4>links to some of my concert/music/band stuff</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<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 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 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>
|
||||
<section>
|
||||
<h3>gameing</h3>
|
||||
<p>most of my "gamer" stuff is under the name triggerofsol. the name came from boktai; in the first boktai game "boktai: the sun is in your hand", if you 100% s-rank and get all items you get "the highest title of the delegate of Sol the solar will -- Trigger of Sol". idk the boktai games are kinda quirky and left an impact on me during my formative years. vampires, norse mythology, magitek, post-apocalyptic absurdism, lotta good stuff in those games.</p>
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>"So you're the Trigger of Sol? How embarrassing..."</p>
|
||||
</blockquote>
|
||||
<figcaption>Sunflower Girl Zazie, in response to Solar Boy Django losing his Solar Gun "Gun del Sol" at the start of <cite>Boktai 2</cite> and being unable to defeat a low-level skeleton</figcaption>
|
||||
</figure>
|
||||
<h4>links to gameing stuff</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<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 url">steam (triggerofsol)</a> if you need to or want to?
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>i am consumed by a desire for learning</h3>
|
||||
<p>varied interests here. i went to college for biomedical engineering and computer science. i took cs for """fun""" but i suppose it ended up sorta working out, because i don't really plan to do anything bme-related in my academic or professional life.</p>
|
||||
<p>particular areas of (current) interest:</p>
|
||||
<ul>
|
||||
<li>the Web. not just the World Wide Web, but also the Semantic Web, Linked Data Web, Social Web, and all that jazz.</li>
|
||||
<li>communication. protocols, paradigms, and so on. one of the things i've been working on recently-ish is a sort of "grand unified communications theory", where i take a look at the existing open protocols and map them onto the pure abstract paradigms of communication -- publishing, subscribing, discussing, messaging.</li>
|
||||
<li>identifiers, particularly how to deal with root authority and delegation. resolving those identifiers in a decentralized and persistent way is something i wish i could find a solution to.</li>
|
||||
<li>i'm learning a lot more about concepts like the actor model, message passing, object capabilities, verifiable claims, distributed systems, trust and authority, and way more.</li>
|
||||
<li>...but i also can do web dev and web design and stuff like that if i really had to. i don't really have anything noteworthy to show for it though.</li>
|
||||
</ul>
|
||||
<h4>look at this computer stuff</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<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 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 url">SocialHub</a> -- this is the forum where ActivityPub and the fediverse get discussed a lot
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
<section id="support">
|
||||
<h2>support me</h2>
|
||||
<p>look, i'm gonna level with ya. i need money to live. most of the stuff i do is what you might consider "socially useful" but also "generally unprofitable". given our capitalist society, my "value" is judged by the latter criteria rather than the former. you can skip past this section but consider maybe don't.</p>
|
||||
<h3>ways to support me</h3>
|
||||
<p>in order of most effective to least effective:</p>
|
||||
<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" 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 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.
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://abdullahtarawneh.com/work/mastodon">Mastodon Documentation</a> -- in particular, this one is something i'm way more proud of. take a look y'all.
|
||||
</li>
|
||||
</ul>
|
||||
<h4>buy something from amazon and tell em i sent ya</h4>
|
||||
<p>can't say this is something i recommend doing, EXCEPT IF you were already going to buy something from amazon. the more expensive the better, since it's percentage-based. but don't go buying things using this referral link just because of me, y'hear?</p>
|
||||
<p><a href="https://amzn.to/2rydvvC">https://amzn.to/2rydvvC</a></p>
|
||||
<p>my pitch is basically this: if you can't avoid amazon and you're going to buy something from them regardless, then at least use my link so that they pay me a bit of the revenue and so that it slightly reduces their profits.</p>
|
||||
</section>
|
||||
<section id="faq">
|
||||
<h2>some questions you might have</h2>
|
||||
<h3>"yo why is this website so plain"</h3>
|
||||
<p>i used to have a <a href="/index.2022.html">nicer-looking</a> one-pager on here. at some point i decided i'd rather actually update my website with actual information instead of worrying about fitting things into some grand design. and for a one-pager, using a static site generator like hugo, which i usually use for this sort of thing... well, that's overkill, isn't it? i'd rather just dump some html in a text file and call it a day. maybe a touch of css, for legibility and a lil flair.</p>
|
||||
<p>this style of website has other advantages too, y'know. it's lightweight and performs well on pretty much any device. and it respects people's defaults. some people like to change their fonts or font sizes, and i don't wanna get in the way of that. it's just text, after all. you should be able to read it on your own terms.</p>
|
||||
<p>in any case, the main takeaway here is that anything worth doing is also worth doing poorly. it's better to actually do the thing instead of dreaming about how to perfect the thing and ending up with nothing at all.</p>
|
||||
</section>
|
||||
<section id="quotes">
|
||||
<h2>things people have said about me</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<q>it's scary how much you know.</q>
|
||||
</li>
|
||||
<li>
|
||||
<q>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</q>
|
||||
</li>
|
||||
<li>
|
||||
<q>VERY MUCH not garbage [...] a worthwhile human</q>
|
||||
</li>
|
||||
<li>
|
||||
<q>honestly, i trust your judgement more than i trust my own.</q>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="more">
|
||||
<h2>done here? check out some other things if you want</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/wiki">/wiki</a> -- a place to dump my thoughts
|
||||
</li>
|
||||
<li>
|
||||
<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
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
{{ define "body" }}
|
||||
<body class="layout-_default-index">
|
||||
{{ partial "site-header.html" . }}
|
||||
<main id="main">
|
||||
<header class="index-header section">
|
||||
<div class="container">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ if isset .Params "summary" }}<p class="subtitle">{{ .Summary }}</p>{{ end }}
|
||||
</div>
|
||||
</header>
|
||||
<section class="index-content section">
|
||||
<div class="container hugo-content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ partial "site-footer.html" . }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
{{ define "head" }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "body" }}
|
||||
<body class="layout-_default-page">
|
||||
<main id="main" class="page-main">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container">
|
||||
{{ with .Title | safeHTML }}<h1 class="article-title p-name entry-title">{{.}}</h1>{{ end }}
|
||||
{{- if isset .Params "summary" }}{{/* only use explicitly-set summaries, not auto-generated ones */}}
|
||||
{{ with .Summary | safeHTML }}<p class="article-summary p-summary entry-summary">{{.}}</p>{{ end }}
|
||||
{{ with .Summary | safeHTML }}<p class="article-summary subtitle p-summary entry-summary">{{.}}</p>{{ end }}
|
||||
{{- end }}
|
||||
{{ partial "components/article-authors.html" . }}
|
||||
{{/* <a href="#end-of-header" class="skip-metadata" aria-label="Skip further metadata"></a> */}}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{{ partial "components/table-of-contents.html" . }}
|
||||
{{- end }}
|
||||
{{ "<!-- article content -->" | safeHTML }}
|
||||
<section class="page-content section">
|
||||
<section class="article-content section">
|
||||
<div class="container e-content entry-content hugo-content">
|
||||
{{ replaceRE `(?s)<div class="footnotes".*` "" .Content | safeHTML -}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container">
|
||||
<h1 class="feed-title p-name">{{.Title | safeHTML}}</h1>
|
||||
{{- if isset .Params "summary" }}
|
||||
<p class="feed-summary p-summary">{{ .Summary | safeHTML }}</p>
|
||||
<p class="feed-summary subtitle p-summary">{{ .Summary | safeHTML }}</p>
|
||||
{{- end }}
|
||||
{{ partial "components/feed-authors.html" . }}
|
||||
{{- with .Content }}
|
||||
|
|
|
|||
196
unified.test.hugo/layouts/partials/index-h-card.html
Normal file
196
unified.test.hugo/layouts/partials/index-h-card.html
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
<main class="h-card vcard">
|
||||
<header>
|
||||
<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>
|
||||
<dl>
|
||||
<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 email">a@trwnh.com</a></dd>
|
||||
<dt>Social (ActivityPub)</dt>
|
||||
<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 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>
|
||||
(sidenote: i am apparently not the only person to arrive at these five consonants in a row. in particular, trwnh on twitter is not me; someone claimed my username after i deleted twitter in 2018. not that i really care about twitter anymore. depending on how things go in the near-mid future, everyone else might not care either.)
|
||||
</p>
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h3>concert/music/band stuff</h3>
|
||||
<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>
|
||||
|
||||
Make your move, obvious humor<br/>
|
||||
Desperate and respiratory plight<br/>
|
||||
Always on, dressed to impress<br/>
|
||||
I'll be the last one to find out why<br/>
|
||||
Time takes its toll on us (this changes everything)<br/>
|
||||
And I'd be a liar if I denied you at all<br/>
|
||||
Oh, now that I know<br/>
|
||||
This changes everything<br/>
|
||||
I've been trading ideas with intriguing men, and I<br/>
|
||||
I perceive an honest solution to all of your pride<br/>
|
||||
[...]<br/>
|
||||
I'm going home, but my own way<br/>
|
||||
Going home on my own<br/>
|
||||
I'm going home, but my own way<br/>
|
||||
Going home on my own
|
||||
|
||||
</blockquote>
|
||||
<figcaption>
|
||||
<a href="https://circasurvive.bandcamp.com/track/the-great-golden-baby">
|
||||
<cite>Circa Survive, "The Great Golden Baby" -- Juturna (2005)</cite>
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<blockquote>
|
||||
|
||||
And it remains the only meaningful mistake<br/>
|
||||
But you won't let go, you don't know how to<br/>
|
||||
And every morning I begin my dreams when I'm awake<br/>
|
||||
Empty bird sounds are reminders<br/>
|
||||
You're not awake at all
|
||||
|
||||
</blockquote>
|
||||
<figcaption>
|
||||
<a href="https://circasurvive.bandcamp.com/track/bird-sounds">
|
||||
<cite>Circa Survive, "Bird Sounds" -- Violent Waves (2012)</cite>
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<h4>links to some of my concert/music/band stuff</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<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 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 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>
|
||||
<section>
|
||||
<h3>gameing</h3>
|
||||
<p>most of my "gamer" stuff is under the name triggerofsol. the name came from boktai; in the first boktai game "boktai: the sun is in your hand", if you 100% s-rank and get all items you get "the highest title of the delegate of Sol the solar will -- Trigger of Sol". idk the boktai games are kinda quirky and left an impact on me during my formative years. vampires, norse mythology, magitek, post-apocalyptic absurdism, lotta good stuff in those games.</p>
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>"So you're the Trigger of Sol? How embarrassing..."</p>
|
||||
</blockquote>
|
||||
<figcaption>Sunflower Girl Zazie, in response to Solar Boy Django losing his Solar Gun "Gun del Sol" at the start of <cite>Boktai 2</cite> and being unable to defeat a low-level skeleton</figcaption>
|
||||
</figure>
|
||||
<h4>links to gameing stuff</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<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 url">steam (triggerofsol)</a> if you need to or want to?
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>i am consumed by a desire for learning</h3>
|
||||
<p>varied interests here. i went to college for biomedical engineering and computer science. i took cs for """fun""" but i suppose it ended up sorta working out, because i don't really plan to do anything bme-related in my academic or professional life.</p>
|
||||
<p>particular areas of (current) interest:</p>
|
||||
<ul>
|
||||
<li>the Web. not just the World Wide Web, but also the Semantic Web, Linked Data Web, Social Web, and all that jazz.</li>
|
||||
<li>communication. protocols, paradigms, and so on. one of the things i've been working on recently-ish is a sort of "grand unified communications theory", where i take a look at the existing open protocols and map them onto the pure abstract paradigms of communication -- publishing, subscribing, discussing, messaging.</li>
|
||||
<li>identifiers, particularly how to deal with root authority and delegation. resolving those identifiers in a decentralized and persistent way is something i wish i could find a solution to.</li>
|
||||
<li>i'm learning a lot more about concepts like the actor model, message passing, object capabilities, verifiable claims, distributed systems, trust and authority, and way more.</li>
|
||||
<li>...but i also can do web dev and web design and stuff like that if i really had to. i don't really have anything noteworthy to show for it though.</li>
|
||||
</ul>
|
||||
<h4>look at this computer stuff</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<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 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 url">SocialHub</a> -- this is the forum where ActivityPub and the fediverse get discussed a lot
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
<section id="support">
|
||||
<h2>support me</h2>
|
||||
<p>look, i'm gonna level with ya. i need money to live. most of the stuff i do is what you might consider "socially useful" but also "generally unprofitable". given our capitalist society, my "value" is judged by the latter criteria rather than the former. you can skip past this section but consider maybe don't.</p>
|
||||
<h3>ways to support me</h3>
|
||||
<p>in order of most effective to least effective:</p>
|
||||
<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" 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 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.
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://abdullahtarawneh.com/work/mastodon">Mastodon Documentation</a> -- in particular, this one is something i'm way more proud of. take a look y'all.
|
||||
</li>
|
||||
</ul>
|
||||
<h4>buy something from amazon and tell em i sent ya</h4>
|
||||
<p>can't say this is something i recommend doing, EXCEPT IF you were already going to buy something from amazon. the more expensive the better, since it's percentage-based. but don't go buying things using this referral link just because of me, y'hear?</p>
|
||||
<p><a href="https://amzn.to/2rydvvC">https://amzn.to/2rydvvC</a></p>
|
||||
<p>my pitch is basically this: if you can't avoid amazon and you're going to buy something from them regardless, then at least use my link so that they pay me a bit of the revenue and so that it slightly reduces their profits.</p>
|
||||
</section>
|
||||
<section id="faq">
|
||||
<h2>some questions you might have</h2>
|
||||
<h3>"yo why is this website so plain"</h3>
|
||||
<p>i used to have a <a href="/index.2022.html">nicer-looking</a> one-pager on here. at some point i decided i'd rather actually update my website with actual information instead of worrying about fitting things into some grand design. and for a one-pager, using a static site generator like hugo, which i usually use for this sort of thing... well, that's overkill, isn't it? i'd rather just dump some html in a text file and call it a day. maybe a touch of css, for legibility and a lil flair.</p>
|
||||
<p>this style of website has other advantages too, y'know. it's lightweight and performs well on pretty much any device. and it respects people's defaults. some people like to change their fonts or font sizes, and i don't wanna get in the way of that. it's just text, after all. you should be able to read it on your own terms.</p>
|
||||
<p>in any case, the main takeaway here is that anything worth doing is also worth doing poorly. it's better to actually do the thing instead of dreaming about how to perfect the thing and ending up with nothing at all.</p>
|
||||
</section>
|
||||
<section id="quotes">
|
||||
<h2>things people have said about me</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<q>it's scary how much you know.</q>
|
||||
</li>
|
||||
<li>
|
||||
<q>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</q>
|
||||
</li>
|
||||
<li>
|
||||
<q>VERY MUCH not garbage [...] a worthwhile human</q>
|
||||
</li>
|
||||
<li>
|
||||
<q>honestly, i trust your judgement more than i trust my own.</q>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="more">
|
||||
<h2>done here? check out some other things if you want</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://trwnh.com/wiki" class="u-url url">trwnh.com/wiki</a> -- a place to dump my thoughts
|
||||
</li>
|
||||
<li>
|
||||
<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
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,5 +1,25 @@
|
|||
<header class="site-header">
|
||||
<div class="container">
|
||||
<p>trwnh.com is under construction! things may look weird until it's ready...</p>
|
||||
<p class="please-wait-warmly"><span>trwnh.com is under construction! things may look weird until it's ready...</span></p>
|
||||
<nav class="site-nav">
|
||||
<a href="{{.Site.Home.Permalink}}" class="site-masthead">
|
||||
{{- with .Site.Params.icon }}
|
||||
<img src="{{. | absURL}}" alt="" class="site-icon" width="48" height="48">
|
||||
{{- end -}}
|
||||
<div class="site-masthead__text">
|
||||
<span class="site-title">{{.Site.Title}}</span>
|
||||
<span class="site-tagline">{{.Site.Params.tagline}}</span>
|
||||
</div>
|
||||
</a>
|
||||
<ul class="main-menu">
|
||||
<li class="main-menu-item">
|
||||
<a href="/streams" class="menu-link">my posts</a>
|
||||
</li>
|
||||
<li class="main-menu-item">
|
||||
<a href="/kb" class="menu-link">my wiki</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<hr />
|
||||
</div>
|
||||
</header>
|
||||
Loading…
Reference in a new issue