Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Set pride flag aspect ratio

This commit is contained in:
Helen Chong 2024-12-19 23:27:19 +08:00
parent 32d33e044a
commit 128698b2a3
3 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/articles/myarticles/living-with-retinitis-pigmentosa.md
View File

@ -23,12 +23,4 @@ I do not write this article to ask for pity. I have accepted that I am visually
I coded a [responsive Disability Pride flag in CSS](/projects/snippets/disability-pride-flag-background) during the Disability Pride Month in July (which is also my birth month) 2024, so it would be fitting to conclude this article with this Pride flag I coded. I coded a [responsive Disability Pride flag in CSS](/projects/snippets/disability-pride-flag-background) during the Disability Pride Month in July (which is also my birth month) 2024, so it would be fitting to conclude this article with this Pride flag I coded.
{%- css %} <div class="flag-el flag-disability" role="img" aria-label="Disability Pride flag coded in CSS" style="margin-top: 1.7em;"></div>
.flag-disability-article {
margin-top: 1.7em;
width: 100%;
height: 20rem;
}
{% endcss %}
<div class="flag-disability flag-disability-article" role="img" aria-label="Disability Pride flag coded in CSS"></div>

8
src/assets/css/pridesymbols.css
View File

@ -2,6 +2,7 @@
Pride flag CSS backgrounds Pride flag CSS backgrounds
Credit: KOTOR Community Portal: https://kotor.neocities.org/ Credit: KOTOR Community Portal: https://kotor.neocities.org/
*/ */
.flag-rainbow { .flag-rainbow {
background: linear-gradient( background: linear-gradient(
#e40303 0 16.67%, #e40303 0 16.67%,
@ -215,3 +216,10 @@
#595959 0 #595959 0
); );
} }
.flag-el {
display: inline-block;
width: 100%;
aspect-ratio: 14 / 9;
}
.flag-el.flag-disability { aspect-ratio: 4 / 3; }

2
src/index.njk
View File

@ -64,7 +64,7 @@ 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-el flag-progress-intersex-lesbian" role="img" aria-label="Custom pride flag which combines the lesbian pride flag and the progress pride flag triangle" style="margin-bottom: 1em;"></div>
{%- macro prideButton(file, alt, width=88, height=31) -%} {%- macro prideButton(file, alt, width=88, height=31) -%}
<li data-tooltip> <li data-tooltip>
<img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" data-tooltip-trigger title="{{ alt }}" width="{{ width }}" height="{{ height }}" loading="lazy" tabindex="0"> <img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" data-tooltip-trigger title="{{ alt }}" width="{{ width }}" height="{{ height }}" loading="lazy" tabindex="0">