chore: higher-resolution base-placeholder-image for larger displays

prose-im · Oct 17, 2023 · fe56a8a · fe56a8a
1 parent 696f9da
commit fe56a8a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/src/assets/images/components/base/BasePlaceholderImage/illustration-empty.webp b/src/assets/images/components/base/BasePlaceholderImage/illustration-empty.webp
diff --git a/src/assets/images/components/base/BasePlaceholderImage/illustration-goodbye.webp b/src/assets/images/components/base/BasePlaceholderImage/illustration-goodbye.webp
diff --git a/src/assets/images/components/base/BasePlaceholderImage/illustration-welcome.webp b/src/assets/images/components/base/BasePlaceholderImage/illustration-welcome.webp
diff --git a/src/components/base/BasePlaceholderImage.vue b/src/components/base/BasePlaceholderImage.vue
@@ -67,17 +67,22 @@ export default {
 $c: ".c-base-placeholder-image";
 
 // VARIABLES
-$illustration-max-width: 280px;
-$illustration-margin-sides: 20px;
+$illustration-image-width: 680px;
+$illustration-image-scale-factor: 3;
+
+$illustration-margin-sides: 40px;
 
 $illustration-images: (
-  "empty": 226px,
-  "goodbye": 180px,
-  "welcome": 196px
+  "empty": 550px,
+  "goodbye": 437px,
+  "welcome": 477px
 );
 
 .c-base-placeholder-image {
-  max-width: ($illustration-max-width + (2 * $illustration-margin-sides));
+  max-width: calc(
+    ($illustration-image-width / $illustration-image-scale-factor) +
+      (2 * $illustration-margin-sides)
+  );
   text-align: center;
 
   #{$c}__illustration {
@@ -108,7 +113,7 @@ $illustration-images: (
     &--#{$illustration} {
       #{$c}__illustration {
         background-image: url("@/assets/images/components/base/BasePlaceholderImage/illustration-#{$illustration}.webp");
-        height: $height;
+        height: calc($height / $illustration-image-scale-factor);
       }
     }
   }