home: wip
This commit is contained in:
parent
b789d94fb8
commit
590239a365
SSH key fingerprint:
SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
3 changed files with 144 additions and 65 deletions
|
|
@ -131,6 +131,47 @@ table {
|
|||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
|
||||
@keyframes woopwoop {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(-2deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px) rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes woopwoopmove {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes boing {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
|
||||
|
|
@ -146,7 +187,6 @@ table {
|
|||
}
|
||||
|
||||
::selection {
|
||||
|
||||
text-shadow: 0px 0px 3px var(--darkerer-pink)
|
||||
}
|
||||
|
||||
|
|
@ -202,12 +242,6 @@ crt {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* persistent-ui */
|
||||
persistent-ui {
|
||||
position: fixed;
|
||||
|
|
@ -358,14 +392,15 @@ home-content {
|
|||
|
||||
boxes {
|
||||
display: flex;
|
||||
width: 30%;
|
||||
flex-wrap: wrap;
|
||||
width: min(90svw, 800px);
|
||||
gap: 1rem;
|
||||
|
||||
box {
|
||||
border-radius: 0.25rem;
|
||||
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: 4rem;
|
||||
padding: 1rem;
|
||||
|
||||
&#bigbox {
|
||||
flex: 1;
|
||||
|
|
@ -376,6 +411,43 @@ home-content {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
pronouns {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--blue);
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
darkerer-pink {
|
||||
color: var(--darkerer-pink);
|
||||
}
|
||||
|
||||
boing {
|
||||
display: inline-block;
|
||||
color: var(--darkerer-pink);
|
||||
animation: boing 0.8s infinite;
|
||||
}
|
||||
|
||||
shitty {
|
||||
color: #753b00;
|
||||
}
|
||||
|
||||
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-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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 404 */
|
||||
|
|
|
|||
|
|
@ -16,58 +16,58 @@
|
|||
</head>
|
||||
|
||||
<body hx-boost="true" hx-target="#content">
|
||||
<crt>
|
||||
<persistent-ui>
|
||||
{% include "partials/header.html" %}
|
||||
<miniplayer-container id="miniplayer-container">
|
||||
{% block miniplayer %}{% endblock %}
|
||||
</miniplayer-container>
|
||||
</persistent-ui>
|
||||
<crt>
|
||||
<persistent-ui>
|
||||
{% include "partials/header.html" %}
|
||||
<miniplayer-container id="miniplayer-container">
|
||||
{% block miniplayer %}{% endblock %}
|
||||
</miniplayer-container>
|
||||
</persistent-ui>
|
||||
|
||||
<main id="content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</crt>
|
||||
<main id="content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</crt>
|
||||
|
||||
<script src="/static/miniplayer.js"></script>
|
||||
<script>
|
||||
function updateMiniplayerVisibility() {
|
||||
const isMusicPage = window.location.pathname === '/music';
|
||||
const miniplayer = document.getElementById('miniplayer-container');
|
||||
if (miniplayer) {
|
||||
miniplayer.style.display = isMusicPage ? 'none' : '';
|
||||
}
|
||||
<script src="/static/miniplayer.js"></script>
|
||||
<script>
|
||||
function updateMiniplayerVisibility() {
|
||||
const isMusicPage = window.location.pathname === '/music';
|
||||
const miniplayer = document.getElementById('miniplayer-container');
|
||||
if (miniplayer) {
|
||||
miniplayer.style.display = isMusicPage ? 'none' : '';
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavState() {
|
||||
const path = window.location.pathname;
|
||||
document.querySelectorAll('navbar input[type="radio"]').forEach(radio => {
|
||||
radio.checked = false;
|
||||
});
|
||||
if (path === '/') {
|
||||
const homeRadio = document.getElementById('nav-home');
|
||||
if (homeRadio) homeRadio.checked = true;
|
||||
} else if (path === '/music') {
|
||||
const musicRadio = document.getElementById('nav-music');
|
||||
if (musicRadio) musicRadio.checked = true;
|
||||
}
|
||||
function updateNavState() {
|
||||
const path = window.location.pathname;
|
||||
document.querySelectorAll('navbar input[type="radio"]').forEach(radio => {
|
||||
radio.checked = false;
|
||||
});
|
||||
if (path === '/') {
|
||||
const homeRadio = document.getElementById('nav-home');
|
||||
if (homeRadio) homeRadio.checked = true;
|
||||
} else if (path === '/music') {
|
||||
const musicRadio = document.getElementById('nav-music');
|
||||
if (musicRadio) musicRadio.checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
const checkbox = document.getElementById('nav-toggle-checkbox');
|
||||
if (checkbox) checkbox.checked = false;
|
||||
}
|
||||
function closeMobileMenu() {
|
||||
const checkbox = document.getElementById('nav-toggle-checkbox');
|
||||
if (checkbox) checkbox.checked = false;
|
||||
}
|
||||
|
||||
updateMiniplayerVisibility();
|
||||
updateNavState();
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', () => {
|
||||
updateMiniplayerVisibility();
|
||||
updateNavState();
|
||||
closeMobileMenu();
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', () => {
|
||||
updateMiniplayerVisibility();
|
||||
updateNavState();
|
||||
closeMobileMenu();
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -5,25 +5,23 @@
|
|||
</welcome>
|
||||
<boxes>
|
||||
<box id="bigbox">
|
||||
Thank you for visiting my website !
|
||||
Thank you for visiting my <woopwoop>brand new</woopwoop> website !
|
||||
For now it's still a <darkerer-pink>work in progress</darkerer-pink> but I'm sure you will see
|
||||
changes if you come back from time to time :)
|
||||
<br /><br />
|
||||
My name is <darkerer-pink>Agahnim</darkerer-pink>
|
||||
<pronouns className="ml-1 px-2 py-[1px] text-xs rounded-full bg-blue-ouga text-white font-semibold">she/her
|
||||
</pronouns>,
|
||||
I'm a <darkerer-pink className="text-darkerer-pink-ouga">developer</darkerer-pink> and <darkerer-pink
|
||||
className="text-darkerer-pink-ouga">music producer</darkerer-pink> from <darkerer-pink
|
||||
className="text-darkerer-pink-ouga">France</darkerer-pink> !
|
||||
<pronouns>she/her</pronouns>,
|
||||
I'm a <darkerer-pink>developer</darkerer-pink> and <darkerer-pink>music producer</darkerer-pink> from
|
||||
<darkerer-pink>France</darkerer-pink> !
|
||||
<br /><br />
|
||||
I created this website not just to <darkerer-pink className="text-darkerer-pink-ouga">improve</darkerer-pink> my
|
||||
I created this website not just to <darkerer-pink>improve</darkerer-pink> my
|
||||
web development
|
||||
skills, but also because it's <boing className="inline-block text-darkerer-pink-ouga animate-bounce">fun</boing>
|
||||
skills, but also because it's <boing>fun</boing>
|
||||
to
|
||||
build a project like this. It's a small, personal space on the internet, away from the social climate, which is
|
||||
getting <shitty className="text-red-700">worse and worse</shitty>
|
||||
getting <shitty>worse and worse.</shitty>
|
||||
<br /><br />
|
||||
This website is inspired by the <darkerer-pink className="text-darkerer-pink-ouga">vaporwave
|
||||
This website is inspired by the <darkerer-pink>vaporwave
|
||||
aesthetic</darkerer-pink> and
|
||||
the old
|
||||
PCs I used to tinker with when I was a kid.
|
||||
|
|
@ -34,4 +32,13 @@
|
|||
<p>Salut</p>
|
||||
</box>
|
||||
</boxes>
|
||||
</home-content>
|
||||
</home-content>
|
||||
|
||||
<!-- I know I know but I need it for this pretty rainbow flagish animation -->
|
||||
<script>
|
||||
const el = document.querySelector('woopwoop');
|
||||
const text = el.textContent;
|
||||
el.innerHTML = text.split('').map((ch, i) =>
|
||||
`<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? ' ' : ch}</span>`
|
||||
).join('');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue