Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/donate: make page scrollable on sides

Browse source
This commit is contained in:
dumbmoron 2024-08-30 16:48:20 +00:00
parent 744842cc3d
commit 305d0429f1
No known key found for this signature in database
1 changed files with 37 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
web/src/routes/donate/+page.svelte
View file

@ -18,47 +18,55 @@
</title> </title>
</svelte:head> </svelte:head>
<main id="donate-page"> <div id="donate-page-wrapper">
<DonateBanner /> <main id="donate-page">
<DonateBanner />
<section id="support-options"> <section id="support-options">
<DonateOptionsCard /> <DonateOptionsCard />
<DonateShareCard /> <DonateShareCard />
</section> </section>
<section id="motivation" class="long-text-noto"> <section id="motivation" class="long-text-noto">
<p>{$t("donate.body.motivation")}</p> <p>{$t("donate.body.motivation")}</p>
<p>{$t("donate.body.keep_going")}</p> <p>{$t("donate.body.keep_going")}</p>
</section> </section>
<section id="crypto"> <section id="crypto">
<div id="crypto-section-header"> <div id="crypto-section-header">
<IconDiamond /> <IconDiamond />
<h3 id="crypto-title">{$t("donate.alternative.title")}</h3> <h3 id="crypto-title">{$t("donate.alternative.title")}</h3>
</div> </div>
<div id="wallet-grid"> <div id="wallet-grid">
{#each Object.entries(donate.crypto) as [name, address]} {#each Object.entries(donate.crypto) as [name, address]}
<DonateAltItem type="copy" {name} {address} /> <DonateAltItem type="copy" {name} {address} />
{/each} {/each}
{#each Object.entries(donate.other) as [name, address]} {#each Object.entries(donate.other) as [name, address]}
<DonateAltItem type="open" {name} {address} /> <DonateAltItem type="open" {name} {address} />
{/each} {/each}
</div> </div>
</section> </section>
</main> </main>
</div>
<style> <style>
#donate-page-wrapper {
display: flex;
width: 100%;
height: max-content;
justify-content: center;
overflow-y: scroll;
padding: var(--padding);
}
#donate-page { #donate-page {
--donate-border-radius: 24px; --donate-border-radius: 24px;
--donate-border-opacity: 0.1; --donate-border-opacity: 0.1;
--donate-gradient-start: #1a1a1a; --donate-gradient-start: #1a1a1a;
--donate-gradient-end: #404040; --donate-gradient-end: #404040;
max-width: 950px; max-width: 100%;
width: 900px; width: 900px;
margin: 0 auto;
overflow-x: hidden;
padding: var(--padding);
display: flex; display: flex;
flex-direction: column; flex-direction: column;