This commit is contained in:
parent
15eb917759
commit
4556277057
GPG key ID:
31F0F25E3BED0B9B
4 changed files with 241 additions and 155 deletions
|
|
@ -297,3 +297,17 @@ html:not(.dark) .light\:hidden {
|
|||
padding: 0.75em 1em;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
html.dark .invert-colors {
|
||||
filter: invert(0.95);
|
||||
}
|
||||
|
||||
.button-fundraiser-shadow {
|
||||
box-shadow: var(--color-gray-900) 10px 10px 0px 0px;
|
||||
border: 2px solid var(--color-gray-900);
|
||||
}
|
||||
|
||||
html.dark .button-fundraiser-shadow {
|
||||
box-shadow: var(--color-gray-300) 10px 10px 0px 0px;
|
||||
border: 2px solid var(--color-gray-300);
|
||||
}
|
||||
|
|
|
|||
347
assets/style.css
347
assets/style.css
|
|
@ -1,5 +1,113 @@
|
|||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
/*
|
||||
! tailwindcss v3.4.5 | MIT License | https://tailwindcss.com
|
||||
! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
|
|
@ -442,118 +550,10 @@ video {
|
|||
|
||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||
|
||||
[hidden] {
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style: ;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -650,6 +650,11 @@ video {
|
|||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.-ml-0\.5 {
|
||||
margin-left: -0.125rem;
|
||||
}
|
||||
|
|
@ -678,6 +683,10 @@ video {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
|
@ -726,14 +735,26 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.aspect-auto {
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-\[20rem\] {
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
.min-h-\[min\(100vh\2c 30rem\)\] {
|
||||
min-height: min(100vh,30rem);
|
||||
}
|
||||
|
||||
.min-h-\[min\(90vh\2c 30rem\)\] {
|
||||
min-height: min(90vh,30rem);
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -774,6 +795,10 @@ video {
|
|||
max-width: 30ch;
|
||||
}
|
||||
|
||||
.max-w-\[50ch\] {
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
.max-w-\[60ch\] {
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
|
@ -909,22 +934,22 @@ video {
|
|||
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
|
||||
background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
|
||||
background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gradient-to-b {
|
||||
|
|
@ -1051,12 +1076,12 @@ video {
|
|||
|
||||
.text-gray-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(82 82 91 / var(--tw-text-opacity));
|
||||
color: rgb(82 82 91 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(24 24 27 / var(--tw-text-opacity));
|
||||
color: rgb(24 24 27 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
@ -1104,26 +1129,26 @@ video {
|
|||
border-bottom-width: 4px;
|
||||
border-color: rgb(239 68 68 / 0.25);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(127 29 29 / var(--tw-text-opacity));
|
||||
color: rgb(127 29 29 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.link:hover,
|
||||
.prose a:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity));
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.link:is(.dark *),
|
||||
.prose a:is(.dark *) {
|
||||
border-color: rgb(254 202 202 / 0.25);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 165 165 / var(--tw-text-opacity));
|
||||
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.link:hover:is(.dark *),
|
||||
.prose a:hover:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.link,
|
||||
|
|
@ -1148,13 +1173,13 @@ video {
|
|||
.prose h3 {
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(153 27 27 / var(--tw-text-opacity));
|
||||
color: rgb(153 27 27 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.subheading:is(.dark *),
|
||||
.prose h3:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 165 165 / var(--tw-text-opacity));
|
||||
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
:is(.subheading, .prose h3)::before {
|
||||
|
|
@ -1171,13 +1196,13 @@ video {
|
|||
.code-block,
|
||||
pre {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.code-block:is(.dark *),
|
||||
pre:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.code-block,
|
||||
|
|
@ -1191,13 +1216,13 @@ pre {
|
|||
.code-inline,
|
||||
code {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.code-inline:is(.dark *),
|
||||
code:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.code-inline,
|
||||
|
|
@ -1298,12 +1323,12 @@ code {
|
|||
.card {
|
||||
border-radius: 0.75rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
|
||||
background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.card:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
|
||||
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
|
|
@ -1311,12 +1336,12 @@ code {
|
|||
|
||||
.card--highlighted {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
|
||||
background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.card--highlighted:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
|
||||
background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
|
|
@ -1332,12 +1357,12 @@ html:not(.dark) .light\:hidden {
|
|||
.hero strong {
|
||||
font-style: normal;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(185 28 28 / var(--tw-text-opacity));
|
||||
color: rgb(185 28 28 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hero strong:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(252 165 165 / var(--tw-text-opacity));
|
||||
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
/* Tippy */
|
||||
|
|
@ -1431,23 +1456,37 @@ html:not(.dark) .light\:hidden {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
html.dark .invert-colors {
|
||||
filter: invert(0.95);
|
||||
}
|
||||
|
||||
.button-fundraiser-shadow {
|
||||
box-shadow: var(--color-gray-900) 10px 10px 0px 0px;
|
||||
border: 2px solid var(--color-gray-900);
|
||||
}
|
||||
|
||||
html.dark .button-fundraiser-shadow {
|
||||
box-shadow: var(--color-gray-300) 10px 10px 0px 0px;
|
||||
border: 2px solid var(--color-gray-300);
|
||||
}
|
||||
|
||||
.dark\:hidden:is(.dark *) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark\:border-gray-800:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(39 39 42 / var(--tw-border-opacity));
|
||||
border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-gray-800:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-gray-900:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
|
||||
background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-red-500\/30:is(.dark *) {
|
||||
|
|
@ -1456,12 +1495,18 @@ html:not(.dark) .light\:hidden {
|
|||
|
||||
.dark\:text-gray-400:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(161 161 170 / var(--tw-text-opacity));
|
||||
color: rgb(161 161 170 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-gray-50:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(250 250 250 / var(--tw-text-opacity));
|
||||
color: rgb(250 250 250 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
@media not all and (min-width: 1280px) {
|
||||
.max-xl\:h-\[15rem\] {
|
||||
height: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (min-width: 1024px) {
|
||||
|
|
@ -1470,6 +1515,30 @@ html:not(.dark) .light\:hidden {
|
|||
}
|
||||
}
|
||||
|
||||
@media not all and (min-width: 768px) {
|
||||
.max-md\:mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.max-md\:flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.max-md\:flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.max-md\:text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (min-width: 640px) {
|
||||
.max-sm\:mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
|
@ -1481,6 +1550,10 @@ html:not(.dark) .light\:hidden {
|
|||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.md\:mr-3 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,20 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
<section class="container mx-auto px-6 py-6 min-h-[min(90vh,30rem)] grid place-items-center">
|
||||
<div class="text-center mb-12">
|
||||
<div class="text-balance mb-6 max-w-[30ch]" style="font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1"><p>Provozujeme nástroje pro komunikaci a sdílení</p>
|
||||
|
||||
</div>
|
||||
<div class="text-balance mb-8 max-w-[30ch]" style="font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1">
|
||||
<p><strong>Bez reklam, bez dohledu, pro všechny</strong></p></div>
|
||||
|
||||
<div class="text-balance mb-8 max-w-[30ch]" style="font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1">
|
||||
<p>Potřebujeme vaši podporu</p></div>
|
||||
<div class="flex justify-center flex-wrap gap-3">
|
||||
<a href="https://www.darujme.cz/nolog2025" class="button button--primary">Přispějte přes Darujme</a>
|
||||
<a href="https://cloud.nolog.cz/apps/photos/public/oop32Vhzi1uttK2KJhp7kIfDMyEK18Sr" class="button button--secondary">Sdílejte naši kampaň dál</a>
|
||||
|
||||
<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]">
|
||||
<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">Potřebujeme vaši podporu</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center max-md:flex-wrap gap-3">
|
||||
<a href="https://www.darujme.cz/nolog2025" class="button button--primary button-fundraiser-shadow my-2 md:mr-3">Přispějte přes Darujme</a>
|
||||
<a href="https://cloud.nolog.cz/apps/photos/public/oop32Vhzi1uttK2KJhp7kIfDMyEK18Sr" class="button button--secondary button-fundraiser-shadow my-2">Sdílejte naši kampaň dál</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
@ -27,8 +26,8 @@
|
|||
<h2 class="text-lg font-bold">Jak nás můžete podpořit?</h2>
|
||||
</header>
|
||||
<ul class="grid gap-x-6 gap-y-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="grid gap-x-4" style="grid-template-columns: auto 1fr; grid-template-rows: auto 1fr;">
|
||||
<span class="col-start-1 w-8 h-8 bg-white text-gray-900 grid place-content-center font-bold rounded-full">
|
||||
1
|
||||
|
|
@ -41,7 +40,7 @@
|
|||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="grid gap-x-4" style="grid-template-columns: auto 1fr; grid-template-rows: auto 1fr;">
|
||||
<span class="col-start-1 w-8 h-8 bg-white text-gray-900 grid place-content-center font-bold rounded-full">
|
||||
2
|
||||
|
|
@ -54,8 +53,8 @@
|
|||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
BIN
static/images/fundraising-star.webp
Normal file
BIN
static/images/fundraising-star.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Loading…
Reference in a new issue