added license and improved documentation

This commit is contained in:
ari melody 2024-05-21 14:47:35 +01:00
parent 9ad5e3c84b
commit 25673cbe7e
Signed by: ari
GPG key ID: CF99829C92678188
4 changed files with 91 additions and 19 deletions

11
COPYING.md Normal file
View 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

View file

@ -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 :)
![progressive pride flag](pridetriangle.svg)
![progressive pride flag](prideflag.svg)
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! 🌈

View file

@ -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;

View file

@ -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