NoLog.cz/public-web
6
0
Fork 1
Code Issues 2 Pull requests Projects 1 Releases Activity Actions

add progress bar to fundraising page
All checks were successful
/ build (push) Successful in 33s
Details

Browse source
This commit is contained in:
bain 2024-12-14 21:50:17 +01:00
parent 2647abad78
commit dc5d9e06bc
Signed by: bain
GPG key ID: 31F0F25E3BED0B9B
3 changed files with 55 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
assets/main.css
View file

@ -311,3 +311,20 @@ html.dark .button-fundraiser-shadow {
box-shadow: var(--color-gray-300) 10px 10px 0px 0px;
border: 2px solid var(--color-gray-300);
}
.fundraiser-progress-bar {
width: min(20rem, 80vw);
height: 1rem;
border-radius: 0.25rem;
--filled: 3%;
--empty-color: theme(colors.gray.300);
background:
linear-gradient(90deg, transparent, transparent var(--filled), var(--empty-color) var(--filled)),
repeating-linear-gradient(-45deg, theme(colors.red.700), theme(colors.red.700) 20px, theme(colors.red.800) 20px, theme(colors.red.800) 40px);
}
html.dark .fundraiser-progress-bar {
--empty-color: theme(colors.gray.700);
}

32
assets/style.css
View file

@ -695,6 +695,10 @@ video {
margin-bottom: 2rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mr-1 {
margin-right: 0.25rem;
}
@ -783,6 +787,11 @@ video {
width: 100%;
}
.w-min {
width: -moz-min-content;
width: min-content;
}
.min-w-0 {
min-width: 0px;
}
@ -1030,6 +1039,10 @@ video {
text-align: center;
}
.text-right {
text-align: right;
}
.font-main {
font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
@ -1470,6 +1483,21 @@ html.dark .button-fundraiser-shadow {
border: 2px solid var(--color-gray-300);
}
.fundraiser-progress-bar {
width: min(20rem, 80vw);
height: 1rem;
border-radius: 0.25rem;
--filled: 3%;
--empty-color: #d4d4d8;
background:
linear-gradient(90deg, transparent, transparent var(--filled), var(--empty-color) var(--filled)),
repeating-linear-gradient(-45deg, #b91c1c, #b91c1c 20px, #991b1b 20px, #991b1b 40px);
}
html.dark .fundraiser-progress-bar {
--empty-color: #3f3f46;
}
.dark\:hidden:is(.dark *) {
display: none;
}
@ -1520,6 +1548,10 @@ html.dark .button-fundraiser-shadow {
margin-bottom: 1rem;
}
.max-md\:ml-0 {
margin-left: 0px;
}
.max-md\:flex-wrap {
flex-wrap: wrap;
}

7
layouts/partials/section-fundraising-intro.html
View file

@ -4,12 +4,17 @@
<section class="container mx-auto px-6 py-6 min-h-[min(90vh,30rem)] grid place-items-center">
<div class="flex justify-center items-center mx-auto max-md:flex-wrap-reverse">
<img src="/images/fundraising-star.webp" class="aspect-auto h-[20rem] invert-colors max-xl:h-[15rem] max-sm:mb-3"/>
<div class="max-md:text-center max-md:mb-4 max-w-[50ch]">
<div class="max-md:text-center max-md:mb-4 ml-2 max-md:ml-0 max-w-[50ch]">
<p style="font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.1">Provozujeme nástroje pro komunikaci a sdílení</p>
<br />
<p style="font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.1"><strong>Bez reklam, bez dohledu, pro všechny</strong></p>
<br />
<p style="font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.1">Teď potřebujeme vaší podporu</p>
<br />
<div class="text-right w-min mx-auto">
<div class="fundraiser-progress-bar w-full"></div>
<p>vybráno 4 500 Kč z 180 000 Kč</p>
</div>
</div>
</div>
<div class="flex justify-center max-md:flex-wrap gap-3">