diff --git a/README.md b/README.md index 72496ae..8344393 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,23 @@ # progressive pride flag! 🌈 -## made with ❤ by mellodoot! -a lovely little pride flag made in vector, and optimised to be nice and lightweight! +## made with ❤ by mellodoot -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 :) +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 :) ![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 `` tag! the css stylesheet will handle the rest :) +## how do I use this on my own website? + +simple! just slap this code into your html document, and the js file will be automagically loaded into your site, generating your flag! -**example:** ```html - + ``` -have fun spreading the gay! 🌈 \ No newline at end of file +...or copy the code from `pridetriangle.js` and drop it into your own self-hosted file. up to you! + +have fun spreading the gay! 🌈 diff --git a/index.html b/index.html deleted file mode 100644 index 6724c29..0000000 --- a/index.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - Progressive Pride Flag - \ No newline at end of file diff --git a/pridetriangle.css b/pridetriangle.css deleted file mode 100644 index 94a1164..0000000 --- a/pridetriangle.css +++ /dev/null @@ -1,27 +0,0 @@ -#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; - } -} \ No newline at end of file diff --git a/pridetriangle.js b/pridetriangle.js new file mode 100644 index 0000000..9212b6c --- /dev/null +++ b/pridetriangle.js @@ -0,0 +1,89 @@ +function create_path(id, d, fill) { + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute('id', id); + path.setAttribute('d', d); + path.setAttribute('style', `fill:${fill}`); + return path; +} + +function create_rect(id, x, y, width, height, fill) { + const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + rect.setAttribute('id', id); + rect.setAttribute('x', x); + rect.setAttribute('y', y); + rect.setAttribute('width', width); + rect.setAttribute('height', height); + rect.setAttribute('style', `fill:${fill}`); + return rect; +} + +function create_svg() { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("viewBox", "0 0 120 120"); + + const title = document.createElementNS("http://www.w3.org/2000/svg", "title"); + title.textContent = "Progressive Pride Flag"; + svg.appendChild(title); + + svg.appendChild(create_path("red", "M40,0 H0 L20,20 Z", "#d20605")); + svg.appendChild(create_path("orange", "M80,0 H40 L20,20 L40,40 Z", "#ef9c00")); + svg.appendChild(create_path("yellow", "M120,0 H80 L40,40 L60,60 Z", "#e5fe02")); + svg.appendChild(create_path("green", "M120,40 V0 L60,60 L80,80 Z", "#09be01")); + svg.appendChild(create_path("blue", "M120,80 V40 L80,80 L100,100 Z", "#081a9a")); + svg.appendChild(create_path("purple", "M120,80 L100,100 L120,120 Z", "#76008a")); + + svg.appendChild(create_rect("black", "70", "0", "50", "50", "#010101")); + svg.appendChild(create_rect("brown", "80", "0", "40", "40", "#603814")); + svg.appendChild(create_rect("lightblue", "90", "0", "30", "30", "#73d6ed")); + svg.appendChild(create_rect("pink", "100", "0", "20", "20", "#ffafc8")); + svg.appendChild(create_rect("white", "110", "0", "10", "10", "#ffffff")); + + return svg; +} + +function create_triangle() { + const link = document.createElement("a"); + link.id = "pride-triangle"; + link.href = "https://github.com/mellodoot/prideflag"; + link.target = "_blank"; + + const triangle = create_svg(); + triangle.style.position = "fixed"; + triangle.style.top = "0"; + triangle.style.right = "0"; + triangle.style.width = "120px"; + triangle.style.transformOrigin = "100% 0%"; + triangle.style.transition = "transform .5s cubic-bezier(.32,1.63,.41,1.01)"; + triangle.style.zIndex = "100"; + + triangle.onmouseenter = function () { + this.style.transform = "scale(110%)"; + }; + triangle.onmouseleave = function () { + this.style.transform = "initial"; + }; + + triangle.onmousedown = function () { + this.style.transform = "scale(90%)"; + }; + triangle.onmouseup = function () { + this.style.transform = "initial"; + }; + + window.onresize = function () { + if (window.innerWidth <= 720) { + triangle.style.width = "6rem"; + triangle.style.right = "-6rem"; + } else { + triangle.style.width = "120px"; + triangle.style.right = "-120px"; + } + } + + link.appendChild(triangle); + + return link; +} + +const triangle = create_triangle(); +document.body.appendChild(triangle); \ No newline at end of file diff --git a/pridetriangle.svg b/pridetriangle.svg index 94cb217..4227c7b 100644 --- a/pridetriangle.svg +++ b/pridetriangle.svg @@ -1,13 +1,14 @@ - - - - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file