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"> <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"> <link rel="me" href="https://wetdry.world/@ari">
</head> </head>
<body> <body>
@ -49,6 +50,9 @@
<!-- coming later! --> <!-- coming later! -->
<span title="coming later!">art</span> <span title="coming later!">art</span>
</li> </li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
</li>
</ul> </ul>
</div> </div>
</header> </header>
@ -141,10 +145,21 @@
</li> </li>
</ul> </ul>
<p> <hr>
this site is intended to eventually replace
<a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>. <h2>## cool people!</h2>
</p>
<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> </main>
<footer> <footer>

12
public/music.html
View file

@ -9,6 +9,8 @@
<title>music - ari melody 💫</title> <title>music - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon"> <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:title" content="ari melody music">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="www.arimelody.me/music"> <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/main.css">
<link rel="stylesheet" href="/style/music.css"> <link rel="stylesheet" href="/style/music.css">
<script src="/script/main.js" defer="defer"></script> <script src="/script/main.js" defer></script>
<script src="/script/music.js" defer="defer"></script> <script src="/script/accessibility.js" defer></script>
<script src="/script/music.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
<div id="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"> <div id="header-text">
<h1>ari melody</h1> <h1>ari melody</h1>
<h2>your local SPACEGIRL 💫</h2> <h2>your local SPACEGIRL 💫</h2>
@ -48,6 +51,9 @@
<!-- coming later! --> <!-- coming later! -->
<span title="coming later!">art</span> <span title="coming later!">art</span>
</li> </li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
</li>
</ul> </ul>
</div> </div>
</header> </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) { function type_out(e) {
const text = e.innerText; const text = e.innerText;
const original = e.innerHTML; const original = e.innerHTML;
@ -48,7 +31,7 @@ function type_out(e) {
} }
function fill_list(list) { function fill_list(list) {
const items = list.querySelectorAll("li a"); const items = list.querySelectorAll("li a, li span");
items.innerText = ""; items.innerText = "";
const delay = 100; const delay = 100;
@ -57,3 +40,15 @@ function fill_list(list) {
item.style.animationPlayState = "playing"; 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 { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #111; background: #080808;
color: #eee; color: #eee;
font-family: monospace; font-family: monospace;
font-size: 18px; font-size: 18px;
@ -80,8 +80,8 @@ header ul li span {
background-color: transparent; background-color: transparent;
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
transition-duration: .2s; transition-duration: .2s;
animation: list-item-fadein .2s forwards;
animation-delay: 0s; animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0; opacity: 0;
} }
@ -89,16 +89,32 @@ header ul li span {
color: #aaa; color: #aaa;
border-color: #aaa; border-color: #aaa;
cursor: default; cursor: default;
text-decoration: none !important; text-decoration: none;
} }
header ul li a:hover { header ul li a:hover {
color: #eee; color: #eee;
border-color: #eee; border-color: #eee;
background-color: var(--links); background-color: var(--links) !important;
text-decoration: none; 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 { main {
width: min(calc(100% - 4rem), 720px); width: min(calc(100% - 4rem), 720px);
min-height: calc(100vh - 10.3rem); min-height: calc(100vh - 10.3rem);
@ -158,7 +174,7 @@ div#me_irl {
} }
div#me_irl img { div#me_irl img {
display: block;https://discord.gg/PSyTZDt display: block;
} }
div#me_irl::before { div#me_irl::before {
@ -230,15 +246,15 @@ ul.links li a {
background-color: transparent; background-color: transparent;
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
transition-duration: .2s; transition-duration: .2s;
animation: list-item-fadein .2s forwards;
animation-delay: 0s; animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0; opacity: 0;
} }
ul.links li a:hover { ul.links li a:hover {
color: #eee; color: #eee;
border-color: #eee; border-color: #eee;
background-color: var(--links); background-color: var(--links) !important;
text-decoration: none; text-decoration: none;
box-shadow: 0 0 1em var(--links); box-shadow: 0 0 1em var(--links);
} }
@ -251,9 +267,24 @@ ul.links li a:hover {
to { to {
opacity: 1; 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 { footer {
border-top: 1px solid #888; border-top: 1px solid #888;
} }
@ -294,11 +325,15 @@ footer {
background-repeat: repeat; background-repeat: repeat;
opacity: .5; opacity: .5;
pointer-events: none; pointer-events: none;
animation: linear .05s infinite alternate overlay-flicker; /* animation: linear .05s infinite alternate overlay-flicker; */
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
@media screen and (max-width: 520px) { @media screen and (max-width: 740px) {
body {
font-size: 14px;
}
#header-text { #header-text {
display: none; display: none;
} }

24
public/style/music.css
View file

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