fix: adjusted border sizings and desktop navbar padding

ucsddesignco · Nov 7, 2024 · d02d960 · d02d960
1 parent a0a3494
commit d02d960
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 28 deletions.
diff --git a/public/images/page-borders/bottom-edge.svg b/public/images/page-borders/bottom-edge.svg
diff --git a/public/images/page-borders/top-edge.svg b/public/images/page-borders/top-edge.svg
diff --git a/public/images/page-borders/top-left-corner.svg b/public/images/page-borders/top-left-corner.svg
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -182,33 +182,26 @@ summary {
   text-align: center;
 }
 
-#paper-border-top-left,
-#paper-border-bottom-right,
-#paper-border-top-edge,
-#paper-border-bottom-edge {
+.paper-border {
   position: absolute;
   z-index: 4;
   height: auto;
 }
 
 #paper-border-top-left {
-  width: calc(var(--folder-height) * 0.5);
-  top: -1%;
-  left: -1%;
+  top: -5px;
+  left: 0;
 }
 #paper-border-bottom-right {
-  width: calc(var(--folder-height) * 0.4);
   bottom: 0;
   right: 0;
 }
 #paper-border-top-edge {
-  width: calc(var(--folder-height) * 0.8);
   top: 0;
-  right: 0;
+  right: 2%;
 }
 #paper-border-bottom-edge {
-  width: calc(var(--folder-height) * 0.7);
-  bottom: 0;
+  bottom: -10px;
   left: 30%;
 }
 
@@ -305,24 +298,23 @@ summary {
   }
 
   #paper-border-top-left {
-    width: calc(var(--folder-width) * 0.4);
-    top: -3%;
-    left: -2%;
+    top: 0;
+    left: auto;
+    right: -20px;
+    transform: scaleX(-1);
   }
   #paper-border-bottom-right {
-    width: calc(var(--folder-width) * 0.4);
-    bottom: 0;
-    left: 0;
+    bottom: -5px;
+    left: -7px;
     transform: scaleX(-1);
   }
   #paper-border-top-edge {
-    width: calc(var(--folder-width) * 0.8);
     top: 0;
-    right: 0;
+    right: 40%;
   }
   #paper-border-bottom-edge {
-    width: calc(var(--folder-width) * 0.7);
-    bottom: 0;
+    scale: 0.7;
+    bottom: -10px;
     right: 0;
   }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -453,27 +453,31 @@ export default function Page() {
       >
         <Image
           id="paper-border-top-left"
+          className="paper-border"
           src="/images/page-borders/top-left-corner.svg"
           alt=""
           width={160}
           height={281}
         />
         <Image
           id="paper-border-bottom-right"
+          className="paper-border"
           src="/images/page-borders/bottom-right-corner.svg"
           alt=""
           width={277}
           height={276}
         />
         <Image
           id="paper-border-top-edge"
+          className="paper-border"
           src="/images/page-borders/top-edge.svg"
           alt=""
           width={331}
           height={29}
         />
         <Image
           id="paper-border-bottom-edge"
+          className="paper-border"
           src="/images/page-borders/bottom-edge.svg"
           alt=""
           width={602}

diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss
@@ -10,7 +10,7 @@ html {
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
   --main-padding: 1.5rem;
-  --nav-padding: 1.5rem;
+  --nav-padding: 3.75rem;
   // Stide Logo + Gap + DCo Logo + Padding
   --nav-height: calc(31px + 1rem + 1.5rem + 2 * var(--nav-padding));