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

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

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