From 01cd45c1ae3716a0ccc7e908d7cbf52da1186ede Mon Sep 17 00:00:00 2001
From: MagicBOTAlex <zhentao2004@gmail.com>
Date: Mon, 16 Jun 2025 12:00:32 +0800
Subject: [PATCH] QR container? idk

---
 .../zhen/cv/CompsRev3/LinkedInQR.svelte       |  5 ++--
 src/routes/zhen/cv/rev3/+page.svelte          | 23 +++++++++++++++++++
 src/routes/zhen/cv/rev3/shared.css            | 19 +++++++++++++++
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/zhen/cv/rev3/shared.css

diff --git a/src/routes/zhen/cv/CompsRev3/LinkedInQR.svelte b/src/routes/zhen/cv/CompsRev3/LinkedInQR.svelte
index b5d736f..b75440b 100644
--- a/src/routes/zhen/cv/CompsRev3/LinkedInQR.svelte
+++ b/src/routes/zhen/cv/CompsRev3/LinkedInQR.svelte
@@ -4,11 +4,10 @@
 
 <div class="container">
     <div>LinkedIn</div>
-    <span class="qrcode">{@html QRCode}</span>
+    <div class="qrcode corner-border-container p-4">{@html QRCode}</div>
 </div>
 
 <style lang="scss">
-
     .qrcode {
         transform: scale(0.9);
     }
@@ -21,4 +20,4 @@
             font-size: 7.5mm;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/zhen/cv/rev3/+page.svelte b/src/routes/zhen/cv/rev3/+page.svelte
index 8f7598b..5a61a50 100644
--- a/src/routes/zhen/cv/rev3/+page.svelte
+++ b/src/routes/zhen/cv/rev3/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  // Shared CSS
+  import "./shared.css";
+
   // Left side
   import NameAndImage from "../CompsRev3/NameAndImage.svelte";
   import ShortProfile from "../CompsRev3/ShortProfile.svelte";
@@ -134,6 +137,26 @@
     --right-text-color: #333333;
   }
 
+  .corner-border-container {
+    background-color: var(--left-grid-bg-color);
+    background-image:
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+      linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
+    background-size: 
+      30px 4px,   /* top-left horizontal */
+      4px 30px,   /* top-left vertical */
+      30px 4px,   /* bottom-right horizontal */
+      4px 30px;   /* bottom-right vertical */
+    background-repeat: no-repeat;
+    background-position:
+      top left,
+      top left,
+      bottom right,
+      bottom right;
+  }
+
   .bg-grid-cv {
     background:
       linear-gradient(-90deg, rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px),
diff --git a/src/routes/zhen/cv/rev3/shared.css b/src/routes/zhen/cv/rev3/shared.css
new file mode 100644
index 0000000..d60e11f
--- /dev/null
+++ b/src/routes/zhen/cv/rev3/shared.css
@@ -0,0 +1,19 @@
+.corner-border-container {
+  background-color: var(--left-grid-bg-color);
+  background-image:
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
+    linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
+  background-size:
+    30px 4px,
+    4px 30px,
+    30px 4px,
+    4px 30px;
+  background-repeat: no-repeat;
+  background-position:
+    top left,
+    top left,
+    bottom right,
+    bottom right;
+}