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/DonateBanner: fix up colors & sizes to match mockup

Browse source
This commit is contained in:
wukko 2024-08-06 13:24:40 +06:00
parent 640898e022
commit 9dad15b48c
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 29 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
web/src/components/misc/DonateBanner.svelte
View file

@ -11,8 +11,8 @@
<div id="banner-contents"> <div id="banner-contents">
<div id="banner-left"> <div id="banner-left">
<img id="imput-logo" src="/icons/imput.svg" alt="imput logo" /> <img id="imput-logo" src="/icons/imput.svg" alt="imput logo" />
<div id="banner-title" class="redaction">{$t('donate.title')}</div> <div id="banner-title" class="redaction">{$t("donate.title")}</div>
<div id="banner-subtitle">{$t('donate.subtitle')}</div> <div id="banner-subtitle">{$t("donate.subtitle")}</div>
</div> </div>
<div id="banner-right"> <div id="banner-right">
<Meowbalt emotion="fast" /> <Meowbalt emotion="fast" />
@ -21,7 +21,7 @@
<div id="banner-background"> <div id="banner-background">
<div id="banner-background-animation"> <div id="banner-background-animation">
<div id="banner-background-inner"> <div id="banner-background-inner">
{#each {length: 144} as _} {#each { length: 160 } as _}
<IconHeart class="heart-icon" /> <IconHeart class="heart-icon" />
{/each} {/each}
</div> </div>
@ -30,14 +30,11 @@
</header> </header>
<style> <style>
#banner { #banner {
--banner-radius: 28px;
position: relative; position: relative;
border-radius: calc(3 * var(--border-radius)); border-radius: var(--banner-radius);
background: linear-gradient( background: linear-gradient(180deg, #1a1a1a 30%, #404040 100%);
190deg,
#1a1a1a 30%,
#3c3c3c 100%
);
} }
#banner-contents { #banner-contents {
@ -53,36 +50,38 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
opacity: 10%; opacity: 8%;
border-radius: var(--banner-radius);
mask-image: linear-gradient( mask-image: linear-gradient(
145deg, 150deg,
rgba(0,0,0,1) 0%, rgba(0, 0, 0, 0.7) 0%,
rgba(255,255,255,0) 60% rgba(255, 255, 255, 0) 65%
); )
} }
#banner-background-inner { #banner-background-inner {
color: white; color: white;
transform: rotate(-8deg) scale(1.5) translateY(-4em); transform: rotate(-10deg) scale(1.5) translateY(-70px);
} }
#banner-background-inner :global(.heart-icon) { #banner-background-inner :global(.heart-icon) {
height: 48px; height: 48px;
width: 48px; width: 48px;
stroke-width: 1.5px; stroke-width: 1.5px;
margin: -2.4px; margin: -6px -2.5px;
} }
#banner-right :global(.meowbalt) { #banner-right :global(.meowbalt) {
height: 40vmin; height: 38vmin;
margin-top: -32px;
margin-left: -64px;
} }
#banner-right { #banner-right {
transform: translate(12px, 48px); transform: translate(12px, 44px);
display: flex; display: flex;
align-items: center; align-items: center;
position: absolute;
right: 0;
bottom: 0;
} }
#imput-logo { #imput-logo {
@ -93,32 +92,35 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 40px 56px;
color: white; color: white;
padding: 55px;
padding-right: 0;
gap: 16px; gap: 16px;
white-space: pre-wrap; white-space: pre-wrap;
max-width: 55%;
} }
#banner-title { #banner-title {
font-family: serif; font-family: serif;
font-size: 48px; font-size: 48px;
font-weight: 400; font-weight: 400;
line-height: 0.95; line-height: 0.95;
} }
#banner-title.redaction { #banner-title.redaction {
font-family: 'Redaction 10', serif; font-family: "Redaction 10", serif;
font-smooth: never; font-smooth: never;
-webkit-font-smoothing: none; -webkit-font-smoothing: none;
} }
#banner-subtitle { #banner-subtitle {
color: var(--gray); color: var(--gray);
line-height: 1.5;
font-size: 16px;
} }
#banner-background-animation { #banner-background-animation {
animation: heart-move 5s infinite linear; animation: heart-move 6s infinite linear;
} }
@keyframes heart-move { @keyframes heart-move {
@ -127,7 +129,7 @@
} }
to { to {
transform: translate(74px) translateY(61px); transform: translate(85px) translateY(108px);
} }
} }
</style> </style>