From 128698b2a3c93565cd5a201eccee53ac51318ae4 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:27:19 +0800
Subject: [PATCH] Set pride flag aspect ratio

---
 .../myarticles/living-with-retinitis-pigmentosa.md     | 10 +---------
 src/assets/css/pridesymbols.css                        | 10 +++++++++-
 src/index.njk                                          |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/articles/myarticles/living-with-retinitis-pigmentosa.md b/src/articles/myarticles/living-with-retinitis-pigmentosa.md
index 2c5390aa..fd55824c 100644
--- a/src/articles/myarticles/living-with-retinitis-pigmentosa.md
+++ b/src/articles/myarticles/living-with-retinitis-pigmentosa.md
@@ -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.
 
-{%- css %}
-.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>
\ No newline at end of file
+<div class="flag-el flag-disability" role="img" aria-label="Disability Pride flag coded in CSS" style="margin-top: 1.7em;"></div>
\ No newline at end of file
diff --git a/src/assets/css/pridesymbols.css b/src/assets/css/pridesymbols.css
index c5c7e38f..1e21cca4 100644
--- a/src/assets/css/pridesymbols.css
+++ b/src/assets/css/pridesymbols.css
@@ -2,6 +2,7 @@
     Pride flag CSS backgrounds
     Credit: KOTOR Community Portal: https://kotor.neocities.org/
  */
+
 .flag-rainbow {
 	background: linear-gradient(
 		#e40303 0 16.67%,
@@ -214,4 +215,11 @@
             #3BB07D 30% 65%,
             #595959 0
         );
-}
\ No newline at end of file
+}
+
+.flag-el {
+    display: inline-block;
+    width: 100%;
+    aspect-ratio: 14 / 9;
+}
+.flag-el.flag-disability { aspect-ratio: 4 / 3; }
\ No newline at end of file
diff --git a/src/index.njk b/src/index.njk
index 8b98178a..d4135b62 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -64,7 +64,7 @@ eleventyComputed:
 
 <section class="content__section">
     <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) -%}
         <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">