diff --git a/README.md b/README.md index 72496ae..29d726d 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,32 @@ # 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! +this flag currently represents: -### 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 :) +- original LGBTQ+ colours! πŸ³οΈβ€πŸŒˆ +- marginalized people of colour (POC) communities! πŸ§‘πŸΎπŸ§”πŸΏ +- trans pride! πŸ³οΈβ€βš§οΈ +- intersex! ♂️ ♀️ + +this flag is currently in use over at my own website, [mellodoot.com](https://www.mellodoot.com)! 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 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 `prideflag.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 c11ef5f..0000000 --- a/index.html +++ /dev/null @@ -1,5 +0,0 @@ - - - - Progressive Pride Flag - \ No newline at end of file diff --git a/pride-triangle.css b/pride-triangle.css deleted file mode 100644 index 94a1164..0000000 --- a/pride-triangle.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/prideflag-generator.js b/prideflag-generator.js new file mode 100644 index 0000000..ddbf5f9 --- /dev/null +++ b/prideflag-generator.js @@ -0,0 +1,143 @@ +/** + * πŸ³οΈβ€πŸŒˆπŸ³οΈβ€βš§οΈπŸ’– pride flag πŸ’–πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆ + * made with ❀️ by mellodoot, 2023 + * + * an alternate, insanely over-engineered version of prideflag.js + * which generates all required svg elements at runtime. + * + * given the svg doesn't exactly change however, this turned + * out to be wholly unnecessary. + * + * neat proof of concept, though! + */ + +/** + * Creates an SVG path using the given parameters. + * @param {string} id The SVG `id` tag to give the path element. + * @param {string} d An SVG draw path. + * @param {string} fill A fill colour to apply within an included `style` tag. + * @returns An SVG path. + */ +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; +} + +/** + * Creates an SVG rectangle using the given parameters. + * @param {string} id The SVG `id` tag to give the rectangle element. + * @param {number} x The X coordinate of the rectangle. + * @param {number} y The Y coordinate of the rectangle. + * @param {number} width The width of the rectangle. + * @param {number} height The height of the rectangle. + * @param {string} fill A fill colour to apply within an included `style` tag. + * @returns An SVG rectangle. + */ +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; +} + +/** + * Creates an SVG circle using the given parameters. + * @param {string} id The SVG `id` tag to give the circle element. + * @param {number} x The X coordinate of the circle. + * @param {number} y The Y coordinate of the circle. + * @param {number} radius The radius of the circle. + * @param {string} stroke_colour The stroke colour of the rectangle. + * @param {number} stroke_width The stroke width of the rectangle. + * @param {string} fill A fill colour to apply within an included `style` tag. + * @returns An SVG rectangle. + */ +function create_circle(id, x, y, radius, stroke_colour, stroke_width, fill) { + const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + circle.setAttribute('id', id); + circle.setAttribute('cx', x); + circle.setAttribute('cy', y); + circle.setAttribute('r', radius); + circle.setAttribute('stroke', stroke_colour); + circle.setAttribute('stroke-width', stroke_width); + circle.setAttribute('fill', fill); + return circle; +} + +/** + * Uses the included SVG generation methods to create a complete + * pride flag SVG element. + * @returns An SVG pride flag. + */ +function create_pride_flag_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", "60", "0", "60", "60", "#010101")); + svg.appendChild(create_rect("brown", "70", "0", "50", "50", "#603814")); + svg.appendChild(create_rect("lightblue", "80", "0", "40", "40", "#73d6ed")); + svg.appendChild(create_rect("pink", "90", "0", "30", "30", "#ffafc8")); + svg.appendChild(create_rect("white", "100", "0", "20", "20", "#ffffff")); + + svg.appendChild(create_rect("intyellow", "110", "0", "10", "10", "#fed800")); + svg.appendChild(create_circle("intpurple", "120", "0", "5", "#7800ab", "2", "none")); + + return svg; +} + +/** + * @returns A completed pride flag with link and animations. + */ +function create_pride_flag() { + const link = document.createElement("a"); + link.id = "pride-triangle"; + link.href = "https://github.com/mellodoot/prideflag"; + link.target = "_blank"; + + const triangle = create_pride_flag_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"; + }; + + link.appendChild(triangle); + + return link; +} + +const triangle = create_pride_flag(); +document.body.appendChild(triangle); \ No newline at end of file diff --git a/prideflag.js b/prideflag.js new file mode 100644 index 0000000..42fc6c9 --- /dev/null +++ b/prideflag.js @@ -0,0 +1,66 @@ +/** + * πŸ³οΈβ€πŸŒˆπŸ³οΈβ€βš§οΈπŸ’– pride flag πŸ’–πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆ + * made with ❀️ by mellodoot, 2023 + * + * web: https://mellodoot.com + * source: https://github.com/mellodoot/prideflag + */ + +const pride_flag_svg = + ` + + + + + + + + + + + + + + + + `; + +const pride_flag_css = + `#pride-flag svg { + 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; + } + #pride-flag svg:hover { + transform: scale(110%); + } + #pride-flag svg:active { + transform: scale(110%); + } + #pride-flag svg * { + pointer-events: all; + }`; + +function create_pride_flag() { + const container = document.createElement("a"); + container.id = "pride-flag"; + container.href = "https://github.com/mellodoot/prideflag"; + container.target = "_blank"; + container.innerHTML = pride_flag_svg; + return container; +} + +function load_pride_flag_style() { + const pride_stylesheet = document.createElement('style'); + pride_stylesheet.textContent = pride_flag_css; + document.head.appendChild(pride_stylesheet); +} + +load_pride_flag_style(); +pride_flag = create_pride_flag(); +document.body.appendChild(pride_flag); \ No newline at end of file diff --git a/pridetriangle.svg b/pridetriangle.svg index 94cb217..fda4bb5 100644 --- a/pridetriangle.svg +++ b/pridetriangle.svg @@ -1,13 +1,17 @@ - - - - - - - - - - - - + + + + + + + + + + + + + + + + \ No newline at end of file