diff --git a/static/style.css b/static/style.css index 533cfd9..2b1812a 100644 --- a/static/style.css +++ b/static/style.css @@ -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 */ diff --git a/templates/base.html b/templates/base.html index 3e976fa..e240bf9 100644 --- a/templates/base.html +++ b/templates/base.html @@ -16,58 +16,58 @@ - - - {% include "partials/header.html" %} - - {% block miniplayer %}{% endblock %} - - + + + {% include "partials/header.html" %} + + {% block miniplayer %}{% endblock %} + + -
- {% block content %}{% endblock %} -
- +
+ {% block content %}{% endblock %} +
+ - - + + - document.body.addEventListener('htmx:afterSwap', () => { - updateMiniplayerVisibility(); - updateNavState(); - closeMobileMenu(); - window.scrollTo(0, 0); - }); - - - - + \ No newline at end of file diff --git a/templates/partials/home.html b/templates/partials/home.html index 455dba7..6827af6 100644 --- a/templates/partials/home.html +++ b/templates/partials/home.html @@ -5,25 +5,23 @@ - Thank you for visiting my website ! + Thank you for visiting my brand new website ! For now it's still a work in progress but I'm sure you will see changes if you come back from time to time :)

My name is Agahnim - she/her - , - I'm a developer and music producer from France ! + she/her, + I'm a developer and music producer from + France !

- I created this website not just to improve my + I created this website not just to improve my web development - skills, but also because it's fun + skills, but also because it's fun to build a project like this. It's a small, personal space on the internet, away from the social climate, which is - getting worse and worse + getting worse and worse.

- This website is inspired by the vaporwave + This website is inspired by the vaporwave aesthetic and the old PCs I used to tinker with when I was a kid. @@ -34,4 +32,13 @@

Salut

 - \ No newline at end of file + + + + \ No newline at end of file