added license and improved documentation

COPYING.md

@@ -0,0 +1,11 @@
+pride flag - copyright (c) 2024 ari melody
+
+this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
+freely redistributed and/or modified as you please, however
+retaining this license in any redistribution.
+
+please use this flag to link to an LGBTQI+-supporting page
+of your choosing!
+
+web: https://arimelody.me
+source: https://git.arimelody.me/ari/prideflag

README.md

@@ -1,12 +1,15 @@
 # progressive pride flag! 🌈
+made with ❤ by ari melody
 
-## made with ❤ by ari melody
+---
 
-a lovely little pride flag made in svg, loaded with js, and optimised to be nice and lightweight!
+a lovely little pride flag made in svg, loaded with js, and optimised to be
+nice and lightweight!
 
-it tucks into the top-right corner of any website you drop it on, and you're free to link it to whichever lgbt-supporting site you like :)
+it tucks into the top-right corner of any website you drop it on, and you're
+welcome to link it to whichever LGBTQI+-supporting site you like :)
 
-![progressive pride flag](pridetriangle.svg)
+![progressive pride flag](prideflag.svg)
 
 this flag currently represents:
 
@@ -15,10 +18,46 @@ this flag currently represents:
 - trans pride! 🏳️‍⚧️
 - intersex! ♂️ ♀️
 
-this flag is currently in use over at my own website, [arimelody.me](https://arimelody.me)! feel free to check it out if you'd like to see it in action!
+this flag is currently in use over at my own website, [arimelody.me](https://arimelody.me)!
+feel free to check it out if you'd like to see it in action!
 
 ## how do I use this on my own website?
 
-simple! just slap [prideflag.js](prideflag.js) onto your website, and the js file will automagically generate your flag on page load!
+simple! just slap [prideflag.js](prideflag.js) onto your website, and your flag
+will be automagically generated on page load!
+
+alternatively, you are welcome to copy [prideflag.svg](prideflag.svg)
+into your own site and set it up without javascript, like so:
+
+```html
+<style>
+    #prideflag {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 120px;
+        transform-origin: 100% 0%;
+        transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
+        z-index: 8008135;
+        pointer-events: none;
+    }
+    #prideflag:hover {
+        transform: scale(110%);
+    }
+    #prideflag:active {
+        transform: scale(110%);
+    }
+    #prideflag * {
+        pointer-events: all;
+    }
+</style>
+
+<a href="https://git.arimelody.me/ari/prideflag" target="_blank" id="prideflag">
+    <img src="prideflag.svg" width="120" height="120" alt="progressive pride flag">
+</a>
+```
+
+both files contain a simple copyright license that links back to me (see [COPYING.md](COPYING.md)).
+please retain this!!
 
 have fun spreading the gay! 🌈

prideflag.js

@@ -1,10 +1,18 @@
-/**
+//
- * 🏳️‍🌈🏳️‍⚧️💖 pride flag 💖🏳️‍⚧️🏳️‍🌈
+// pride flag - copyright (c) 2024 ari melody
- * made with ❤️ by ari melody, 2024
+// 
- * 
+// this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
- * web: https://arimelody.me
+// freely redistributed and/or modified as you please, however
- * source: https://git.arimelody.me/ari/prideflag
+// retaining this license in any redistribution.
- */
+// 
+// please use this flag to link to an LGBTQI+-supporting page
+// of your choosing!
+// 
+// web: https://arimelody.me
+// source: https://git.arimelody.me/ari/prideflag
+//
+
+const pride_url = "https://git.arimelody.me/ari/prideflag";
 
 const pride_flag_svg =
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
@@ -26,7 +34,7 @@ const pride_flag_svg =
     </svg>`;
 
 const pride_flag_css =
-    `#prideflag svg {
+    `#prideflag {
         position: fixed;
         top: 0;
         right: 0;
@@ -36,20 +44,20 @@ const pride_flag_css =
         z-index: 8008135;
         pointer-events: none;
     }
-    #prideflag svg:hover {
+    #prideflag:hover {
         transform: scale(110%);
     }
-    #prideflag svg:active {
+    #prideflag:active {
         transform: scale(110%);
     }
-    #prideflag svg * {
+    #prideflag * {
         pointer-events: all;
     }`;
 
 function create_pride_flag() {
     const flag = document.createElement("a");
     flag.id = "prideflag";
-    flag.href = "https://git.arimelody.me/ari/prideflag";
+    flag.href = pride_url;
     flag.target = "_blank";
     flag.innerHTML = pride_flag_svg;
     return flag;

prideflag.svg

@@ -1,3 +1,17 @@
+<!--
+  pride flag - copyright (c) 2024 ari melody
+  
+  this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
+  freely redistributed and/or modified as you please, however
+  retaining this license in any redistribution.
+  
+  please use this flag to link to an LGBTQI+-supporting page
+  of your choosing!
+  
+  web: https://arimelody.me
+  source: https://git.arimelody.me/ari/prideflag
+-->
+
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
   <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
   <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
@@ -14,4 +28,4 @@
   
   <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
   <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
-</svg>
+</svg>