added license and improved documentation
This commit is contained in:
parent
9ad5e3c84b
commit
25673cbe7e
GPG key ID:
CF99829C92678188
11
COPYING.md
Normal file
11
COPYING.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
pride flag - copyright (c) 2024 ari melody
|
||||
|
||||
this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
|
||||
freely redistributed and/or modified as you please, however
|
||||
retaining this license in any redistribution.
|
||||
|
||||
please use this flag to link to an LGBTQI+-supporting page
|
||||
of your choosing!
|
||||
|
||||
web: https://arimelody.me
|
||||
source: https://git.arimelody.me/ari/prideflag
|
||||
51
README.md
51
README.md
|
|
@ -1,12 +1,15 @@
|
|||
# progressive pride flag! 🌈
|
||||
made with ❤ by ari melody
|
||||
|
||||
## made with ❤ by ari melody
|
||||
---
|
||||
|
||||
a lovely little pride flag made in svg, loaded with js, 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-right corner of any website you drop it on, and you're
|
||||
welcome to link it to whichever LGBTQI+-supporting site you like :)
|
||||
|
||||
|
||||
|
||||
|
||||
this flag currently represents:
|
||||
|
||||
|
|
@ -15,10 +18,46 @@ this flag currently represents:
|
|||
- trans pride! 🏳️⚧️
|
||||
- intersex! ♂️ ♀️
|
||||
|
||||
this flag is currently in use over at my own website, [arimelody.me](https://arimelody.me)! feel free to check it out if you'd like to see it in action!
|
||||
this flag is currently in use over at my own website, [arimelody.me](https://arimelody.me)!
|
||||
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 [prideflag.js](prideflag.js) onto your website, and the js file will automagically generate your flag on page load!
|
||||
simple! just slap [prideflag.js](prideflag.js) onto your website, and your flag
|
||||
will be automagically generated on page load!
|
||||
|
||||
alternatively, you are welcome to copy [prideflag.svg](prideflag.svg)
|
||||
into your own site and set it up without javascript, like so:
|
||||
|
||||
```html
|
||||
<style>
|
||||
#prideflag {
|
||||
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;
|
||||
}
|
||||
#prideflag:hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
#prideflag:active {
|
||||
transform: scale(110%);
|
||||
}
|
||||
#prideflag * {
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a href="https://git.arimelody.me/ari/prideflag" target="_blank" id="prideflag">
|
||||
<img src="prideflag.svg" width="120" height="120" alt="progressive pride flag">
|
||||
</a>
|
||||
```
|
||||
|
||||
both files contain a simple copyright license that links back to me (see [COPYING.md](COPYING.md)).
|
||||
please retain this!!
|
||||
|
||||
have fun spreading the gay! 🌈
|
||||
|
|
|
|||
32
prideflag.js
32
prideflag.js
|
|
@ -1,10 +1,18 @@
|
|||
/**
|
||||
* 🏳️🌈🏳️⚧️💖 pride flag 💖🏳️⚧️🏳️🌈
|
||||
* made with ❤️ by ari melody, 2024
|
||||
*
|
||||
* web: https://arimelody.me
|
||||
* source: https://git.arimelody.me/ari/prideflag
|
||||
*/
|
||||
//
|
||||
// pride flag - copyright (c) 2024 ari melody
|
||||
//
|
||||
// this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
|
||||
// freely redistributed and/or modified as you please, however
|
||||
// retaining this license in any redistribution.
|
||||
//
|
||||
// please use this flag to link to an LGBTQI+-supporting page
|
||||
// of your choosing!
|
||||
//
|
||||
// web: https://arimelody.me
|
||||
// source: https://git.arimelody.me/ari/prideflag
|
||||
//
|
||||
|
||||
const pride_url = "https://git.arimelody.me/ari/prideflag";
|
||||
|
||||
const pride_flag_svg =
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
|
||||
|
|
@ -26,7 +34,7 @@ const pride_flag_svg =
|
|||
</svg>`;
|
||||
|
||||
const pride_flag_css =
|
||||
`#prideflag svg {
|
||||
`#prideflag {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -36,20 +44,20 @@ const pride_flag_css =
|
|||
z-index: 8008135;
|
||||
pointer-events: none;
|
||||
}
|
||||
#prideflag svg:hover {
|
||||
#prideflag:hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
#prideflag svg:active {
|
||||
#prideflag:active {
|
||||
transform: scale(110%);
|
||||
}
|
||||
#prideflag svg * {
|
||||
#prideflag * {
|
||||
pointer-events: all;
|
||||
}`;
|
||||
|
||||
function create_pride_flag() {
|
||||
const flag = document.createElement("a");
|
||||
flag.id = "prideflag";
|
||||
flag.href = "https://git.arimelody.me/ari/prideflag";
|
||||
flag.href = pride_url;
|
||||
flag.target = "_blank";
|
||||
flag.innerHTML = pride_flag_svg;
|
||||
return flag;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,17 @@
|
|||
<!--
|
||||
pride flag - copyright (c) 2024 ari melody
|
||||
|
||||
this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
|
||||
freely redistributed and/or modified as you please, however
|
||||
retaining this license in any redistribution.
|
||||
|
||||
please use this flag to link to an LGBTQI+-supporting page
|
||||
of your choosing!
|
||||
|
||||
web: https://arimelody.me
|
||||
source: https://git.arimelody.me/ari/prideflag
|
||||
-->
|
||||
|
||||
<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"/>
|
||||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in a new issue