bigger min-width, fake extra image width

The minimum width of the entire page has been changed from 400px to 480px. As the image have less width as I espected, the background from it's parent was visible at the right, acting like a border, so I added a linear gradient as background to the parent to fake the image's continuation, same for it's border.
HectorVilas · Apr 30, 2023 · a18fc74 · a18fc74
1 parent 0ee3dc3
commit a18fc74
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/styles/home.css b/styles/home.css
@@ -111,6 +111,14 @@
   overflow: hidden;
   border: 68px solid var(--color-2);
   border-right: none;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    transparent 46px,
+    #e9e8e4 46px,
+    #e9e8e4 calc(100% - 46px),
+    transparent calc(100% - 46px)
+  );
 }
 .home-about-image-div img {
   box-sizing: border-box;

diff --git a/styles/style.css b/styles/style.css
@@ -16,16 +16,16 @@ body {
   background-color: var(--color-1);
   display: flex;
   justify-content: center;
-  min-width: 400px;
+  min-width: 480px;
 }
 
 #wrapper {
   width: 100vw;
-  min-width: 400px;
+  min-width: 480px;
   max-width: 1440px;
   box-shadow: 0 0 50px rgba(0, 0, 0, .25);
 }
 
 main {
   width: 100%;
-}
+}