Build: (128698b) Set pride flag aspect ratio

This commit is contained in:
helenclx 2024-12-19 15:27:56 +00:00
parent e79de07e57
commit 4d7db8f1e9
9 changed files with 62 additions and 59 deletions

View File

@ -386,7 +386,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>
@ -396,7 +396,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>
@ -406,7 +406,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>

View File

@ -48,12 +48,7 @@
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/a11y-syntax-highlighting-dark.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
<style>.flag-disability-article {
margin-top: 1.7em;
width: 100%;
height: 20rem;
}
.content__nav {
<style>.content__nav {
padding: 1.2em clamp(1em, 5%, 1.5em);
background-color: var(--clr-content-bg);
}
@ -388,7 +383,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<div class="article__info">
<p>
724 words.
726 words.
Posted on <time datetime="2024-12-15T13:14:07+0800">15 December 2024</time> by Leilukin
</p>
@ -422,7 +417,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<p>Being diagnosed with a genetic eye disease that can cause vision loss also made me glad that I have started to learn to use screen readers. Even before my diagnosis, I have been using screen readers such as NVDA on Windows and TalkBack on Android to test website accessibility, including my own websites. It is a good idea to prepare myself for the possibility of losing enough vision to the degree of needing low vision aid and assistive technologies. In fact, since I was diagnosed with RP through a dilated eye exam, I was unable to see things clearly for about 12 hours after receiving the eye drop that dilated my eyes, so for the immediate couple of hours after seeing my eye doctor, I needed to activate TalkBack to be able to read things on my Android phone. Furthermore, I am also planning on learning braille.</p>
<p>I do not write this article to ask for pity. I have accepted that I am visually impaired and autistic, and my disabilities are a huge part of who I am, as much as being a non-binary lesbian on the asexual and aromantic spectrum. Instead, I am sharing my story to let other people who have similar conditions that they are not alone, and we are worthy.</p>
<p>I coded a <a href="/projects/snippets/disability-pride-flag-background">responsive Disability Pride flag in CSS</a> 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.</p>
<div class="flag-disability flag-disability-article" role="img" aria-label="Disability Pride flag coded in CSS"></div>
<div class="flag-el flag-disability" role="img" aria-label="Disability Pride flag coded in CSS" style="margin-top: 1.7em;"></div>
</article>

View File

@ -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%,
@ -215,3 +216,10 @@
#595959 0
);
}
.flag-el {
display: inline-block;
width: 100%;
aspect-ratio: 14 / 9;
}
.flag-el.flag-disability { aspect-ratio: 4 / 3; }

View File

@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>
@ -399,7 +399,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>
@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>

View File

@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>

View File

@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>
@ -399,7 +399,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
</a>
</p>
<time datetime="Thu Dec 19 2024 13:13:26 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
<time datetime="Thu Dec 19 2024 15:27:44 GMT+0000 (Coordinated Universal Time)">19 December 2024</time>
</li>
<li>

View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.com/feed.xml" rel="self"/>
<link href="https://leilukin.com"/>
<updated>2024-12-19T13:13:30Z</updated>
<updated>2024-12-19T15:27:52Z</updated>
<id>https://leilukin.com/</id>
<author>
<name>Leilukin</name>
@ -67,7 +67,7 @@
&lt;p&gt;Being diagnosed with a genetic eye disease that can cause vision loss also made me glad that I have started to learn to use screen readers. Even before my diagnosis, I have been using screen readers such as NVDA on Windows and TalkBack on Android to test website accessibility, including my own websites. It is a good idea to prepare myself for the possibility of losing enough vision to the degree of needing low vision aid and assistive technologies. In fact, since I was diagnosed with RP through a dilated eye exam, I was unable to see things clearly for about 12 hours after receiving the eye drop that dilated my eyes, so for the immediate couple of hours after seeing my eye doctor, I needed to activate TalkBack to be able to read things on my Android phone. Furthermore, I am also planning on learning braille.&lt;/p&gt;
&lt;p&gt;I do not write this article to ask for pity. I have accepted that I am visually impaired and autistic, and my disabilities are a huge part of who I am, as much as being a non-binary lesbian on the asexual and aromantic spectrum. Instead, I am sharing my story to let other people who have similar conditions that they are not alone, and we are worthy.&lt;/p&gt;
&lt;p&gt;I coded a &lt;a href=&quot;https://leilukin.com/projects/snippets/disability-pride-flag-background&quot;&gt;responsive Disability Pride flag in CSS&lt;/a&gt; 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.&lt;/p&gt;
&lt;div class=&quot;flag-disability flag-disability-article&quot; role=&quot;img&quot; aria-label=&quot;Disability Pride flag coded in CSS&quot;&gt;&lt;/div&gt;</content>
&lt;div class=&quot;flag-el flag-disability&quot; role=&quot;img&quot; aria-label=&quot;Disability Pride flag coded in CSS&quot; style=&quot;margin-top: 1.7em;&quot;&gt;&lt;/div&gt;</content>
</entry>
<entry>

