global: add formatter
This commit is contained in:
parent
0eeef39a96
commit
26928d432d
19 changed files with 3925 additions and 288 deletions
|
|
@ -1,5 +1,5 @@
|
|||
(function() {
|
||||
const menu = document.createElement('helo');
|
||||
(function () {
|
||||
const menu = document.createElement("helo");
|
||||
|
||||
menu.innerHTML = `
|
||||
<helo-content>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</helo-content>
|
||||
`;
|
||||
|
||||
menu.style.display = 'none';
|
||||
menu.style.display = "none";
|
||||
|
||||
function ensureMenu() {
|
||||
if (!document.body.contains(menu)) {
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
const showMenu = (x, y) => {
|
||||
ensureMenu();
|
||||
|
||||
menu.style.display = 'block';
|
||||
menu.style.display = "block";
|
||||
menu.style.left = `${x}px`;
|
||||
menu.style.top = `${y}px`;
|
||||
|
||||
|
|
@ -34,20 +34,20 @@
|
|||
};
|
||||
|
||||
const hideMenu = () => {
|
||||
menu.style.display = 'none';
|
||||
menu.style.display = "none";
|
||||
};
|
||||
|
||||
document.addEventListener('contextmenu', (e) => {
|
||||
document.addEventListener("contextmenu", (e) => {
|
||||
e.preventDefault();
|
||||
showMenu(e.clientX, e.clientY);
|
||||
});
|
||||
|
||||
document.addEventListener('click', hideMenu);
|
||||
document.addEventListener('scroll', hideMenu);
|
||||
document.addEventListener("click", hideMenu);
|
||||
document.addEventListener("scroll", hideMenu);
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') hideMenu();
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") hideMenu();
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:historyRestore', ensureMenu);
|
||||
})();
|
||||
document.body.addEventListener("htmx:historyRestore", ensureMenu);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ function initMiniPlayer() {
|
|||
const trackTitleEl = player.querySelector("track-title");
|
||||
const trackArtistEl = player.querySelector("track-artist");
|
||||
|
||||
|
||||
let isTransitioning = false;
|
||||
let currentTrackIndex = 0;
|
||||
let isPlaying = false;
|
||||
|
|
@ -65,9 +64,13 @@ function initMiniPlayer() {
|
|||
if (trackArtistEl) trackArtistEl.textContent = tracks[index].artist;
|
||||
|
||||
if (wasPlaying) {
|
||||
audio.addEventListener("loadeddata", () => {
|
||||
audio.play();
|
||||
}, { once: true });
|
||||
audio.addEventListener(
|
||||
"loadeddata",
|
||||
() => {
|
||||
audio.play();
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -82,13 +85,15 @@ function initMiniPlayer() {
|
|||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
const newIndex = currentTrackIndex === 0 ? tracks.length - 1 : currentTrackIndex - 1;
|
||||
const newIndex =
|
||||
currentTrackIndex === 0 ? tracks.length - 1 : currentTrackIndex - 1;
|
||||
loadTrack(newIndex);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
isTransitioning = true;
|
||||
const newIndex = currentTrackIndex === tracks.length - 1 ? 0 : currentTrackIndex + 1;
|
||||
const newIndex =
|
||||
currentTrackIndex === tracks.length - 1 ? 0 : currentTrackIndex + 1;
|
||||
loadTrack(newIndex);
|
||||
};
|
||||
|
||||
|
|
@ -124,7 +129,6 @@ function initMiniPlayer() {
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
audio.addEventListener("pause", () => {
|
||||
if (isTransitioning) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ blockquote:before,
|
|||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +133,6 @@ table {
|
|||
|
||||
/* Animations */
|
||||
|
||||
|
||||
@keyframes fadeInNOut {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -149,7 +148,6 @@ table {
|
|||
}
|
||||
|
||||
@keyframes woopwoop {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(-2deg);
|
||||
|
|
@ -160,7 +158,6 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
|
|
@ -184,7 +181,6 @@ table {
|
|||
}
|
||||
|
||||
@keyframes boing {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
|
|
@ -202,7 +198,6 @@ table {
|
|||
src: url("assets/fonts/ah.ttf") format("truetype");
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--lavender: #cdb4db;
|
||||
--light-pink: #ffc8dd;
|
||||
|
|
@ -219,20 +214,15 @@ table {
|
|||
text-shadow: 0px 0px 3px var(--darkerer-pink);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100lvh;
|
||||
width: 100lvw;
|
||||
overflow: auto;
|
||||
font-family: "DotGothic16",
|
||||
sans-serif;
|
||||
font-family: "DotGothic16", sans-serif;
|
||||
font-size: 1rem;
|
||||
|
||||
|
||||
&:has(#content home-content) {
|
||||
background-image: url(assets/images/tiledbgpink.webp);
|
||||
}
|
||||
|
|
@ -302,9 +292,11 @@ crt {
|
|||
}
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(to bottom,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.2) 51%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.2) 51%
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
animation: scanlines 1s steps(60) infinite;
|
||||
}
|
||||
|
|
@ -454,8 +446,6 @@ navbar {
|
|||
margin-left: auto;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -480,7 +470,9 @@ home-content {
|
|||
|
||||
box {
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
||||
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
|
||||
|
|
@ -495,7 +487,7 @@ home-content {
|
|||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
>socials-header {
|
||||
> socials-header {
|
||||
color: var(--darkerer-pink);
|
||||
}
|
||||
|
||||
|
|
@ -507,7 +499,7 @@ home-content {
|
|||
|
||||
bibou-message {
|
||||
font-style: italic;
|
||||
color: var(--grey-500)
|
||||
color: var(--grey-500);
|
||||
}
|
||||
|
||||
bibou-container {
|
||||
|
|
@ -542,9 +534,6 @@ home-content {
|
|||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
&#newsbox {
|
||||
|
|
@ -554,7 +543,7 @@ home-content {
|
|||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
|
||||
&>img {
|
||||
& > img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -594,16 +583,14 @@ home-content {
|
|||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
>img {
|
||||
> img {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
|
||||
>img:nth-last-child(-n+3) {
|
||||
> img:nth-last-child(-n + 3) {
|
||||
flex: 1 1 30%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -636,12 +623,23 @@ home-content {
|
|||
|
||||
woopwoop span {
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, var(--blue), var(--darker-pink), var(--darkerer-pink), var(--lavender), var(--light-blue), var(--light-pink), var(--pink));
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--blue),
|
||||
var(--darker-pink),
|
||||
var(--darkerer-pink),
|
||||
var(--lavender),
|
||||
var(--light-blue),
|
||||
var(--light-pink),
|
||||
var(--pink)
|
||||
);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: woopwoop 1.2s ease-in-out infinite, woopwoopmove 2s linear infinite;
|
||||
animation:
|
||||
woopwoop 1.2s ease-in-out infinite,
|
||||
woopwoopmove 2s linear infinite;
|
||||
}
|
||||
|
||||
chibis {
|
||||
|
|
@ -667,7 +665,6 @@ home-content {
|
|||
|
||||
/* Music */
|
||||
music {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -703,15 +700,16 @@ music {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
box {
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
||||
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
>cute-container {
|
||||
> cute-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -734,7 +732,9 @@ katcenkat {
|
|||
max-width: 100svw;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
transition: opacity 5s ease, transform 5s ease-out;
|
||||
transition:
|
||||
opacity 5s ease,
|
||||
transform 5s ease-out;
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
|
||||
|
|
@ -755,7 +755,9 @@ mini-player {
|
|||
border: 2px solid;
|
||||
border-color: #ffffff #808080 #808080 #ffffff;
|
||||
box-shadow: 2px 2px 0 #000;
|
||||
transition: opacity 0.3s, translate 0.3s;
|
||||
transition:
|
||||
opacity 0.3s,
|
||||
translate 0.3s;
|
||||
font-size: clamp(0.625rem, 2svw, 0.75rem);
|
||||
|
||||
ominous-message {
|
||||
|
|
@ -986,7 +988,6 @@ mini-player {
|
|||
pink-statusbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Music page */
|
||||
|
|
@ -1039,7 +1040,7 @@ helo {
|
|||
padding: 0.5rem 0;
|
||||
min-width: 150px;
|
||||
z-index: 9999;
|
||||
font-family: 'VT323', monospace;
|
||||
font-family: "VT323", monospace;
|
||||
font-size: 1.2rem;
|
||||
|
||||
helo-content {
|
||||
|
|
@ -1052,5 +1053,4 @@ helo {
|
|||
width: 5svw;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3525
static/vendor/htmx.min.js
vendored
3525
static/vendor/htmx.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue