diff --git a/static/assets/fonts/ah.ttf b/static/assets/fonts/ah.ttf new file mode 100644 index 0000000..cdcfcc5 Binary files /dev/null and b/static/assets/fonts/ah.ttf differ diff --git a/static/assets/gifs/flowerzdark.png b/static/assets/gifs/flowerzdark.png new file mode 100644 index 0000000..fe69649 Binary files /dev/null and b/static/assets/gifs/flowerzdark.png differ diff --git a/static/assets/gifs/kitty-1.gif b/static/assets/gifs/kitty-1.gif new file mode 100644 index 0000000..257d523 Binary files /dev/null and b/static/assets/gifs/kitty-1.gif differ diff --git a/static/assets/gifs/nurple-static-bright.gif b/static/assets/gifs/nurple-static-bright.gif new file mode 100644 index 0000000..13b1b99 Binary files /dev/null and b/static/assets/gifs/nurple-static-bright.gif differ diff --git a/static/assets/gifs/red-stars.gif b/static/assets/gifs/red-stars.gif new file mode 100644 index 0000000..118c59d Binary files /dev/null and b/static/assets/gifs/red-stars.gif differ diff --git a/static/assets/gifs/stars3.gif b/static/assets/gifs/stars3.gif new file mode 100644 index 0000000..717ad16 Binary files /dev/null and b/static/assets/gifs/stars3.gif differ diff --git a/static/style.css b/static/style.css index 5172b24..471a393 100644 --- a/static/style.css +++ b/static/style.css @@ -133,6 +133,7 @@ table { /* Animations */ + @keyframes fadeInNOut { 0% { opacity: 0; @@ -196,6 +197,11 @@ table { } } +@font-face { + font-family: "AH"; + src: url("assets/fonts/ah.ttf") format("truetype"); +} + :root { --lavender: #cdb4db; @@ -211,10 +217,11 @@ table { ::selection { text-shadow: 0px 0px 3px var(--darkerer-pink); - } + + body { background-size: cover; background-position: center; @@ -239,6 +246,10 @@ body { background-image: url(assets/images/tiledbgpink.webp); } + &:has(#content about) { + background-image: url(assets/gifs/flowerzdark.png); + } + main { padding-top: 8rem; } @@ -256,7 +267,7 @@ body { cute-container { background-image: url(assets/gifs/weirdstone.png); - width: min(90svw, 850px); + width: min(90svw, 1000px); min-height: 70svh; height: auto; border: 5px solid var(--lavender); @@ -494,6 +505,10 @@ home-content { gap: 2rem; } + bibou-message { + font-style: italic; + color: var(--grey-500) + } bibou-container { position: relative; @@ -654,10 +669,40 @@ home-content { music { display: flex; - flex-direction: column; + flex-direction: row; flex-wrap: wrap; justify-content: center; - align-items: center; + align-items: stretch; + + vertical-marquee { + position: fixed; + left: 0; + top: 0; + height: 100svh; + width: 100svw; + overflow: hidden; + z-index: -1; + pointer-events: none; + font-size: 10rem; + animation: fadeInNOut 10s infinite; + + vertical-marquee-inner { + position: absolute; + top: 0; + display: flex; + flex-direction: column; + + text { + display: block; + font-family: "AH", sans-serif; + font-size: 1.1rem; + line-height: 24px; + color: red; + opacity: 0.5; + } + } + } + box { border-radius: 0.4rem; @@ -941,8 +986,11 @@ mini-player { pink-statusbar { display: none; } + } + /* Music page */ + /* Miniplayer */ mini-player { diff --git a/templates/partials/home.html b/templates/partials/home.html index 4bef8ca..67813fd 100644 --- a/templates/partials/home.html +++ b/templates/partials/home.html @@ -54,6 +54,7 @@ width="30px" alt="Instagram logo" /> Decorative divider + Consult the wisdom of the Bibou, if thou darest... Bibou endormi Bibou éveillé diff --git a/templates/partials/music.html b/templates/partials/music.html index d308c54..144e7ed 100644 --- a/templates/partials/music.html +++ b/templates/partials/music.html @@ -1,5 +1,25 @@ + Animated text 'Music' - \ No newline at end of file + + \ No newline at end of file