mirror of https://github.com/kremalicious/blog.git
147 lines
3.5 KiB
Plaintext
147 lines
3.5 KiB
Plaintext
---
|
|
// import BackButton from '@components/BackButton.astro'
|
|
import LayoutBase from '@layouts/Base/index.astro'
|
|
import { Web3 } from '@features/Web3'
|
|
import config from '@config/blog.config'
|
|
import { Bitcoin, Wallet } from '@images/components'
|
|
import CodeCopy from '@components/CopyCode.astro'
|
|
---
|
|
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
gap: var(--spacer);
|
|
}
|
|
|
|
@media (min-width: 40rem) {
|
|
.grid {
|
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.box {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
background-color: var(--body-background-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: var(--spacer);
|
|
}
|
|
|
|
.subTitle {
|
|
font-size: var(--font-size-h3);
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin: 0;
|
|
padding: calc(var(--spacer) / 2) 0;
|
|
}
|
|
|
|
.box .subTitle {
|
|
padding: calc(var(--spacer) / 2);
|
|
}
|
|
|
|
.titleCoin {
|
|
font-size: var(--font-size-large);
|
|
margin-top: 0;
|
|
margin-bottom: calc(var(--spacer) / 4);
|
|
}
|
|
|
|
.section {
|
|
padding: calc(var(--spacer) / 1.5) 0;
|
|
}
|
|
|
|
.box .section {
|
|
padding: calc(var(--spacer) / 1.5);
|
|
}
|
|
|
|
.section.highlight {
|
|
background-color: var(--box-background-color);
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.metaText {
|
|
display: block;
|
|
font-size: var(--font-size-mini);
|
|
margin: calc(var(--spacer) / 6) 0;
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
html.isInitSend #header,
|
|
html.isInitSend #footer,
|
|
html.isInitSend section:not(.isInitSend),
|
|
html.isInitSend h2,
|
|
html.isInitSend h3 {
|
|
opacity: 0.1;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease-out;
|
|
}
|
|
|
|
html.isInitSend #web3 {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { $isInitSend } from '@features/Web3/stores'
|
|
|
|
$isInitSend.subscribe((value) => {
|
|
const html = document.querySelector('html')
|
|
|
|
value
|
|
? html?.classList.add('isInitSend')
|
|
: html?.classList.remove('isInitSend')
|
|
})
|
|
</script>
|
|
|
|
<LayoutBase title="Say Thanks" pageTitle="Say Thanks">
|
|
<!-- <BackButton /> -->
|
|
<div class="grid">
|
|
<div class="box">
|
|
<h3 class="subTitle">Magic Internet Money</h3>
|
|
|
|
<section class="section">
|
|
If you like what I do and want to support me in a decentralized way, you
|
|
can send me some Ether, ERC-20 token, or Bitcoin.
|
|
</section>
|
|
|
|
<section class="section highlight" id="web3">
|
|
<h4 class="titleCoin"><Wallet /> Web3 Wallet</h4>
|
|
<Web3 client:only="react" />
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h4 class="titleCoin"><Bitcoin /> Bitcoin</h4>
|
|
<CodeCopy address={config.author.bitcoin} />
|
|
</section>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="subTitle">Sponsor</h3>
|
|
<section class="section">
|
|
<p>You can also sponsor me on GitHub.</p>
|
|
<a href="https://github.com/sponsors/kremalicious/">
|
|
<img
|
|
src="https://img.shields.io/static/v1?label=Sponsor%20On%20GitHub&labelColor=%2343a699&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86&style=for-the-badge"
|
|
/>
|
|
</a>
|
|
</section>
|
|
|
|
<h3 class="subTitle">Hire Me</h3>
|
|
<section class="section">
|
|
<p>
|
|
Available for contract work to solve your design, front-end, and web3
|
|
problems.
|
|
</p>
|
|
<p>
|
|
Get in touch on <a href="https://matthiaskretschmann.com"
|
|
>my portfolio</a
|
|
>.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</LayoutBase>
|