June 2024 redesign #1
2 changed files with 134 additions and 4 deletions
|
|
@ -18,8 +18,54 @@ layout = "custom_html"
|
|||
+++
|
||||
|
||||
<main class="support">
|
||||
<div class="container" style="max-width: 80ch">
|
||||
<div class="container">
|
||||
<h1>Help me live</h1>
|
||||
<p>Much like everyone else under capitalism, I need money to live. Most of the stuff I do is what you might consider "socially useful" but also "general unprofitable". Given our capitalist society, my "value" is judged by the latter criteria rather than the former.</p>
|
||||
<p>Much like everyone else under capitalism, I need money to live. Most of the stuff I do is what you might consider "socially useful" but also "generally unprofitable". If you could support me financially, it would go a long way to giving me more breathing room.</p>
|
||||
<ul class="donation-links">
|
||||
<li>
|
||||
<a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1em" viewBox="0 0 2304 1536"><title>fa:cc-stripe</title><path fill="currentColor" d="M1597 775q0 69-21 106q-19 35-52 35q-23 0-41-9V683q29-30 57-30q57 0 57 122m438-36h-110q6-98 56-98q51 0 54 98M476 874q0-59-33-91.5T342 725q-36-13-52-24t-16-25q0-26 38-26q58 0 124 33l18-112q-67-32-149-32q-77 0-123 38q-48 39-48 109q0 58 32.5 90.5T266 833q39 14 54.5 25.5T336 886q0 31-48 31q-29 0-70-12.5T146 874l-18 113q72 41 168 41q81 0 129-37q51-41 51-117m295-215l19-111h-96V413l-129 21l-18 114l-46 8l-17 103h62v219q0 84 44 120q38 30 111 30q32 0 79-11V899q-32 7-44 7q-42 0-42-50V659zm316 25V545q-15-3-28-3q-32 0-55.5 16T970 604l-10-56H829v471h150V713q26-31 82-31q16 0 26 2m37 335h150V548h-150zm622-249q0-122-45-179q-40-52-111-52q-64 0-117 56l-8-47h-132v645l150-25v-151q36 11 68 11q83 0 134-56q61-65 61-202m-468-348q0-33-23-56t-56-23t-56 23t-23 56t23 56.5t56 23.5t56-23.5t23-56.5m898 357q0-113-48-176q-50-64-144-64q-96 0-151.5 66T1777 785q0 128 63 188q55 55 161 55q101 0 160-40l-16-103q-57 31-128 31q-43 0-63-19q-23-19-28-66h248q2-14 2-52m128-651v1280q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V128q0-52 38-90t90-38h2048q52 0 90 38t38 90"/></svg>
|
||||
<span>Donate one time via Stripe</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://liberapay.com/trwnh">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>simple-icons:liberapay</title><path fill="currentColor" d="M2.32 0A2.32 2.32 0 0 0 0 2.32v19.36A2.32 2.32 0 0 0 2.32 24h19.36A2.32 2.32 0 0 0 24 21.68V2.32A2.32 2.32 0 0 0 21.68 0zm9.208 3.98l-2.27 9.405a3 3 0 0 0-.073.539a.85.85 0 0 0 .09.432a.7.7 0 0 0 .334.302q.236.115.661.147l-.49 2.008q-1.159 0-1.82-.3q-.662-.303-.947-.826a2.4 2.4 0 0 1-.278-1.2q.008-.678.188-1.445l2.074-8.67zm3.9 3.888q.915 0 1.576.277q.66.277 1.085.76q.425.48.629 1.126t.204 1.379v.001q0 1.19-.392 2.179a5.2 5.2 0 0 1-1.086 1.706a4.8 4.8 0 0 1-1.665 1.118q-.972.4-2.114.4q-.555 0-1.11-.098l-.735 2.956H9.403l2.71-11.298q.653-.196 1.494-.351a10 10 0 0 1 1.821-.155m-.31 2.041a4.7 4.7 0 0 0-.98.098l-1.143 4.752q.277.066.685.065q.638 0 1.16-.237a2.6 2.6 0 0 0 .89-.661q.366-.424.571-1.02a4 4 0 0 0 .204-1.315q0-.702-.31-1.192t-1.077-.49"/></svg>
|
||||
<span>Back me on Liberapay</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<section>
|
||||
<h2>What I do for "free"</h2>
|
||||
<h3>Behind the scenes of the social web</h3>
|
||||
{{< figquote cite="Anonymous" >}}
|
||||
<p>a has encyclopedic knowledge of the inner workings of the fediverse and forward-thinking ideas for the social web in general, backed by solid technical and social grounding</p>
|
||||
{{< /figquote >}}
|
||||
<p>I'm a member of the Mastodon and Pixelfed teams on Github. I'm involved in protocol discussions and proposals. Some of the ideas I'm trying to push forward:</p>
|
||||
<ul>
|
||||
<li><a href="https://w3id.org/fep/7888">Bringing context back</a> into the social web. Whereas platforms like Twitter removed context and frequently lead to context collapse, older-style forums do not have these contextual issues due to the explicit grouping of posts into threads.</li>
|
||||
<li><a href="https://w3id.org/fep/0391">"Special collection proofs"</a> for obtaining and verifying stamps of inclusion in a special collection. This allows for a natural way of, for example, showing only replies that have been stamped by the author, or only posts that have been added to a moderated conversation, without having to fetch the entire collection and validate the relationship yourself. This gives people greater control over their conversations and interactions, allowing them to set and signal boundaries that good-faith actors can respect.</li>
|
||||
<li>Custom audiences. Similar to Instagram's "Close Friends", Twitter's former "Circle" feature, Facebook's "friend lists", diaspora*'s "Aspects" or Google+ "Circles", you should be able to define subsets of people that you can then address in your posts. The building blocks are largely there already; they just need to be put together.</li>
|
||||
<li>Explicit collection management. Currently, the social web operates on the basis that everything is implicitly reconstructed on your "instance" based on what it receives. Hashtags, profiles, and timelines do not really exist. By having explicit collections for these, not only can you add features like excluding certain posts from your profile, or having multiple streams/collections of your own posts, but you can also follow those collections to get updates about the stuff you care about, instead of a grab-bag of everything that may or may not be relevant.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Finances overview</h2>
|
||||
<p>I currently receive around $11.15 per week on Liberapay. Meeting a goal of $500 per week would mean that my survival is no longer in question. But of course, anything helps!</p>
|
||||
</section>
|
||||
<ul class="donation-links">
|
||||
<li>
|
||||
<a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1em" viewBox="0 0 2304 1536"><title>fa:cc-stripe</title><path fill="currentColor" d="M1597 775q0 69-21 106q-19 35-52 35q-23 0-41-9V683q29-30 57-30q57 0 57 122m438-36h-110q6-98 56-98q51 0 54 98M476 874q0-59-33-91.5T342 725q-36-13-52-24t-16-25q0-26 38-26q58 0 124 33l18-112q-67-32-149-32q-77 0-123 38q-48 39-48 109q0 58 32.5 90.5T266 833q39 14 54.5 25.5T336 886q0 31-48 31q-29 0-70-12.5T146 874l-18 113q72 41 168 41q81 0 129-37q51-41 51-117m295-215l19-111h-96V413l-129 21l-18 114l-46 8l-17 103h62v219q0 84 44 120q38 30 111 30q32 0 79-11V899q-32 7-44 7q-42 0-42-50V659zm316 25V545q-15-3-28-3q-32 0-55.5 16T970 604l-10-56H829v471h150V713q26-31 82-31q16 0 26 2m37 335h150V548h-150zm622-249q0-122-45-179q-40-52-111-52q-64 0-117 56l-8-47h-132v645l150-25v-151q36 11 68 11q83 0 134-56q61-65 61-202m-468-348q0-33-23-56t-56-23t-56 23t-23 56t23 56.5t56 23.5t56-23.5t23-56.5m898 357q0-113-48-176q-50-64-144-64q-96 0-151.5 66T1777 785q0 128 63 188q55 55 161 55q101 0 160-40l-16-103q-57 31-128 31q-43 0-63-19q-23-19-28-66h248q2-14 2-52m128-651v1280q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V128q0-52 38-90t90-38h2048q52 0 90 38t38 90"/></svg>
|
||||
<span>Donate one time via Stripe</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://liberapay.com/trwnh">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>simple-icons:liberapay</title><path fill="currentColor" d="M2.32 0A2.32 2.32 0 0 0 0 2.32v19.36A2.32 2.32 0 0 0 2.32 24h19.36A2.32 2.32 0 0 0 24 21.68V2.32A2.32 2.32 0 0 0 21.68 0zm9.208 3.98l-2.27 9.405a3 3 0 0 0-.073.539a.85.85 0 0 0 .09.432a.7.7 0 0 0 .334.302q.236.115.661.147l-.49 2.008q-1.159 0-1.82-.3q-.662-.303-.947-.826a2.4 2.4 0 0 1-.278-1.2q.008-.678.188-1.445l2.074-8.67zm3.9 3.888q.915 0 1.576.277q.66.277 1.085.76q.425.48.629 1.126t.204 1.379v.001q0 1.19-.392 2.179a5.2 5.2 0 0 1-1.086 1.706a4.8 4.8 0 0 1-1.665 1.118q-.972.4-2.114.4q-.555 0-1.11-.098l-.735 2.956H9.403l2.71-11.298q.653-.196 1.494-.351a10 10 0 0 1 1.821-.155m-.31 2.041a4.7 4.7 0 0 0-.98.098l-1.143 4.752q.277.066.685.065q.638 0 1.16-.237a2.6 2.6 0 0 0 .89-.661q.366-.424.571-1.02a4 4 0 0 0 .204-1.315q0-.702-.31-1.192t-1.077-.49"/></svg>
|
||||
<span>Back me on Liberapay</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -1,5 +1,89 @@
|
|||
main.support {
|
||||
.cta {
|
||||
|
||||
line-height: 1.728;
|
||||
.container {
|
||||
max-width: 80ch;
|
||||
@media (min-width: 60rem) {
|
||||
padding-inline: 0
|
||||
}
|
||||
}
|
||||
|
||||
.donation-links {
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-block: 3rem;
|
||||
justify-content: space-around;
|
||||
gap: 1rem;
|
||||
li {
|
||||
display: contents;
|
||||
}
|
||||
a {
|
||||
flex-basis: 13rem;
|
||||
display: grid;
|
||||
text-decoration: none;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
background: var(--color-accent);
|
||||
padding: 2rem;
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0px 4px 4px hsl(150, 80%, 30%);
|
||||
&:hover {
|
||||
background-color: var(--color-highlight-weak);
|
||||
box-shadow: 0px 2px 2px hsl(210, 80%, 50%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin: 0;
|
||||
margin-inline-start: 1rem;
|
||||
padding: 1rem;
|
||||
padding-inline-start: 2.5rem;
|
||||
position: relative;
|
||||
border-radius: 2rem;
|
||||
border-start-start-radius: 0;
|
||||
background: var(--color-highlight);
|
||||
color: var(--color-button-text);
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-width: 0rem 1rem 1rem 0;
|
||||
border-color: transparent var(--color-highlight) transparent transparent;
|
||||
left: -1rem;
|
||||
top: 0;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
margin-block-start: 0.5rem;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
&:before {
|
||||
content: '“';
|
||||
position: absolute;
|
||||
top: -0.75rem;
|
||||
left: 0.5rem;
|
||||
font-size: 3rem;
|
||||
font-family: serif;
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
cite {
|
||||
&:before {
|
||||
content: '— ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue