diff --git a/README.md b/README.md index 29d726d..72496ae 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,20 @@ # progressive pride flag! 🌈 +## made with ❀ by mellodoot! -## made with ❀ by mellodoot +a lovely little pride flag made in vector, 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-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 currently represents: +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! -- 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! +### 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 :) +**example:** ```html - - - + ``` -...or copy the code from `prideflag.js` and drop it into your own self-hosted file. up to you! - -have fun spreading the gay! 🌈 +have fun spreading the gay! 🌈 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c11ef5f --- /dev/null +++ b/index.html @@ -0,0 +1,5 @@ + + + + Progressive Pride Flag + \ No newline at end of file diff --git a/pride-triangle.css b/pride-triangle.css new file mode 100644 index 0000000..94a1164 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/prideflag-generator.js b/prideflag-generator.js deleted file mode 100644 index ddbf5f9..0000000 --- a/prideflag-generator.js +++ /dev/null @@ -1,143 +0,0 @@ -/** - * πŸ³οΈβ€πŸŒˆπŸ³οΈβ€βš§οΈπŸ’– 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 deleted file mode 100644 index 42fc6c9..0000000 --- a/prideflag.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * πŸ³οΈβ€πŸŒˆπŸ³οΈβ€βš§οΈπŸ’– 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 fda4bb5..94cb217 100644 --- a/pridetriangle.svg +++ b/pridetriangle.svg @@ -1,17 +1,13 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + \ No newline at end of file