From da447939bb2b0d1f0514ccaba1bbcdf02f96cdb1 Mon Sep 17 00:00:00 2001 From: Alfie King Date: Sat, 21 Jun 2025 14:03:39 +0100 Subject: [PATCH] css fixes --- src/main.py | 2 +- static/css/base.css | 151 ++++++++--------------------------------- static/css/index.css | 109 +++++++++++++++++++++++++++++ static/css/toaster.css | 20 ------ templates/base.html | 2 +- templates/index.html | 12 ++-- templates/toaster.html | 4 +- 7 files changed, 149 insertions(+), 151 deletions(-) create mode 100644 static/css/index.css diff --git a/src/main.py b/src/main.py index a93abdf..6844209 100644 --- a/src/main.py +++ b/src/main.py @@ -78,7 +78,7 @@ def snake_submit(): logging.error("Invalid score value: %s", score) return render_template('404.html', scores=scores, error='Invalid score value'), 400 - if score <= 0 or score > 10000 or len(username) < 3 or len(username) > 20: + if score <= 0 or score > 10000 or len(username) < 3 or len(username) > 15: logging.error("Invalid score or username length: score=%s, username=%s", score, username) return render_template('404.html', scores=scores, error='Invalid score or username length'), 400 diff --git a/static/css/base.css b/static/css/base.css index 12ca89d..eacb617 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -235,100 +235,6 @@ main section a { display: none; } -.blinkies { - justify-content: center; - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.blinkies img { - width: 150px; - height: 20px; - transition: all 0.2s ease-in-out; -} - -.blinkies img:hover { - transform: scale(1.1) rotate(5deg); -} - -.blinkies img:nth-child(odd):hover { - transform: scale(1.1) rotate(-5deg); -} - -section.rowsect { - width: 100%; - display: grid; - grid-template-columns: auto auto; - gap: 1rem; - backdrop-filter: none; - border: none; - padding: 0; -} - -section.rowsect>div { - backdrop-filter: blur(2px) brightness(0.6); - border: var(--secondary-background-color) 2px solid; - border-radius: 10px; -} - -.stamps { - display: flex; - flex-direction: row; - flex-wrap: wrap; - padding: 10px; - gap: 5px; - justify-content: center; - align-content: center; -} - -.stamps img { - width: 99px; - height: 56px; - transition: all 0.2s ease-in-out; -} - -.stamps img:hover { - transform: scale(1.1) rotate(5deg); -} - -.stamps img:nth-child(odd):hover { - transform: scale(1.1) rotate(-5deg); -} - -#spotify { - background-image: none; - backdrop-filter: blur(2px) brightness(0.6); - border: var(--secondary-background-color) 2px solid; - border-radius: 10px; - padding: 15px; - box-sizing: border-box; - background-repeat: no-repeat; - background-size: contain; - height: 300px; - width: 300px; - display: flex; - flex-direction: column; -} - -#spotify-title { - font-size: 1.5rem; - font-weight: 900; - margin: 0; - padding: 0; - mix-blend-mode: difference; - color: white; -} - -#spotify-artist { - color: white; - font-size: 1rem; - font-weight: 900; - margin: 0; - padding: 0; - mix-blend-mode: difference; -} - .haj { width: 100%; filter: drop-shadow(0 0 0.5rem rgb(88, 214, 245)); @@ -338,25 +244,6 @@ section.rowsect>div { font-family: var(--irken-font); } -#button-collection { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; -} - -#button-collection img { - transition: all 0.2s ease-in-out; -} - -#button-collection img:hover { - transform: scale(1.1) rotate(5deg); -} - -#button-collection img:nth-child(odd):hover { - transform: scale(1.1) rotate(-5deg); -} - #alt-nav { display: none; backdrop-filter: blur(2px) brightness(0.6); @@ -397,6 +284,26 @@ section.rowsect>div { font-family: var(--title-font); } +.flex-col { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.flex-row { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.no-sect { + backdrop-filter: none; + border: none; + border-radius: 0; + padding: 0; + box-sizing: border-box; +} + @media screen and (max-width: 1000px) { body { background-color: var(--background-color); @@ -430,6 +337,14 @@ section.rowsect>div { } @media screen and (max-width: 650px) { + .flex-row { + flex-direction: column; + } + + .flex-col { + flex-direction: row; + } + header img { display: none; } @@ -446,16 +361,6 @@ section.rowsect>div { display: none; } - section.rowsect { - width: 100%; - display: flex; - flex-direction: column; - gap: 1rem; - backdrop-filter: none; - border: none; - padding: 0; - } - div#spotify { box-sizing: border-box; background-repeat: no-repeat; diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..8077b43 --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,109 @@ +.blinkies { + justify-content: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.blinkies img { + width: 150px; + height: 20px; + transition: all 0.2s ease-in-out; +} + +.blinkies img:hover { + transform: scale(1.1) rotate(5deg); +} + +.blinkies img:nth-child(odd):hover { + transform: scale(1.1) rotate(-5deg); +} + +.stamps { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 10px; + gap: 5px; + justify-content: center; + align-content: center; +} + +.stamps img { + width: 99px; + height: 56px; + transition: all 0.2s ease-in-out; +} + +.stamps img:hover { + transform: scale(1.1) rotate(5deg); +} + +.stamps img:nth-child(odd):hover { + transform: scale(1.1) rotate(-5deg); +} + +#spotify { + background-image: none; + backdrop-filter: blur(2px) brightness(0.6); + border: var(--secondary-background-color) 2px solid; + border-radius: 10px; + padding: 15px; + box-sizing: border-box; + background-repeat: no-repeat; + background-size: contain; + height: 300px; + width: 300px; + display: flex; + flex-direction: column; +} + +#spotify-title { + font-size: 1.5rem; + font-weight: 900; + margin: 0; + padding: 0; + mix-blend-mode: difference; + color: white; +} + +#spotify-artist { + color: white; + font-size: 1rem; + font-weight: 900; + margin: 0; + padding: 0; + mix-blend-mode: difference; +} + +#button-collection { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; +} + +#button-collection img { + transition: all 0.2s ease-in-out; +} + +#button-collection img:hover { + transform: scale(1.1) rotate(5deg); +} + +#button-collection img:nth-child(odd):hover { + transform: scale(1.1) rotate(-5deg); +} + +@media screen and (max-width: 650px) { + div#spotify { + box-sizing: border-box; + background-repeat: no-repeat; + background-size: contain; + height: 100%; + width: auto; + aspect-ratio: 1/1; + display: flex; + flex-direction: column; + } +} \ No newline at end of file diff --git a/static/css/toaster.css b/static/css/toaster.css index f3fe28a..43771a9 100644 --- a/static/css/toaster.css +++ b/static/css/toaster.css @@ -29,26 +29,6 @@ ul#toaster-specs li { border: 2px solid var(--secondary-background-color); } -.flex-col { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.flex-row { - display: flex; - flex-direction: row; - gap: 1rem; -} - -.no-sect { - backdrop-filter: none; - border: none; - border-radius: 0; - padding: 0; - box-sizing: border-box; -} - .fill-height { height: 100%; } diff --git a/templates/base.html b/templates/base.html index c762968..7083284 100644 --- a/templates/base.html +++ b/templates/base.html @@ -15,7 +15,7 @@ - + {% block head %} {% endblock %} diff --git a/templates/index.html b/templates/index.html index 158b897..1d97c71 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,6 +3,10 @@ {% block title %}Home - Alfie's basement{% endblock %} {% block description %}server backend survivor{% endblock %} +{% block head %} + +{% endblock %} + {%block content %}

A lil bit abt me

@@ -32,14 +36,14 @@
-
+

 -
+
@@ -56,8 +60,8 @@ -
-
+ +

Projects & stuff

just some projects ive worked on over time

diff --git a/templates/toaster.html b/templates/toaster.html index 7885dfb..6e7b338 100644 --- a/templates/toaster.html +++ b/templates/toaster.html @@ -22,7 +22,7 @@ however I plan on hopefully drawing Toaster properly soon. Once i do, I may make him the main mascot of my website.

-
+

Specs

(Very subject to change, Im still trying to figure out what I want :P)
@@ -45,7 +45,7 @@

-
+

Plans