diff --git a/img/lowres/bg-lowres.jpg b/img/lowres/bg-lowres.jpg new file mode 100644 index 0000000..b1e3e9b Binary files /dev/null and b/img/lowres/bg-lowres.jpg differ diff --git a/img/lowres/bg-projects-lowres.jpg b/img/lowres/bg-projects-lowres.jpg new file mode 100644 index 0000000..c0592fe Binary files /dev/null and b/img/lowres/bg-projects-lowres.jpg differ diff --git a/img/lowres/bg-social-lowres.jpg b/img/lowres/bg-social-lowres.jpg new file mode 100644 index 0000000..7355f52 Binary files /dev/null and b/img/lowres/bg-social-lowres.jpg differ diff --git a/index.html b/index.html index bfbca5f..c830a82 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,12 @@
+

YouHaveTrouble

@@ -44,6 +45,7 @@
+

Socials

+
+ +
+

Dumb forks name generator

+

+ Small PHP name generator for dumb minecraft server software fork names. +

+
+ + + +
+
+
+
+ +
+

Guess the Anime

+

+ A web game where you guess an anime title based off blurred art and a synopsis. +

+
+ + + + + + +
+
+
diff --git a/main.css b/main.css index ea436ef..1c9fa74 100644 --- a/main.css +++ b/main.css @@ -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;