YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-11 22:06:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Backgrounds now have low-res placeholders with seamless loading of the actual background for slow connections

Browse Source
This commit is contained in:
YouHaveTrouble
2024-03-17 11:54:05 +01:00
parent afc3b78888
commit 28bb5de3c9
5 changed files with 100 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.css
+36 -2
View File
@@ -16,7 +16,6 @@ body {
justify-content: start;
align-items: start;
color: var(--text-color);
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
@@ -101,17 +100,44 @@ section {
margin: 0;
width: 100%;
height: 100vh;
position: relative;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: rgba(0,0,0, 0.55);
background-blend-mode: darken;
}
article {
width: 100%;
}
.bg {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
#about {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url("/img/bg.jpg");
background-color: rgba(0,0,0, 0.55);
background-blend-mode: darken;
}
#about .bg {
background-image: url("/img/lowres/bg-lowres.jpg");
}
#projects {
@@ -123,10 +149,14 @@ article {
background-blend-mode: darken;
padding-top: 2rem;
padding-bottom: 2rem;
background-image: url("/img/bg-projects.jpg");
background-position: center;
background-attachment: fixed;
height: auto;
background-image: url("/img/bg-projects.jpg");
}
#projects .bg {
background-image: url("/img/lowres/bg-projects-lowres.jpg");
}
#projects .links {
@@ -281,6 +311,10 @@ section h2 {
background-attachment: fixed;
}
#socials .bg {
background-image: url("/img/lowres/bg-social-lowres.jpg");
}
#socials article {
display: flex;
flex-direction: row;