diff options
| author | Steph Enders <steph@senders.io> | 2023-06-26 23:28:56 -0400 |
|---|---|---|
| committer | Steph Enders <steph@senders.io> | 2023-06-26 23:28:56 -0400 |
| commit | 1dd91b4f76a44319c33b1fefcb18f05ac89288ea (patch) | |
| tree | 72622adb4fc960635ef8849e35c8a54e81e50315 | |
| parent | 899e86b26df1991ed0e91e0f46eebe3f0823608d (diff) | |
Make flag an SVG
I had to write this SVG by hand but its pretty simple so its not that
hard to do!
| -rw-r--r-- | static/index.css | 24 | ||||
| -rw-r--r-- | 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 - |