From d02d9608269243fc1d14fb6e8459a2e349fdb75d Mon Sep 17 00:00:00 2001
From: EdwardNew <pkarrows@gmail.com>
Date: Wed, 6 Nov 2024 17:38:08 -0800
Subject: [PATCH] fix: adjusted border sizings and desktop navbar padding

---
 public/images/page-borders/bottom-edge.svg    |  2 +-
 public/images/page-borders/top-edge.svg       |  4 +--
 .../images/page-borders/top-left-corner.svg   |  4 +--
 src/app/Home.scss                             | 36 ++++++++-----------
 src/app/page.tsx                              |  4 +++
 src/app/styles/global.scss                    |  2 +-
 6 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/public/images/page-borders/bottom-edge.svg b/public/images/page-borders/bottom-edge.svg
index d16a368..04853ad 100644
--- a/public/images/page-borders/bottom-edge.svg
+++ b/public/images/page-borders/bottom-edge.svg
@@ -1,3 +1,3 @@
 <svg width="602" height="42" viewBox="0 0 602 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M175 18.8687L223.717 13.2423L229.836 9.00525L255.5 9.99805H277.5L299 13.498L344.5 27.5L466.229 11.8054L481 15.498L477.731 10.3224L503.5 7L537 27.5L553.5 23.5L564.5 24.5L569 23.5L601.5 41.5H0L91 0L98 7L124.5 12L149.5 0L178 7L212.139 8.32066L208.047 9.9717L175 18.8687Z" fill="#FBFEFC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M174.893 19.1988L223.61 13.5724L229.726 9.33718L255.393 10.3301H277.393L298.893 13.8301L344.393 27.832L466.117 12.138L480.893 15.832L477.623 10.6546L503.393 7.33203L536.893 27.832L553.393 23.832L564.393 24.832L568.893 23.832L602 42H300.694H0L90.8929 0.332031L97.8929 7.33203L124.393 12.332L149.393 0.332031L177.893 7.33203L212.028 8.65252L207.94 10.3018L174.893 19.1988Z" fill="#FBFEFC"/>
 </svg>
diff --git a/public/images/page-borders/top-edge.svg b/public/images/page-borders/top-edge.svg
index b41c762..5d113e2 100644
--- a/public/images/page-borders/top-edge.svg
+++ b/public/images/page-borders/top-edge.svg
@@ -1,3 +1,3 @@
-<svg width="331" height="29" viewBox="0 0 331 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M65.375 19.3333L0.5 0.5L331 0L306 12.8889H226.662L213.125 20.6222L195.375 16.7556L175.375 29L168.5 10.9556H106L65.375 19.3333Z" fill="#FBFEFC"/>
+<svg width="331" height="30" viewBox="0 0 331 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M65.2676 19.6654L0 0H165.5H331L305.893 13.2209H226.554L213.018 20.9543L195.268 17.0876L175.268 29.332L168.393 11.2876H105.893L65.2676 19.6654Z" fill="#FBFEFC"/>
 </svg>
diff --git a/public/images/page-borders/top-left-corner.svg b/public/images/page-borders/top-left-corner.svg
index 4683d73..b9bb482 100644
--- a/public/images/page-borders/top-left-corner.svg
+++ b/public/images/page-borders/top-left-corner.svg
@@ -1,3 +1,3 @@
-<svg width="160" height="281" viewBox="0 0 160 281" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.427 77.5612L2 280.5L0 0L160 2.99942L115.618 8.32526V17.2017L81.8876 26.0781L64.1348 20.7522L32.1798 26.0781V36.7298L14.427 47.3814V77.5612Z" fill="#FBFEFC"/>
+<svg width="161" height="281" viewBox="0 0 161 281" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3189 77.8913L-0.000656128 281V0H79.9993H161L115.51 8.65536V17.5318L81.7795 26.4082L64.0267 21.0823L32.0717 26.4082V37.0599L14.3189 47.7115V77.8913Z" fill="#FBFEFC"/>
 </svg>
diff --git a/src/app/Home.scss b/src/app/Home.scss
index 035c3b5..6b279aa 100644
--- 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
index 9346b0e..3848a70 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -453,6 +453,7 @@ export default function Page() {
       >
         <Image
           id="paper-border-top-left"
+          className="paper-border"
           src="/images/page-borders/top-left-corner.svg"
           alt=""
           width={160}
@@ -460,6 +461,7 @@ export default function Page() {
         />
         <Image
           id="paper-border-bottom-right"
+          className="paper-border"
           src="/images/page-borders/bottom-right-corner.svg"
           alt=""
           width={277}
@@ -467,6 +469,7 @@ export default function Page() {
         />
         <Image
           id="paper-border-top-edge"
+          className="paper-border"
           src="/images/page-borders/top-edge.svg"
           alt=""
           width={331}
@@ -474,6 +477,7 @@ export default function Page() {
         />
         <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
index 1705380..f3f2bc1 100644
--- 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));