diff options
| -rw-r--r-- | _sass/main.scss | 51 | ||||
| -rw-r--r-- | assets/images/donation-qrcode-alipay.jpg | bin | 0 -> 49964 bytes | |||
| -rw-r--r-- | assets/images/donation-qrcode-wechat.jpg | bin | 0 -> 47799 bytes | |||
| -rw-r--r-- | wall-of-love.markdown | 43 |
4 files changed, 94 insertions, 0 deletions
diff --git a/_sass/main.scss b/_sass/main.scss index ac8d238..e10513b 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -183,3 +183,54 @@ body { align-items: center; } } + +.donation { + margin-block-end: 2rem; + + @media (min-width: 48rem) { + width: 40%; + margin-inline-start: 2rem; + float: right; + } +} + +.donation-title { + font-size: 1.25rem; +} + +.donation-details { + margin-top: 1rem; + background-color: var(--color-neutral-900); + border: 1px solid var(--color-neutral-800); + border-radius: 0.5rem; +} + +.donation-summary { + display: flex; + align-items: center; + padding-block: 1rem; + padding-inline: 1rem; + gap: 0.5rem; + font-weight: 500; + font-size: 0.875rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M4.22 6.222a.75.75 0 0 1 1.06 0L8 8.942l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E"); + background-position: right 1rem top 50%; + background-repeat: no-repeat; + list-style: none; + cursor: pointer; +} + +.donation-summary + p { + padding: 1rem; +} + +.donation-details[open] .donation-summary { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M11.78 9.783a.75.75 0 0 1-1.06 0L8 7.063l-2.72 2.72a.75.75 0 1 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06' clip-rule='evenodd'/%3E%3C/svg%3E"); + border-bottom: 1px solid var(--color-neutral-800); +} + +.donation-note { + margin-block-start: 1rem; + font-size: 0.875rem; + color: var(--color-neutral-600); +} diff --git a/assets/images/donation-qrcode-alipay.jpg b/assets/images/donation-qrcode-alipay.jpg Binary files differnew file mode 100644 index 0000000..7c3a30c --- /dev/null +++ b/assets/images/donation-qrcode-alipay.jpg diff --git a/assets/images/donation-qrcode-wechat.jpg b/assets/images/donation-qrcode-wechat.jpg Binary files differnew file mode 100644 index 0000000..2a3e689 --- /dev/null +++ b/assets/images/donation-qrcode-wechat.jpg diff --git a/wall-of-love.markdown b/wall-of-love.markdown index 86ca867..0af13a0 100644 --- a/wall-of-love.markdown +++ b/wall-of-love.markdown @@ -5,5 +5,48 @@ layout: default Big thanks to everyone keeping this project alive and breathing. You’re the real reason the fans are still spinning. +<section class="donation"> + <h2 class="donation-title"> + Love our work? Buy us a coffee! + </h2> + <details class="donation-details" name="qrcodes" open> + <summary class="donation-summary"> + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" class="donation-icon"> + <path fill="#1aad19" d="M5.091 8.703a.45.45 0 0 1-.21.052.46.46 0 0 1-.407-.248l-.03-.07-1.275-2.904a.3.3 0 0 1-.022-.102c0-.134.105-.242.234-.242q.079.002.14.048l1.503 1.112a.68.68 0 0 0 .622.074l7.072-3.27C11.45 1.604 9.362.589 7 .589 3.134.588 0 3.3 0 6.647c0 1.825.943 3.468 2.419 4.579a.49.49 0 0 1 .17.549l-.314 1.222c-.015.057-.038.117-.038.177 0 .134.104.243.233.243.051 0 .092-.02.135-.046l1.533-.918a.7.7 0 0 1 .371-.112.7.7 0 0 1 .206.032A8 8 0 0 0 7 12.705c3.866 0 7-2.712 7-6.058 0-1.014-.29-1.968-.797-2.808l-8.06 4.833z"/> + </svg> + WeChat + </summary> + <p> + <img + src="{{ '/assets/images/donation-qrcode-wechat.jpg' | relative_url }}" + alt="Donate via Alipay" + width="128" + height="128" + /> + </p> + </details> + <details class="donation-details" name="qrcodes"> + <summary class="donation-summary"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"> + <path fill="#1677ff" d="M12.758 1.502H3.243A2.243 2.243 0 0 0 1 3.745v9.515a2.243 2.243 0 0 0 2.243 2.242h9.515A2.24 2.24 0 0 0 15 13.26V3.745a2.24 2.24 0 0 0-2.242-2.243"/> + <path fill="#fff" d="M12.527 10.294c-.56-.188-1.312-.475-2.15-.778.503-.875.905-1.87 1.17-2.952h-2.76V5.57h3.38v-.555h-3.38V3.358h-1.38c-.242 0-.242.238-.242.238v1.418H3.747v.555h3.418v.994H4.342v.554h5.475c-.2.69-.47 1.34-.788 1.928-1.776-.586-3.673-1.06-4.863-.768-.762.187-1.252.522-1.54.873-1.323 1.61-.375 4.053 2.418 4.053 1.652 0 3.243-.92 4.476-2.437 1.84.883 5.48 2.402 5.48 2.402v-2.164s-.456-.036-2.473-.71m-7.743 1.974c-2.178 0-2.823-1.715-1.746-2.654.36-.317 1.016-.472 1.365-.506 1.293-.127 2.491.366 3.905 1.056-.993 1.295-2.259 2.104-3.524 2.104"/> + </svg> + Alipay + </summary> + <p> + <img + src="{{ '/assets/images/donation-qrcode-alipay.jpg' | relative_url }}" + alt="Donate via Alipay" + width="128" + height="128" + /> + </p> + </details> + <p class="donation-note"> + The thank-you list is tracked manually, and we will process your + donation within 3 days. Thank you for your support and patience. + </p> +</section> + - **王同学。** — ¥66.00 via _Alipay_ on _October 5th, 2025_ - **吴**** — Donated a front panel on _December 15th, 2024_ |
