acetheking987/alfieking.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css fixes

Browse Source
This commit is contained in:
Alfie King
2025-06-21 14:03:39 +01:00
parent 968a4cb442
commit da447939bb
7 changed files with 149 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
static/css/base.css
View File

@@ -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
View 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;
}
}

20
static/css/toaster.css
View File

@@ -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%;
}