first commit! 🌈

README.md

@@ -0,0 +1,20 @@
+# progressive pride flag! 🌈
+## made with ❤ by mellodoot!
+
+a lovely little pride flag made in vector, and optimised to be nice and lightweight!
+
+it tucks into the top-left or top-right corner of any website you drop it on, and you're free to link it to whichever lgbt-supporting site you like :)
+
+![progressive pride flag](pridetriangle.svg)
+
+this flag is currently in use over at my own website, [mellodoot.com](https://mellodoot.com)! feel free to check it out if you'd like to see it in action!
+
+### how do I put this in the top-right of my website?
+simple! just add `right` as an attribute to the surrounding `<a>` tag! the css stylesheet will handle the rest :)
+
+**example:**
+```html
+<a id="pride-triangle" ... right>
+```
+
+have fun spreading the gay! 🌈

index.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="pride-triangle.css">
+
+<a id="pride-triangle" href="https://www.github.com/mellodoot/prideflag/" target="_blank">
+    <img src="pridetriangle.svg" alt="Progressive Pride Flag" />
+</a>

pride-triangle.css

@@ -0,0 +1,27 @@
+#pride-triangle img {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 120px;
+    transform-origin: 0% 0%;
+    transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
+    z-index: 100;
+}
+#pride-triangle[right] img {
+    left: initial;
+    right: -120px;
+    rotate: 90deg;
+}
+#pride-triangle img:hover {
+    transform: scale(110%);
+}
+#pride-triangle img:active {
+    transform: scale(90%);
+}
+
+@media only screen and (max-width: 720px) {
+    #pride-triangle img {
+        width: 6rem;
+        right: -6rem;
+    }
+}

pridetriangle.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
+  <path id="red" d="M0,80 L20,100 L0,120 Z" style="fill:#d20605"/>
+  <path id="orange" d="M0,80 V40 L40,80 L20,100 Z" style="fill:#ef9c00"/>
+  <path id="yellow" d="M0,40 V0 L60,60 L40,80 Z" style="fill:#e5fe02"/>
+  <path id="green" d="M0,0 H40 L80,40 L60,60 Z" style="fill:#09be01"/>
+  <path id="blue" d="M40,0 H80 L100,20 L80,40 Z" style="fill:#081a9a"/>
+  <path id="purple" d="M80,0 H120 L100,20 Z" style="fill:#76008a"/>
+  <rect id="black" width="50" height="50" style="fill:#010101"/>
+  <rect id="brown" width="40" height="40" style="fill:#603814"/>
+  <rect id="lightblue" width="30" height="30" style="fill:#73d6ed"/>
+  <rect id="pink" width="20" height="20" style="fill:#ffafc8"/>
+  <rect id="white" width="10" height="10" style="fill:#fff"/>
+</svg>