ari/arimelody.me-static
ari/arimelody.me-static
Archived
1
0
Fork 0
Code Issues 1 Pull requests Actions Projects Wiki Activity

Merge pull request #3 from mellodoot/dev

Browse source 
merge dev to main
This commit is contained in:
ari melody 2023-11-21 17:22:38 +00:00 committed by GitHub
parent ba2f8c3c4e 7bcb10975e
commit f308afd434
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 168 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.gitattributes vendored Normal file
View file

@ -0,0 +1,11 @@
# image
*.png filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
*.gif filter=lfs diff=lfs merge=lfs -text
*.webp filter=lfs diff=lfs merge=lfs -text
# audio
*.wav filter=lfs diff=lfs merge=lfs -text
*.mp3 filter=lfs diff=lfs merge=lfs -text
# video
*.webm filter=lfs diff=lfs merge=lfs -text
*.mp4 filter=lfs diff=lfs merge=lfs -text

BIN
public/audio/transmission20231013.wav
View file

Binary file not shown.

BIN
public/img/buttons/ari melody.gif (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
public/img/buttons/mae.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/img/buttons/zaire.gif (Stored with Git LFS) Normal file
View file

Binary file not shown.

BIN
public/img/favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 122 KiB

1
public/img/mailicon.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

25
public/index.html
View file

@ -20,7 +20,8 @@
<link rel="stylesheet" href="style/main.css">
<script src="script/main.js" defer="defer"></script>
<script src="/script/main.js" defer></script>
<script src="/script/accessibility.js" defer></script>
<link rel="me" href="https://wetdry.world/@ari">
</head>
<body>
@ -49,6 +50,9 @@
<!-- coming later! -->
<span title="coming later!">art</span>
</li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
</li>
</ul>
</div>
</header>
@ -141,10 +145,21 @@
</li>
</ul>
<p>
this site is intended to eventually replace
<a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>.
</p>
<hr>
<h2>## cool people!</h2>
<div id="web-buttons">
<a href="https://arimelody.me" target="_blank">
<img src="/img/buttons/ari melody.gif" alt="ari melody web button">
</a>
<a href="https://supitszaire.com" target="_blank">
<img src="/img/buttons/zaire.gif" alt="zaire web button">
</a>
<a href="https://mae.wtf" target="_blank">
<img src="/img/buttons/mae.png" alt="vimae web button">
</a>
</div>
</main>
<footer>

12
public/music.html
View file

@ -9,6 +9,8 @@
<title>music - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<meta name="description" content="music from your local SPACEGIRL 💫">
<meta property="og:title" content="ari melody music">
<meta property="og:type" content="website">
<meta property="og:url" content="www.arimelody.me/music">
@ -19,13 +21,14 @@
<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/music.css">
<script src="/script/main.js" defer="defer"></script>
<script src="/script/music.js" defer="defer"></script>
<script src="/script/main.js" defer></script>
<script src="/script/accessibility.js" defer></script>
<script src="/script/music.js" defer></script>
</head>
<body>
<header>
<div id="header">
<img src="img/favicon.png" id="header-icon" width="100" height="100" alt="">
<img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
<div id="header-text">
<h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2>
@ -48,6 +51,9 @@
<!-- coming later! -->
<span title="coming later!">art</span>
</li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
</li>
</ul>
</div>
</header>

44
public/script/accessibility.js Normal file
View file

@ -0,0 +1,44 @@
const accessibility = JSON.parse(localStorage.getItem("accessibility")) || {};
function toggle_accessibility_setting(name) {
if (accessibility[name]) {
delete accessibility[name];
update_accessibility();
return true;
}
accessibility[name] = true;
update_accessibility();
return true;
}
function set_accessibility_setting(name, value) {
accessibility[name] = value;
update_accessibility();
return true;
}
function clear_accessibility_setting(name) {
if (!accessibility[name]) return false;
delete accessibility[name];
update_accessibility();
return true;
}
function update_accessibility() {
localStorage.setItem("accessibility", JSON.stringify(accessibility));
}
if (accessibility) {
if (accessibility.disable_crt) {
document.querySelector('div#overlay').setAttribute("hidden", true);
document.body.style.textShadow = "none";
document.getElementById('toggle-crt').classList.add("disabled");
}
}
document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_accessibility_setting("disable_crt");
document.querySelector('div#overlay').toggleAttribute("hidden");
document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
});

31
public/script/main.js
View file

