Use stylised tooltips for pride buttons on home page
This commit is contained in:
parent
db612a80ae
commit
5afed44d6e
|
@ -132,6 +132,12 @@ p + .adoptables { margin-top: 1em; }
|
||||||
.tooltip { display: none; }
|
.tooltip { display: none; }
|
||||||
.tipcontainer { position: relative; }
|
.tipcontainer { position: relative; }
|
||||||
|
|
||||||
|
.tipactivator {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.tipactivator:hover + .tooltip,
|
.tipactivator:hover + .tooltip,
|
||||||
.tipactivator:focus + .tooltip {
|
.tipactivator:focus + .tooltip {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -73,15 +73,23 @@ eleventyComputed:
|
||||||
<section class="content__section">
|
<section class="content__section">
|
||||||
<h2>Always Proud</h2>
|
<h2>Always Proud</h2>
|
||||||
<div class="flag-progress-intersex-lesbian" role="img" aria-label="Custom pride flag which combines the lesbian pride flag and the progress pride flag triangle" style="height: 20rem; margin-bottom: 1em;"></div>
|
<div class="flag-progress-intersex-lesbian" role="img" aria-label="Custom pride flag which combines the lesbian pride flag and the progress pride flag triangle" style="height: 20rem; margin-bottom: 1em;"></div>
|
||||||
<div class="web-btn-wrapper">
|
{%- macro prideButton(file, alt, tooltip=alt, width=88, height=31) -%}
|
||||||
<img src="/assets/buttons/pride/progress.png" alt="Website button of the 2018 Progress Flag" title="2018 Progress Flag by Daniel Quasar (2018)" width="88" height="31" loading="lazy">
|
<li class="tipcontainer">
|
||||||
<img src="/assets/buttons/pride/9_stripe.png" alt="Website button of the 9 stripe rainbow flag" title="Nine-Stripe Rainbow Flag by Gilbert Baker (2017)" width="88" height="31" loading="lazy">
|
<button class="tipactivator">
|
||||||
<img src="/assets/buttons/pride/lesbian.png" alt="Website button of the lesbian pride flag" title="I am a lesbian" width="88" height="31" loading="lazy">
|
<img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" loading="lazy">
|
||||||
<img src="/assets/buttons/pride/nonbinary.png" alt="Website button of the non-binary pride flag" title="I am non-binary" width="88" height="31" loading="lazy">
|
</button>
|
||||||
<img src="/assets/buttons/pride/demigirl.png" alt="Website button of the demigirl pride flag" title="I am a demiwoman" width="88" height="31" loading="lazy">
|
<p class="tooltip">{{ tooltip }}</p>
|
||||||
<img src="/assets/buttons/pride/agender.png" alt="Website button of the agender pride flag" title="I am agender" width="88" height="31" loading="lazy">
|
</li>
|
||||||
<img src="/assets/buttons/pride/bigender.png" alt="Website button of the bigender pride flag" title="I am bigender" width="88" height="31" loading="lazy">
|
{%- endmacro -%}
|
||||||
</div>
|
<ul class="web-btn-wrapper">
|
||||||
|
{{ prideButton("progress", "2018 Progress Flag", "2018 Progress Flag by Daniel Quasar (2018)") }}
|
||||||
|
{{ prideButton("9_stripe", "9 stripe rainbow flag", "Nine-Stripe Rainbow Flag by Gilbert Baker (2017)") }}
|
||||||
|
{{ prideButton("lesbian", "Lesbian pride flag", "I am a lesbian") }}
|
||||||
|
{{ prideButton("nonbinary", "Non-binary pride flag", "I am a non-binary") }}
|
||||||
|
{{ prideButton("demigirl", "Demigirl pride flag", "I am a demiwoman") }}
|
||||||
|
{{ prideButton("agender", "Agender pride flag", "I am agender") }}
|
||||||
|
{{ prideButton("bigender", "Bigender pride flag", "I am bigender") }}
|
||||||
|
</ul>
|
||||||
<p>Credit to <a href="https://rainy.gay/pride/pridebuttons">Dime</a> for these pride buttons!</p>
|
<p>Credit to <a href="https://rainy.gay/pride/pridebuttons">Dime</a> for these pride buttons!</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue