m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +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; 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 */ /* hide the network icon, and hope nothing else */
.rainbowkit [aria-label='Chain Selector'] [role='img'] { .rainbowkit [aria-label='Chain Selector'] [role='img'] {
display: none; display: none;
@ -24,7 +29,7 @@
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
font-size: var(--font-size-mini); font-size: var(--font-size-small);
} }
/* connect button */ /* connect button */

64
src/pages/thanks.astro
View File

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