View File

@ -460,7 +460,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
<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><ul class="web-graphics">
<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><ul class="web-graphics">
<li data-tooltip="">
<img src="/assets/buttons/pride/progress.png" alt="Progress Flag by Daniel Quasar (2018)" data-tooltip-trigger="" title="Progress Flag by Daniel Quasar (2018)" width="88" height="31" loading="lazy" tabindex="0">
</li>

View File

@ -1190,229 +1190,229 @@
</url>
<url>
<loc>https://leilukin.com/blog/posts/</loc>
<lastmod>2024-12-19T13:13:26.634Z</lastmod>
<lastmod>2024-12-19T15:27:44.165Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/changelogs/2022/</loc>
<lastmod>2024-12-19T13:13:26.639Z</lastmod>
<lastmod>2024-12-19T15:27:44.170Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/changelogs/2023/</loc>
<lastmod>2024-12-19T13:13:26.639Z</lastmod>
<lastmod>2024-12-19T15:27:44.170Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/changelogs/2024/</loc>
<lastmod>2024-12-19T13:13:26.639Z</lastmod>
<lastmod>2024-12-19T15:27:44.170Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/changelogs/layouts/</loc>
<lastmod>2024-12-19T13:13:26.639Z</lastmod>
<lastmod>2024-12-19T15:27:44.170Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/</loc>
<lastmod>2024-12-19T13:13:26.640Z</lastmod>
<lastmod>2024-12-19T15:27:44.171Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/projects/code/bellabuffs-phpmailer/</loc>
<lastmod>2024-12-19T13:13:26.640Z</lastmod>
<lastmod>2024-12-19T15:27:44.171Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/projects/playlists/</loc>
<lastmod>2024-12-19T13:13:26.640Z</lastmod>
<lastmod>2024-12-19T15:27:44.171Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/projects/snippets/disability-pride-flag-background/</loc>
<lastmod>2024-12-19T13:13:26.640Z</lastmod>
<lastmod>2024-12-19T15:27:44.171Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/asummersend/gallery/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/asummersend/playlists/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/asummersend/trivia/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/cassettebeasts/articles/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/cassettebeasts/facts/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/cassettebeasts/featured/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/cassettebeasts/gamelog/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/cassettebeasts/resources/</loc>
<lastmod>2024-12-19T13:13:26.641Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/starwarskotor/articles/</loc>
<lastmod>2024-12-19T13:13:26.642Z</lastmod>
<lastmod>2024-12-19T15:27:44.172Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/starwarskotor/guides/</loc>
<lastmod>2024-12-19T13:13:26.642Z</lastmod>
<lastmod>2024-12-19T15:27:44.173Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/</loc>
<lastmod>2024-12-19T13:13:26.642Z</lastmod>
<lastmod>2024-12-19T15:27:44.173Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/</loc>
<lastmod>2024-12-19T13:13:26.642Z</lastmod>
<lastmod>2024-12-19T15:27:44.173Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/starwarskotor/universes/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/archive/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/categories/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/changelogs/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/about/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/adoptables/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/articles/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/blog/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/guestbook/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/links/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/now/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/projects/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/shrines/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.174Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/accessibility/</loc>
<lastmod>2024-12-19T13:13:26.643Z</lastmod>
<lastmod>2024-12-19T15:27:44.175Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://leilukin.com/colophon/</loc>
<lastmod>2024-12-19T13:13:26.644Z</lastmod>
<lastmod>2024-12-19T15:27:44.175Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>