From c7e8d2bbbfebe325927e84bb466c7b440a23b03f Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Sun, 3 Aug 2025 18:15:47 +0100
Subject: [PATCH] Add proper borders between segments on desktop and mobile

---
 src/assets/box-lr.png                        | Bin 0 -> 211 bytes
 src/assets/box-tb.png                        | Bin 0 -> 173 bytes
 src/assets/line.png                          | Bin 0 -> 123 bytes
 src/components/Header.astro                  |   2 +
 src/components/home/Landing.astro            |  43 ++++++++++++++-----
 src/components/home/feeds/Feeds.astro        |  16 +++++--
 src/components/home/playing/NowPlaying.astro |  18 ++++++++
 src/pages/index.astro                        |   4 --
 8 files changed, 66 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/box-lr.png
 create mode 100644 src/assets/box-tb.png
 create mode 100644 src/assets/line.png

diff --git a/src/assets/box-lr.png b/src/assets/box-lr.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ffbf77ea4ed5e1e6e1006e8117f43b5577ac43c
GIT binary patch
literal 211
zcmeAS@N?(olHy`uVBq!ia0y~yV2}f04mJh`25W<Lix?OfI14-?iy0XBj({-ZRBb+K
z1_p*!PZ!4!kItvly!j3&aIh}@zTf!Wiuq;&Oin3fr4L)$!xrpKh<3O$&4uB>^G`oM
zt|&8mu%x0(KmDlv-cRDz4u#KqqPm|*En9Kpy~^1KTHEf<?X-5il9+V2J3+zDYsU?n
zw0HLMfrcBB-m)ku?m2$F`{j|TD=mEX^x7@U-<aZ|BV1~0Xu6+S&PmwXeP7Xa1_lNO
MPgg&ebxsLQ0RD_n3jhEB

literal 0
HcmV?d00001

diff --git a/src/assets/box-tb.png b/src/assets/box-tb.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f361a9ff7ead46d39787deb366e4e2038ca9882
GIT binary patch
literal 173
zcmeAS@N?(olHy`uVBq!ia0y~yV2}f04mJh`25W<Lix?OfI14-?iy0XBj({-ZRBb+K
z1_p+BPZ!4!kIuK#9Jv@2I9N>o{Ga}odFhfSA#3-AbDg=puCT;Ei<<Dzu4>|xjaEwp
zX0Nyw)@VBMM2`5au4yZ-aDSWe|G0oNkKqx4?VYVB;`1Z@qIr(r`=9jsOQ+eorN*Cc
ZHe3|ZeRw6@h=GBD!PC{xWt~$(69D^`J@o(p

literal 0
HcmV?d00001

diff --git a/src/assets/line.png b/src/assets/line.png
new file mode 100644
index 0000000000000000000000000000000000000000..93e63c8c197553a44995e5c8fd6c603a24519755
GIT binary patch
literal 123
zcmeAS@N?(olHy`uVBq!ia0y~yV31>AVBq3lV_;xdT>eg<fq{Xuz$3Dlfr0M`2s2LA
z=96Y%V9@n+aSXBOO-_(dIN;GX@BbBp`4e55SFp`sJ9H_qTa!^mJt#)1!?WPYlMX>1
Z23JmIo_&n$k_-$C44$rjF6*2UngF9|A8-Hw

literal 0
HcmV?d00001

diff --git a/src/components/Header.astro b/src/components/Header.astro
index c3cd9a1..414b0d5 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -73,6 +73,8 @@ const strToX = <I,>(
     padding: 10px 20px;
     overflow: auto;
     height: 3rem; /* 2rem * 1.5 */
+    /* render over feed bg */
+    z-index: 1;
 
     display: flex;
     flex-direction: row;
diff --git a/src/components/home/Landing.astro b/src/components/home/Landing.astro
index 4f9f399..e8b32be 100644
--- a/src/components/home/Landing.astro
+++ b/src/components/home/Landing.astro
@@ -3,6 +3,7 @@ import { socials } from "/site-config";
 
 import boxRoundedTop from "/assets/box-rounded-top.png";
 import boxCircleMask from "/assets/box-circle-mask.png";
+import line from "/assets/line.png";
 
 const avatar = await fetch(
   "https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=" +
@@ -22,20 +23,22 @@ const avatar = await fetch(
   });
 ---
 
-<section class="landing">
+<section
+  class="landing"
+  style={`--line-png: url("${line.src}");
+          --box-rounded-top-png: url("${boxRoundedTop.src}");
+          --box-circle-mask-png: url("${boxCircleMask.src}");`}
+>
   <h2>Hello World 🏳️‍⚧️</h2>
-  <figure style={`--box-rounded-top-png: url("${boxRoundedTop.src}")`}>
-    <img
-      src={avatar ?? "http://undefined"}
-      alt=""
-      style={`--box-circle-mask-png: url("${boxCircleMask.src}")`}
-    />
+  <figure>
+    <img src={avatar ?? "http://undefined"} alt="" />
     <figcaption>bsky pfp</figcaption>
   </figure>
   <p>
-    Hi! I'm Kai/Nico/Alex/Jen [she/it] (non binary) and I make silly websites!
-    I'm a big fan of progressive enhancement, open source, and linux. (I use
-    arch btw)
+    <!-- todo update this content -->
+    Hi! I'm Kai<wbr />/<wbr />Nico<wbr />/<wbr />Alex<wbr />/<wbr />Jen [she<wbr
+    />/<wbr />it] (non binary) and I make silly websites! I'm a big fan of
+    progressive enhancement, open source, and linux. (I use arch btw)
   </p>
   <p>
     My preferred tools are vanilla html/css, typescript, vite, astro, svelte,
@@ -47,6 +50,26 @@ const avatar = await fetch(
   section {
     padding: 10px;
     height: fit-content;
+    z-index: 1;
+
+    /* desktop border image */
+    @media not (max-width: 90ch) {
+      position: relative;
+      z-index: 0;
+      &::before {
+        content: "";
+        display: block;
+        image-rendering: pixelated;
+        background-image: var(--line-png);
+        background-size: 60px;
+        z-index: -1;
+        width: 50vw;
+        height: 20px;
+        position: absolute;
+        bottom: -20px;
+        right: -50px;
+      }
+    }
   }
 
   figure {
diff --git a/src/components/home/feeds/Feeds.astro b/src/components/home/feeds/Feeds.astro
index 4012189..af92ef1 100644
--- a/src/components/home/feeds/Feeds.astro
+++ b/src/components/home/feeds/Feeds.astro
@@ -8,6 +8,7 @@ import IconBluesky from "/assets/icons/Bluesky.svg";
 import IconTumblr from "/assets/icons/Tumblr.svg";
 import IconGit from "/assets/icons/Git.svg";
 import IconGithub from "/assets/icons/GitHub.svg";
+import boxLR from "/assets/box-lr.png";
 
 const tabs: {
   id: string;
@@ -22,7 +23,7 @@ const tabs: {
 ];
 ---
 
-<section class="feeds">
+<section class="feeds" style={`--box-lr-png: url("${boxLR.src}");`}>
   <!-- tabindex -1 disables tabbing onto this element
        tabbing is disabled because when the element overflows its focusable
        to scrub across children etc. which is a logical default
@@ -53,7 +54,7 @@ const tabs: {
   <div class="feed-contents">
     {
       tabs.map((tab) => (
-        <div class="content" data-tab={tab.id} id={"tab-" + tab.id}>
+        <div class="content" data-tab={tab.id}>
           <tab.content />
         </div>
       ))
@@ -68,7 +69,7 @@ const tabs: {
   set:html={tabs
     .map(
       ({ id }) =>
-        `#tab-container:has([data-tab-for="${id}"]:checked) + .feed #tab-${id} { /* show relevant tab */ }`,
+        `#tab-container:has([data-tab-for="${id}"]:checked) + .feed-contents [data-tab="${id}"] { /* show relevant tab */ }`,
     )
     .join("\n")}
 ></style>
@@ -84,6 +85,15 @@ const tabs: {
     @media (max-width: 90ch) {
       height: 600px;
     }
+
+    z-index: 0;
+
+    image-rendering: pixelated;
+    border-image-source: var(--box-lr-png);
+    border-image-slice: 0 10 fill;
+    border-image-width: 0 20px;
+    border-image-outset: 10000px 20px;
+    border-image-repeat: round;
   }
 
   /* tab menu */
diff --git a/src/components/home/playing/NowPlaying.astro b/src/components/home/playing/NowPlaying.astro
index 12a370f..49c617d 100644
--- a/src/components/home/playing/NowPlaying.astro
+++ b/src/components/home/playing/NowPlaying.astro
@@ -7,6 +7,7 @@ import mp3RecordCircle from "/assets/mp3/record-circle.png";
 import mp3HeadCircle from "/assets/mp3/head-circle.png";
 import mp3PlaybackHead from "/assets/mp3/playback-head.png";
 import boxTlbr from "/assets/box-tlbr.png";
+import boxTB from "/assets/box-tb.png";
 import popoutSpeech from "/assets/popout-speech.png";
 import smallBoxMask from "/assets/small-box-mask.png";
 import type { PlaybackState, Track } from "@spotify/web-api-ts-sdk";
@@ -28,6 +29,7 @@ const isSong = (
   --mp3-head-circle-png: url(${mp3HeadCircle.src});
   --mp3-playback-head-png: url(${mp3PlaybackHead.src});
   --box-tlbr-png: url("${boxTlbr.src}");
+  --box-tb-png: url("${boxTB.src}");
   --popout-speech-png: url("${popoutSpeech.src}");
   --small-box-mask-png: url("${smallBoxMask.src}");
 `}
@@ -204,6 +206,20 @@ const isSong = (
     }
   }
 
+  .playing {
+    z-index: 2;
+    
+    /* mobile border image */
+    @media (max-width: 90ch) {
+      image-rendering: pixelated;
+      border-image-source: var(--box-tb-png);
+      border-image-slice: 10 0 fill;
+      border-image-width: 20px 0;
+      border-image-outset: 20px 10000px;
+      border-image-repeat: round;
+    }
+  }
+
   .player {
     /* internal and external nodes dont affect each other 
         children dont affect this size
@@ -319,6 +335,8 @@ const isSong = (
 
     background-image: var(--mp3-base-png);
     background-size: contain;
+
+    z-index: -99999
   }
 
   .player:focus,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 948a1c8..73077f1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -58,10 +58,6 @@ sdk;
         }
       }
 
-      & :global(section) {
-        outline: 1px solid red;
-      }
-
       & :global(.landing) {
         grid-area: landing;
       }
-- 
2.51.2