@ -1,20 +1,3 @@
document.addEventListener("DOMContentLoaded", () => {
[...document.querySelectorAll("h1, h2, h3, h4, h5, h6")]
.filter((e) => e.innerText != "")
.forEach((e) => {
type_out(e);
});
[...document.querySelectorAll("ol, ul")]
.filter((e) => e.innerText != "")
.forEach((e) => {
fill_list(e);
});
setTimeout(() => {
document.querySelector("footer").style.display = "none";
document.querySelector("footer").style.display = null;
}, 1000);
});
function type_out(e) {
const text = e.innerText;
const original = e.innerHTML;
@ -48,7 +31,7 @@ function type_out(e) {
}
function fill_list(list) {
const items = list.querySelectorAll("li a");
const items = list.querySelectorAll("li a, li span");
items.innerText = "";
const delay = 100;
@ -57,3 +40,15 @@ function fill_list(list) {
item.style.animationPlayState = "playing";
});
}
[...document.querySelectorAll("h1, h2, h3, h4, h5, h6")]
.filter((e) => e.innerText != "")
.forEach((e) => {
type_out(e);
});
[...document.querySelectorAll("ol, ul")]
.filter((e) => e.innerText != "")
.forEach((e) => {
fill_list(e);
});

53
public/style/main.css
View file

@ -8,7 +8,7 @@
body {
margin: 0;
padding: 0;
background: #111;
background: #080808;
color: #eee;
font-family: monospace;
font-size: 18px;
@ -80,8 +80,8 @@ header ul li span {
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation: list-item-fadein .2s forwards;
animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0;
}
@ -89,16 +89,32 @@ header ul li span {
color: #aaa;
border-color: #aaa;
cursor: default;
text-decoration: none !important;
text-decoration: none;
}
header ul li a:hover {
color: #eee;
border-color: #eee;
background-color: var(--links);
background-color: var(--links) !important;
text-decoration: none;
}
#toggle-crt a {
color: var(--primary);
border-color: var(--primary);
opacity: 1;
}
#toggle-crt a:hover {
color: #111;
background-color: var(--primary) !important;
}
#toggle-crt.disabled a {
opacity: .5 !important;
}
main {
width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem);
@ -158,7 +174,7 @@ div#me_irl {
}
div#me_irl img {
display: block;https://discord.gg/PSyTZDt
display: block;
}
div#me_irl::before {
@ -230,15 +246,15 @@ ul.links li a {
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation: list-item-fadein .2s forwards;
animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0;
}
ul.links li a:hover {
color: #eee;
border-color: #eee;
background-color: var(--links);
background-color: var(--links) !important;
text-decoration: none;
box-shadow: 0 0 1em var(--links);
}
@ -251,9 +267,24 @@ ul.links li a:hover {
to {
opacity: 1;
background: transparent;
}
}
div#web-buttons {
margin: 2rem 0;
}
#web-buttons a {
text-decoration: none;
}
#web-buttons img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
footer {
border-top: 1px solid #888;
}
@ -294,11 +325,15 @@ footer {
background-repeat: repeat;
opacity: .5;
pointer-events: none;
animation: linear .05s infinite alternate overlay-flicker;
/* animation: linear .05s infinite alternate overlay-flicker; */
mix-blend-mode: overlay;
}
@media screen and (max-width: 520px) {
@media screen and (max-width: 740px) {
body {
font-size: 14px;
}
#header-text {
display: none;
}

24
public/style/music.css
View file

@ -4,8 +4,9 @@ a.music {
display: flex;
flex-direction: row;
gap: 1.5em;
border: 1px solid #222;
border-radius: 4px;
background-color: #ffffff04;
background-color: #ffffff08;
transition: background-color .1s;
text-decoration: none;
}
@ -66,11 +67,14 @@ h3.music-type-upcoming {
}
.music-links {
width: fit-content;
margin: .5em 0;
padding: 0;
display: flex;
gap: .5rem;
flex-wrap: wrap;
line-height: 1.7em;
justify-content: center;
}
.music-links li {
@ -94,14 +98,13 @@ h3.music-type-upcoming {
.music-links li a:hover {
color: #eee;
border-color: #eee;
background-color: #65b4fd;
background-color: var(--links) !important;
text-decoration: none;
}
h2.question {
margin: 1rem 0;
padding: 1rem 1.5rem;
background-color: #ffffff04;
border-radius: 4px;
cursor: pointer;
}
@ -109,7 +112,20 @@ h2.question {
.collapse {
margin: -1rem 0 1rem 0;
padding: .5em 1.5em;
background-color: #ffffff04;
border-radius: 4px;
}
@media screen and (max-width: 740px) {
a.music {
flex-direction: column;
}
.music-artwork,
.music-details {
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
}