Footer: Add queer flag #109

... as a symbol of tolerance.

grafik

I like the idea. However, I wonder if we'll get a lot of backlash due to the colors being rather intense (considering the dark theme; also see feedback in Codeberg/Community#1664 for larger banners).

We should consider

• to avoid distraction during work
  • showing the flag only on specific pages, such as the landing page
  • showing the flag on all pages for guests and only on specific pages for logged-in users
  • gathering feedback about the acceptance across various groups and usage scenarios
• adjusting the colors to match the theme (e.g. dark themes). We could, for instance, use the ADHD pride flag in some cases

Further, I don't think this patch is particularly efficient. For instance, I see no need to declare a variable for a single usage of a color. It is unnecessary CSS, and having patches in two different places makes maintenance harder than it needs to be.

• showing the flag on all pages for guests and only on specific pages for logged-in users
• adjusting the colours to match the theme (e.g. dark themes)

Good ideas, but outside my knowledge of the website's structure :)

(Perhaps, throwing the flag in everyone's face for a day or two before adjusting its behaviour might not be too undesirable though 😄)

I see no need to declare a variable for a single usage of a colour.

In case we want to show different versions in different places under different circumstances, for example in the mobile layout (well, this PR is just a draft 🤷) ^^

@pixelcode can you do the following adjustments to this:

• target Forgejo v12 branch
• simplify the HTML code: Only a single element with no children
• move the colours to CSS code only using a gradient (from a quick glimpse, https://css-tricks.com/books/greatest-css-tricks/hard-stop-gradients/ should elaborate enough on what I have in mind)

Optional changes:

• hardcode the colours instead of using names (will make the CSS slightly smaller, which would be great if this is intended to be present long-term)
• move the CSS code into the light theme only, and potentially provide darker colours for dark theme(s)

I love this idea! And for what it's worth, as a dark mode user, I don't mind the bright colors if the line is as thin as in the screenshot above.

As Otto suggested, here's a hard stop gradient that greatly simplifies the code:

background: linear-gradient(90deg, #ea392f 0%, #ea392f 9.091%, #f28917 9.091%, #f28917 18.182%, #eecb12 18.182%, #eecb12 27.273%, #78b82a 27.273%, #78b82a 36.364%, #4375ca 36.364%, #4375ca 45.455%, #c346e3 45.455%, #c346e3 54.545%, #7bcce5 54.545%, #7bcce5 63.636%, #eaeaea 63.636%, #eaeaea 72.727%, #f4aec8 72.727%, #f4aec8 81.818%, #000000 81.818%, #000000 90.909%, #945516 90.909%, #945516 100%);

It may make more sense to make the colors slightly less bright on the dark theme, but regardless, I like how this looks! :)

@scy wrote in #109 (comment):

As Otto suggested, here's a hard stop gradient that greatly simplifies the code:

background: linear-gradient(90deg, #ea392f 0%, #ea392f 9.091%, #f28917 9.091%, #f28917 18.182%, #eecb12 18.182%, #eecb12 27.273%, #78b82a 27.273%, #78b82a 36.364%, #4375ca 36.364%, #4375ca 45.455%, #c346e3 45.455%, #c346e3 54.545%, #7bcce5 54.545%, #7bcce5 63.636%, #eaeaea 63.636%, #eaeaea 72.727%, #f4aec8 72.727%, #f4aec8 81.818%, #000000 81.818%, #000000 90.909%, #945516 90.909%, #945516 100%);

Testing this, not sure if I agree with doing different colors for dark theme. Looks good to me on Forgejo and Codeberg dark theme, not too bright (other elements are definitely brighter).

Made my own version at #114 that should, if I read all correctly, adhere to the specification.

Implemented in #114