From 0e223e473f8f3a7a91ab3e13c8b6b04a9ff488e2 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:47:20 +0800
Subject: [PATCH] Initiate variables for Pride flag CSS and demo height

---
 ...23-responsive-disability-pride-flag-css.md | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md b/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md
index 8fccaea1..95bcbb3a 100644
--- a/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md
+++ b/src/blog/posts/2024-07-23-responsive-disability-pride-flag-css.md
@@ -6,8 +6,9 @@ updated: 2024-12-15T18:43:47+0800
 categories: ["css", "disability pride"]
 ---
 
-{%- css %}
-.disability-pride-flag {
+{% set demoHeight = "23rem" %}
+
+{% set disabilityPrideCss %}.disability-pride-flag {
     background:
         linear-gradient(
             37deg,
@@ -19,12 +20,11 @@ categories: ["css", "disability pride"]
             #3BB07D 30% 65%,
             #595959 0
         );
-}
+}{% endset %}
 
-.disability-pride-flag.demo {
-    width: 100%;
-    height: 20rem;
-}
+{%- css %}
+{{ disabilityPrideCss }}
+.disability-pride-flag.demo { height: {{ demoHeight }}; }
 {% endcss %}
 
 <div class="disability-pride-flag demo" role="img" aria-label="Demo of the Disability Pride flag coded in CSS"></div>
@@ -36,23 +36,13 @@ My Disability Pride flag CSS background is done with a combination of the CSS [`
 Here is the CSS snippet for a responsive Disability Pride Flag background:
 
 ```css
-.disability-pride-flag {
-    background:
-        linear-gradient(
-            37deg,
-            #595959 0 35%,
-            #CF7280 30% 41%,
-            #EEDE77 30% 47%,
-            #E8E8E8 30% 53%,
-            #7bc2e0 30% 59%,
-            #3BB07D 30% 65%,
-            #595959 0
-        );
-}
+{{ disabilityPrideCss }}
 ```
 
 After copying the above snippet in a CSS stylesheet or the HTML `<style>` tags, to apply the background to an HTML element, simply add the CSS class name `disability-pride-flag` (you can rename the class name if you want) to the HTML element's `class` attribute.
 
+Note that you want to apply the Pride flag to an empty element, you also need to set the element's [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) or [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) property to make the Pride flag background visible. For example, the demo above sets the `height` property to {{ demoHeight }}.
+
 I was inspired to code a Disbility Pride flag background in CSS by other people's CSS code snippets of LGBTQ+ pride flag backgrounds, such as [Alvaro Montoro's LGBTQ+ Flags Coded in CSS demo](https://codepen.io/alvaromontoro/full/NWyBrZJ).
 
 Since Ann Magill released the Disability Pride flag to the public domain under [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/), I am doing the same to my responsive Disability Pride Flag CSS background. Therefore, you are free to use my code and do what you want with it without asking for permission or crediting me.