css fixes
This commit is contained in:
parent
968a4cb442
commit
da447939bb
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
109
static/css/index.css
Normal file
109
static/css/index.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<meta property="og:url" content="https://alfieking.dev">
|
||||
<meta property="og:title" content="{{ self.title() }}">
|
||||
<meta property="og:description" content="{{ self.description() }}">
|
||||
<meta property="og:image" content="static/content/icon.webp">
|
||||
<meta property="og:image" content="/static/content/icon.webp">
|
||||
{% block head %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
@ -3,6 +3,10 @@
|
||||
{% block title %}Home - Alfie's basement{% endblock %}
|
||||
{% block description %}server backend survivor{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/static/css/index.css">
|
||||
{% endblock %}
|
||||
|
||||
{%block content %}
|
||||
<section>
|
||||
<h1>A lil bit abt me</h1>
|
||||
@ -32,14 +36,14 @@
|
||||
<img src="https://s1nez.nekoweb.org/g/ggg/gg%20(32).gif" alt="">
|
||||
<img src="https://s1nez.nekoweb.org/img/7dcd20d4.gif" alt="">
|
||||
</section>
|
||||
<section class="rowsect">
|
||||
<div class="flex-row">
|
||||
<a href="" id="spotify-link">
|
||||
<div id="spotify">
|
||||
<h1 id="spotify-title"></h1>
|
||||
<h2 id="spotify-artist"></h2>
|
||||
</div>
|
||||
</a>
|
||||
<div class="stamps">
|
||||
<section class="stamps">
|
||||
<img src="https://s1nez.nekoweb.org/img/other/ba4ba47a.png" alt="">
|
||||
<img src="https://s1nez.nekoweb.org/img/fa02abd7.png" alt="">
|
||||
<img src="https://s1nez.nekoweb.org/img/hc/hc%20(172).gif" alt="">
|
||||
@ -56,8 +60,8 @@
|
||||
<img src="https://adriansblinkiecollection.neocities.org/stamps/g5.gif" alt="">
|
||||
<img src="https://adriansblinkiecollection.neocities.org/stamps/e40.gif" alt="">
|
||||
<img src="https://adriansblinkiecollection.neocities.org/stamps/e43.gif" alt="">
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<h1>Projects & stuff</h1>
|
||||
<p>just some projects ive worked on over time</p>
|
||||
|
||||
@ -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.
|
||||
</p>
|
||||
</section>
|
||||
<section class="flex-row no-sect">
|
||||
<div class="flex-row">
|
||||
<section>
|
||||
<h1>Specs</h1>
|
||||
<h6>(Very subject to change, Im still trying to figure out what I want :P)</h6>
|
||||
@ -45,7 +45,7 @@
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<h1>Plans</h1>
|
||||
<p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user