From 1dd91b4f76a44319c33b1fefcb18f05ac89288ea Mon Sep 17 00:00:00 2001
From: Steph Enders <steph@senders.io>
Date: Mon, 26 Jun 2023 23:28:56 -0400
Subject: Make flag an SVG

I had to write this SVG by hand but its pretty simple so its not that
hard to do!
---
 static/index.css      | 24 ++----------------------
 templates/footer.html | 16 +++++++++-------
 2 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/static/index.css b/static/index.css
index 7abff3b..fdbaa63 100644
--- a/static/index.css
+++ b/static/index.css
@@ -1,9 +1,4 @@
 :root {
-    --twhite: #fff;
-    --tblue: #4ac2fe;
-    --tpink: #ef95ae;
-    --flagheight: 60px;
-    --flagwidth: 90px;
     --bgcolor: #e4e4ff;
     --page-width: 50em;
 }
@@ -47,22 +42,7 @@ main  article:last-child {
     margin-bottom: none;
 }
 .transflag {
-    width: var(--flagwidth);
-    height: var(--flagheight);
+    width: 90px;
+    height: 60px;
     margin: 16px auto;
 }
-.transflag .blue {
-    width: 100%;
-    min-height: calc(var(--flagheight) / 5);
-    background-color: var(--tblue);
-}
-.transflag .pink {
-    width: 100%;
-    min-height: calc(var(--flagheight) / 5);
-    background-color: var(--tpink);
-}
-.transflag .white {
-    width: 100%;
-    min-height: calc(var(--flagheight) / 5);
-    background-color: var(--twhite);
-}
diff --git a/templates/footer.html b/templates/footer.html
index 79074d5..a40b684 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,10 +1,12 @@
-<div class='transflag'
-     title="A html rendering of the trans flag">
-  <div class='blue'></div>
-  <div class='pink'></div>
-  <div class='white'></div>
-  <div class='pink'></div>
-  <div class='blue'></div>
+<div class="transflag">
+  <svg version="1.1" width="90" height="60">
+    <g transform="scale(90,60)">
+      <rect width="1" height="0.2" x="0" y="0" fill="#4ac2fe"></rect>
+      <rect width="1" height="0.2" x="0" y="0.2" fill="#ef95ae"></rect>
+      <rect width="1" height="0.2" x="0" y="0.4" fill="#fff"></rect>
+      <rect width="1" height="0.2" x="0" y="0.6" fill="#ef95ae"></rect>
+      <rect width="1" height="0.2" x="0" y="0.8" fill="#4ac2fe"></rect>
+  </svg>
 </div>
 <footer>
   <p>© 2023 TheWomanInMyEye dot org -
-- 
cgit v1.2.3-54-g00ecf