m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 17:23:50 +01:00
Code

styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2023-10-31 21:04:52 +00:00
parent 6cd17095a3
commit acca82f6df
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/features/Web3/components/Form/index.module.css
View File

@ -15,6 +15,11 @@
display: none;
}
.rainbowkit [aria-label='Chain Selector'],
.rainbowkit [data-testid='rk-account-button'] div {
font-weight: var(--font-weight-base);
}
/* hide the network icon, and hope nothing else */
.rainbowkit [aria-label='Chain Selector'] [role='img'] {
display: none;
@ -24,7 +29,7 @@
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
font-size: var(--font-size-mini);
font-size: var(--font-size-small);
}
/* connect button */

64
src/pages/thanks.astro
View File

@ -10,7 +10,7 @@ import CodeCopy from '@components/CopyCode.astro'
<style>
.grid {
display: grid;
grid-gap: var(--spacer);
gap: var(--spacer);
}
@media (min-width: 40rem) {
@ -19,56 +19,76 @@ import CodeCopy from '@components/CopyCode.astro'
}
}
.content {
.box {
margin-left: auto;
margin-right: auto;
width: 100%;
background-color: var(--box-background-color);
background-color: var(--body-background-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0 calc(var(--spacer) / 1.5) calc(var(--spacer) / 1.5)
calc(var(--spacer) / 1.5);
margin-bottom: var(--spacer);
}
.subTitle {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
border-bottom: 1px solid var(--border-color);
margin-top: 0;
margin-bottom: calc(var(--spacer) / 1.5);
margin: 0;
padding: calc(var(--spacer) / 2) 0;
}
.content .subTitle {
.box .subTitle {
padding: calc(var(--spacer) / 2);
margin-left: calc(var(--spacer) / -1.5);
margin-right: calc(var(--spacer) / -1.5);
}
.titleCoin {
font-size: var(--font-size-base);
margin-top: var(--spacer);
margin-bottom: calc(var(--spacer) / 2);
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);
}
</style>
<LayoutBase title="Say Thanks" pageTitle="Say Thanks">
<LayoutBase title="Say Thanks">
<!-- <BackButton /> -->
<div class="grid">
<div class="content">
<div class="box">
<h3 class="subTitle">Send Magic Internet Money</h3>
<h4 class="titleCoin"><Wallet /> Browser wallet</h4>
<Web3 client:load />
<CodeCopy address={config.author.ether} />
<section class="section">
If you like what I do and want to support me in a decentralized way, you
can send me some Ether or Bitcoin.
</section>
<h4 class="titleCoin"><Bitcoin /> Bitcoin</h4>
<CodeCopy address={config.author.bitcoin} />
<section class="section highlight">
<h4 class="titleCoin"><Wallet /> Web3 Wallet</h4>
<Web3 client:load />
<CodeCopy address={config.author.ether} />
</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">
If you want to support me the old way, you can sponsor me on GitHub.
</section>
<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"