Merge pull request #130 from whitep4nth3r/fix-cls-on-layout

Add background logo as image and not content
whitep4nth3r · Mar 7, 2024 · d0703f1 · d0703f1
2 parents 8724d71 + 570e381
commit d0703f1
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mk2-p4nth3rblog",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "My website and blog.",
   "scripts": {
     "watch:sass": "sass --watch ./src/_sass:src/_css",

diff --git a/src/_css/main.css b/src/_css/main.css
diff --git a/src/_css/main.css.map b/src/_css/main.css.map
diff --git a/src/_public/img/whitep4nth3r-darkmode.svg b/src/_public/img/whitep4nth3r-darkmode.svg
diff --git a/src/_public/img/whitep4nth3r-lightmode.svg b/src/_public/img/whitep4nth3r-lightmode.svg
diff --git a/src/_sass/_reset.scss b/src/_sass/_reset.scss
@@ -81,11 +81,17 @@ main {
   }
 
   &:after {
-    content: var(--whitep4nth3r-bg-svg);
+    content: "";
+    background-image: var(--whitep4nth3r-bg-svg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 0;
+    width: 100%;
+    /* https://css-tricks.com/scale-svg/#aa-option-2-use-css-background-images-and-the-padding-bottom-hack */
+    padding-bottom: calc(100% * 201 / 1280); /* aspect ratio of image */
     position: fixed;
     bottom: 0;
     left: 0;
-    width: 100%;
     z-index: -1;
   }
 }