From f29960a1034b58a17b8064ced7f353f0c972d082 Mon Sep 17 00:00:00 2001 From: helenclx Date: Sun, 15 Dec 2024 10:29:04 +0000 Subject: [PATCH] Build: (3bdf7a1) Refactor CSS for Disability Pride flag background --- archive/index.html | 6 +- assets/css/pridesymbols.css | 17 ++-- categories/star-wars-kotor-2/index.html | 6 +- categories/star-wars-kotor/index.html | 2 +- categories/video-game-mods/index.html | 4 +- changelogs/2024/index.html | 1 + changelogs/index.html | 3 +- feed.xml | 5 +- index.html | 1 + .../index.html | 21 +++-- sitemap.xml | 78 +++++++++---------- 11 files changed, 80 insertions(+), 64 deletions(-) diff --git a/archive/index.html b/archive/index.html index 0887e8ac..72bd063b 100644 --- a/archive/index.html +++ b/archive/index.html @@ -386,7 +386,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

- +
  • @@ -396,7 +396,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • @@ -406,7 +406,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • diff --git a/assets/css/pridesymbols.css b/assets/css/pridesymbols.css index de1d762e..c5c7e38f 100644 --- a/assets/css/pridesymbols.css +++ b/assets/css/pridesymbols.css @@ -201,10 +201,17 @@ background-size: 100% 100%; } +/* Coded by myself */ .flag-disability { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E"); - background-color: #595959; - background-repeat: no-repeat; - background-size: auto 100%; - background-position: center; + background: + linear-gradient( + 37deg, + #595959 0 35%, + #CF7280 30% 41%, + #EEDE77 30% 47%, + #E8E8E8 30% 53%, + #7bc2e0 30% 59%, + #3BB07D 30% 65%, + #595959 0 + ); } \ No newline at end of file diff --git a/categories/star-wars-kotor-2/index.html b/categories/star-wars-kotor-2/index.html index d1e26550..d2f3cac1 100644 --- a/categories/star-wars-kotor-2/index.html +++ b/categories/star-wars-kotor-2/index.html @@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • @@ -399,7 +399,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • @@ -409,7 +409,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • diff --git a/categories/star-wars-kotor/index.html b/categories/star-wars-kotor/index.html index b6ac8e2a..269c6f82 100644 --- a/categories/star-wars-kotor/index.html +++ b/categories/star-wars-kotor/index.html @@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • diff --git a/categories/video-game-mods/index.html b/categories/video-game-mods/index.html index 145d2af1..a1bb24cd 100644 --- a/categories/video-game-mods/index.html +++ b/categories/video-game-mods/index.html @@ -389,7 +389,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • @@ -399,7 +399,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    - +
  • diff --git a/changelogs/2024/index.html b/changelogs/2024/index.html index 8a4cc19b..cc31d57d 100644 --- a/changelogs/2024/index.html +++ b/changelogs/2024/index.html @@ -436,6 +436,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
    diff --git a/changelogs/index.html b/changelogs/index.html index ed25764c..5c2a3226 100644 --- a/changelogs/index.html +++ b/changelogs/index.html @@ -471,9 +471,10 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Latest Changelogs

    -

    +

    diff --git a/feed.xml b/feed.xml index 05991771..fe3a3ab8 100644 --- a/feed.xml +++ b/feed.xml @@ -4,7 +4,7 @@ Leilukin's personal website. - 2024-12-15T05:15:01Z + 2024-12-15T10:29:00Z https://leilukin.com/ Leilukin @@ -14,10 +14,11 @@ Changelog: 15 December 2024 - 2024-12-15T05:14:12Z + 2024-12-15T10:28:09Z https://leilukin.com/ <ul> <li>Add new article: <a href="https://leilukin.com/articles/living-with-retinitis-pigmentosa">&quot;Living with Retinitis Pigmentosa&quot;</a></li> +<li>Update my code snippet for <a href="https://leilukin.com/projects/snippets/disability-pride-flag-background">Responsive Disability Pride Flag CSS Background</a> by using the CSS <code>linear-gradient()</code> function instead of an inline SVG</li> </ul> diff --git a/index.html b/index.html index a39655f6..25eb7061 100644 --- a/index.html +++ b/index.html @@ -439,6 +439,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    Changelog: 15 December 2024

    View all site changelogs

    diff --git a/projects/snippets/disability-pride-flag-background/index.html b/projects/snippets/disability-pride-flag-background/index.html index 3c24550d..6240477a 100644 --- a/projects/snippets/disability-pride-flag-background/index.html +++ b/projects/snippets/disability-pride-flag-background/index.html @@ -389,11 +389,10 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
    -

    There have been CSS code snippets of LGBTQ+ pride flag backgrounds out there, but I could not find one for the Disability Pride Flag, which was created by Ann Magill and released in 2021.

    +

    There have been CSS code snippets of LGBTQ+ pride flag backgrounds out there, such as Alvaro Montoro's LGBTQ+ Flags Coded in CSS demo, but I could not find one for the Disability Pride Flag, which was created by Ann Magill and released in 2021.

    Therefore, at the start of Disability Pride Month in July 2024, I decided to code a Disability Pride Flag background in CSS, and now I am releasing my code snippet for public use.

    -

    My Disability Pride Flag CSS background is done with a combination of CSS background properties and inline SVG URL, and designed to be responsive, so it can adapt to different screen sizes and devices.

    +

    My Disability Pride Flag CSS background is done with a combination of the CSS background property and linuear-gradient() function, and designed to be responsive, so it can adapt to different screen sizes and devices.

    I have used JavaScript to set up the header of the main part of this website, so it will display the Disability Pride Flag as its background during July.

    -

    To code the Disability Pride Flag in CSS and make it responsive, I first downloaded an SVG file of the Disability Pride Flag from Wikimedia Commons, then modified the stripes in Adobe Illustrator CS5 (the only version of Adobe Illustrator I actually own) to allow the entire stripes to be shown in wide backgrounds, instead of appearing to be cut off mid-way. After finishing the edit in Illustrator, I saved the SVG file, opened it in Visual Studio Code to obtain the SVG code, used Jake Archibald's SVGOMG to optimise the SVG code, then encode it into CSS-ready code by using Yoksel's URL-encoder for SVG.

    Since Ann Magill released the Disability Pride Flag to the public domain under CC0 1.0 Universal, 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.

    Demo

    @@ -404,11 +403,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))

    CSS:

    .disability-pride-flag {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E");
-    background-color: #595959;
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    background-position: center;
+    background:
+        linear-gradient(
+            37deg,
+            #595959 0 35%,
+            #CF7280 30% 41%,
+            #EEDE77 30% 47%,
+            #E8E8E8 30% 53%,
+            #7bc2e0 30% 59%,
+            #3BB07D 30% 65%,
+            #595959 0
+        );
 }

    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.

    diff --git a/sitemap.xml b/sitemap.xml index 1fdd44d4..d3365d0f 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1172,235 +1172,235 @@ https://leilukin.comfalse - 2024-12-15T05:14:12.000Z + 2024-12-15T10:28:09.000Z weekly 0.5 https://leilukin.com/blog/posts/ - 2024-12-15T05:14:57.670Z + 2024-12-15T10:28:55.986Z weekly 0.5 https://leilukin.com/changelogs/2022/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/changelogs/2023/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/changelogs/2024/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/changelogs/layouts/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/projects/code/bellabuffs-phpmailer/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/projects/playlists/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/projects/snippets/disability-pride-flag-background/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/asummersend/gallery/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/asummersend/playlists/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/asummersend/trivia/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/cassettebeasts/articles/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/cassettebeasts/facts/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/cassettebeasts/featured/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/cassettebeasts/gamelog/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/cassettebeasts/resources/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/starwarskotor/articles/ - 2024-12-15T05:14:57.678Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/starwarskotor/guides/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/starwarskotor/resources/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.994Z weekly 0.5 https://leilukin.com/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/shrines/starwarskotor/universes/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/archive/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/categories/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/changelogs/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/about/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/adoptables/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/articles/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/blog/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/guestbook/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/links/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/now/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/projects/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/shrines/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/accessibility/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5 https://leilukin.com/colophon/ - 2024-12-15T05:14:57.682Z + 2024-12-15T10:28:55.998Z weekly 0.5