Compare commits
No commits in common. "0498a68f90377b746a379dda01f4a6eb3cb6add9" and "6de116ccb543b7599785ef07ea5854c13580e1b8" have entirely different histories.
0498a68f90
...
6de116ccb5
30
README.md
30
README.md
|
|
@ -1,32 +1,20 @@
|
||||||
# progressive pride flag! 🌈
|
# 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-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 :)
|
||||||
|
|
||||||
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 :)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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! 🏳️🌈
|
### how do I put this in the top-right of my website?
|
||||||
- marginalized people of colour (POC) communities! 🧑🏾🧔🏿
|
simple! just add `right` as an attribute to the surrounding `<a>` tag! the css stylesheet will handle the rest :)
|
||||||
- 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
|
```html
|
||||||
<script type="text/javascript" src="https://www.mellodoot.com/js/pridetriangle.js" defer></script>
|
<a id="pride-triangle" ... right>
|
||||||
<!-- in case this goes down, try the below example! -->
|
|
||||||
<script type="text/javascript" src="https://github.com/mellodoot/prideflag/blob/main/prideflag.js" defer></script>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
...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! 🌈
|
|
||||||
5
index.html
Normal file
5
index.html
Normal file
|
|
@ -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>
|
||||||
27
pride-triangle.css
Normal file
27
pride-triangle.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
|
||||||
66
prideflag.js
66
prideflag.js
|
|
@ -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 =
|
|
||||||
`<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"/>
|
|
||||||
<path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
|
|
||||||
<path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
|
|
||||||
<path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
|
|
||||||
<path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
|
|
||||||
|
|
||||||
<rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
|
|
||||||
<rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
|
|
||||||
<rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
|
|
||||||
<rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
|
|
||||||
<rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
|
|
||||||
|
|
||||||
<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>`;
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
@ -1,17 +1,13 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
|
||||||
<path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
|
<path id="red" d="M0,80 L20,100 L0,120 Z" style="fill:#d20605"/>
|
||||||
<path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
|
<path id="orange" d="M0,80 V40 L40,80 L20,100 Z" style="fill:#ef9c00"/>
|
||||||
<path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
|
<path id="yellow" d="M0,40 V0 L60,60 L40,80 Z" style="fill:#e5fe02"/>
|
||||||
<path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
|
<path id="green" d="M0,0 H40 L80,40 L60,60 Z" style="fill:#09be01"/>
|
||||||
<path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
|
<path id="blue" d="M40,0 H80 L100,20 L80,40 Z" style="fill:#081a9a"/>
|
||||||
<path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
|
<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="black" x="60" width="60" height="60" style="fill:#010101"/>
|
<rect id="brown" width="40" height="40" style="fill:#603814"/>
|
||||||
<rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
|
<rect id="lightblue" width="30" height="30" style="fill:#73d6ed"/>
|
||||||
<rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
|
<rect id="pink" width="20" height="20" style="fill:#ffafc8"/>
|
||||||
<rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
|
<rect id="white" width="10" height="10" style="fill:#fff"/>
|
||||||
<rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
|
|
||||||
|
|
||||||
<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>
|
||||||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 821 B |
Loading…
Reference in a new issue