diff --git a/content/donation-error.md b/content/donation-error.md new file mode 100644 index 00000000..eeaec8d9 --- /dev/null +++ b/content/donation-error.md @@ -0,0 +1,6 @@ +--- +title: Oops! +emoji: 😰 +--- + +Something went wrong while trying to register your donation. If you weren't using the form on the [thanks page](../thanks/) then please try there, otherwise please [reach out to me by email](../standing-invitation/). diff --git a/content/donation-registered.md b/content/donation-registered.md new file mode 100644 index 00000000..a540869c --- /dev/null +++ b/content/donation-registered.md @@ -0,0 +1,12 @@ +--- +title: Thank you! +emoji: 🙇‍♂️ +--- + +Thank you so much! It makes me _enormously_ happy that you're appreciating my work, and doubly so that you're willing to share what you have with others on my behalf. + +Money can set up some very strange incentives in humans, but donating to a charity, supporting a person who inspires you, investing in your community, and so many other acts of openness bring us closer together — for me, the entire point of all this. + +If you'd like to tell me about the person, group or cause that you contrinuted to on my behalf I'd [love to hear about it](../standing-invitation/)! + +_By the way, the counter on the [thanks page](../thanks/) can take a few minutes to update!_ diff --git a/content/thanks.md b/content/thanks.md new file mode 100644 index 00000000..87145e1f --- /dev/null +++ b/content/thanks.md @@ -0,0 +1,14 @@ +--- +title: Saying thank you +emoji: 💞 +--- + +Human connection is really important to me and, in that way and others, on this site and elsewhere, I try to act to leave the world better off than when I arrived. + +It's extremely nice to know when I've achieved that, but it means _even more_ to me when people "pay it forward". If you've appreciated anything on this site, or anything else I've done or made, you'd humble me by sharing your time, effort, money, privilege, or kindness with anyone you feel deserves it. + +Though money is the least of the valuable things I mentioned above, it can make a real difference in many places. If my efforts inspire you to donate money to any cause you feel is worthy, you can register that donation below to let me know. + +--- + +{{< donations >}} diff --git a/layouts/partials/about-me.html b/layouts/partials/about-me.html index eca4f5cf..b5def65d 100644 --- a/layouts/partials/about-me.html +++ b/layouts/partials/about-me.html @@ -1,5 +1,5 @@
- + A photo of me smiling, with short brown hair, a beard and glasses. Hello! I'm JP Hastings-Spital, a maker, software engineer, swing dancer, and all-round miriscient chap living in London, UK. I'm a principal engineer at Deliveroo.
diff --git a/layouts/shortcodes/donations.html b/layouts/shortcodes/donations.html new file mode 100644 index 00000000..f80d74e4 --- /dev/null +++ b/layouts/shortcodes/donations.html @@ -0,0 +1,199 @@ +{{ $donations := getJSON "https://api.val.town/v1/run/byjp.donations" }} +

Friends have donated £{{ $donations.totalGBP }} (across {{ $donations.currencyCount }} currencies) to worthy causes in thanks. Thank you!

+ + \ No newline at end of file diff --git a/themes/hello-friend-ng/assets/scss/_main.scss b/themes/hello-friend-ng/assets/scss/_main.scss index 59a3641b..480a29ef 100644 --- a/themes/hello-friend-ng/assets/scss/_main.scss +++ b/themes/hello-friend-ng/assets/scss/_main.scss @@ -46,16 +46,6 @@ body { background-color: $light-background; color: $light-color; } - - [data-theme=dark] & { - background-color: $dark-background; - color: $dark-color; - } - - [data-theme=light] & { - background-color: $light-background; - color: $light-color; - } } *[data-emoji] { @@ -627,4 +617,128 @@ a[href^="#fn:"] { p:last-of-type { margin-bottom: 0; } -} \ No newline at end of file +} + +input { + border: 1px solid $light-color-secondary; + background-color: $light-background; + color: $light-color; + + @media (prefers-color-scheme: dark) { + border: 1px solid $dark-color-secondary; + background-color: $dark-background; + color: $dark-color; + } + + @media (prefers-color-scheme: light) { + border: 1px solid $light-color-secondary; + background-color: $light-background; + color: $light-color; + } +} + +input[type="submit"] { + border-color: var(--accent); + color: var(--accent); + + &:hover { + background-color: var(--accent); + color: $light-color; + } +} + +select { + // A reset of styles, including removing the default dropdown arrow + appearance: none; + background-color: transparent; + border: none; + padding: 0 1em 0 0; + margin: 2px 2px 2.5px; + width: 100%; + font-family: inherit; + font-size: inherit; + cursor: inherit; + line-height: inherit; + + color: $light-color; + + @media (prefers-color-scheme: dark) { + color: $dark-color; + } + + @media (prefers-color-scheme: light) { + color: $light-color; + } + + // Stack above custom arrow + z-index: 1; + + // Remove dropdown arrow in IE10 & IE11 + // @link https://www.filamentgroup.com/lab/select-css.html + &::-ms-expand { + display: none; + } + + // Remove focus outline, will add on alternate element + outline: none; +} + +.select { + display: inline-grid; + grid-template-areas: "select"; + align-items: center; + position: relative; + padding: 0 0.3em 0 0; + + select, + &::after { + grid-area: select; + } + + border: 1px solid $light-color-secondary; + @media (prefers-color-scheme: dark) { + border: 1px solid $dark-color-secondary; + } + @media (prefers-color-scheme: light) { + border: 1px solid $light-color-secondary; + } + + font-size: inherit; + cursor: pointer; + line-height: 1.0; + + background-color: $light-background; + @media (prefers-color-scheme: dark) { + background-color: $dark-background; + } + @media (prefers-color-scheme: light) { + background-color: $light-background; + } + + // Custom arrow + &:not(.select--multiple)::after { + content: ""; + justify-self: end; + width: 0.64em; + height: 0.4em; + background-color: $light-color-secondary; + @media (prefers-color-scheme: dark) { + background-color: $dark-color-secondary; + } + @media (prefers-color-scheme: light) { + background-color: $light-color-secondary; + } + clip-path: polygon(100% 0%, 0 0%, 50% 100%); + } +} + +// Interim solution until :focus-within has better support +select:focus + .focus { + position: absolute; + top: -1px; + left: -1px; + right: -1px; + bottom: -1px; + border: 2px solid var(--accent); + border-radius: inherit; +} diff --git a/themes/hello-friend-ng/layouts/partials/head.html b/themes/hello-friend-ng/layouts/partials/head.html index c2c7deb6..ea3f0355 100644 --- a/themes/hello-friend-ng/layouts/partials/head.html +++ b/themes/hello-friend-ng/layouts/partials/head.html @@ -24,7 +24,7 @@ {{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Fingerprint }} - + {{ range $val := $.Site.Params.customCSS }} {{ if gt (len $val) 0 }}