add join-discord-button

[chantastic]

Goal is to add a more inviting Join Discord button. Draft now because it will depend on a couple other PRs in the pipeline.

[chantastic]

For anyone who lands on this, it is very draft — a quick proof of concept.

The big question i'm trying to sort out is the best approach for extract buttons like this.

{% include partials/join-discord-button.html %} does feel a little cumbersome. But maybe that's not a huge deal if it's only ever added at a layout level.

shortcode syntax feels nice {% join-discord-button %} but also conceptually odd.

not sure if we want to go down the rabbit hole of Custom Elements — which might provide a nicer authoring API but be very irritating to maintain

[fokusferit]

I have to think (and learn) about what is the best approach here, meanwhile I had some thoughts and played around in the Preview with the button:

Banner-like:

Using the other Design Idea you head in #5:

Some soft box-shadow and making button 2/3 of width, somehow creating a visual focus on "Joining Discord" 😄

[chantastic]

@fokusferit Thanks for iterating on these!

conceptually, i really like the idea of banner buttons. they solve a lot of design challenges — mostly that button content is always centered, which looks kinda weird with left-aligned. you design here helps with that a lot.

my concern (something i've not been able to resolve myself) is how they look "not button-y". it's hard to describe but i think it could be easy to overlook them as actionable.

that said, i'm a big fan of that "flat 3D" aesthetic in the last example. could be a cool hover effect!

[chantastic]

@fokusferit i'm going to merge this as-is, just to keep the templates from getting further out of sync. but i'd like to continue conversations regarding design.

i do think this and the homepage are overdue for a rethinking of the information architecture, now that most of the pieces are in place