From 5f5b1e513209072149de6bad2f88bdde499fd7c8 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 17 Apr 2023 19:37:38 +0800
Subject: [PATCH] New Multi-column redesign

---
 src/app.css | 68 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/app.css b/src/app.css
index c2e6e646..abbd0ffe 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1711,6 +1711,8 @@ ul.link-list li a .icon {
   overscroll-behavior: auto;
   flex-basis: min(100vw, 360px);
   flex-shrink: 0;
+  box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color),
+    -3px 0 var(--bg-color);
 }
 #columns .header-grid input {
   pointer-events: none;
@@ -1725,8 +1727,8 @@ ul.link-list li a .icon {
 }
 @media (min-width: 40em) {
   #columns {
-    gap: 16px;
-    padding: 16px;
+    /* gap: 16px; */
+    /* padding: 0 16px; */
     background-color: var(--bg-blur-color);
     height: 100vh;
     height: 100dvh;
@@ -1735,22 +1737,65 @@ ul.link-list li a .icon {
   }
   #columns > * {
     padding: 0 16px;
-    border: var(--hairline-width) solid var(--outline-color);
-    border-radius: 16px;
-    box-shadow: 0 4px 16px var(--drop-shadow-color);
+    border-inline: var(--hairline-width) solid var(--bg-faded-color);
+    /* border-radius: 16px; */
+    /* box-shadow: -4px 0 16px -8px var(--drop-shadow-color); */
     height: unset;
-    background-image: linear-gradient(
+    background-color: var(--bg-faded-blur-color);
+    backdrop-filter: blur(16px) saturate(3);
+    /* background-image: linear-gradient(
       160deg,
       transparent 20%,
       var(--bg-color),
       transparent 75%
-    );
+    ); */
+    position: sticky;
+    left: 0;
+    transition: all 0.3s ease-out;
   }
+  /* #columns > *:nth-child(2) {
+    left: 5%;
+  }
+  #columns > *:nth-child(3) {
+    left: 10%;
+  }
+  #columns > *:nth-child(4) {
+    left: 15%;
+  }
+  #columns > *:nth-child(5) {
+    left: 20%;
+  }
+  #columns > *:nth-child(6) {
+    left: 25%;
+  }
+  #columns > *:nth-child(7) {
+    left: 30%;
+  }
+  #columns > *:nth-child(8) {
+    left: 35%;
+  }
+  #columns > *:nth-child(9) {
+    left: 40%;
+  }
+  #columns > *:nth-child(10) {
+    left: 45%;
+  }
+  #columns > *:focus {
+    z-index: 1;
+    box-shadow: 0 0 32px var(--drop-shadow-color),
+      0 0 32px var(--drop-shadow-color);
+  } */
+  /* #columns:has(> *:focus) > *:not(:focus) > * {
+    filter: opacity(0.8);
+  } */
+
   #columns > *:focus-visible,
   #columns > *:has(:focus-visible) {
-    box-shadow: 0 4px 16px var(--drop-shadow-color),
-      0 4px 16px var(--drop-shadow-color);
-    border-color: var(--outline-hover-color);
+    /* box-shadow: 0 4px 16px var(--drop-shadow-color),
+      0 4px 16px var(--drop-shadow-color); */
+    /* border-color: var(--outline-hover-color); */
+    z-index: 1;
+    box-shadow: inset 0 0 0 1px var(--outline-hover-color);
   }
   #columns .timeline:not(.flat) > li:has(.status-link.is-active),
   #columns
@@ -1765,6 +1810,9 @@ ul.link-list li a .icon {
   #columns .timeline-deck > header {
     margin: 0;
   }
+  #columns .timeline-deck > header[hidden] {
+    transform: none;
+  }
   #columns li:has(.status-carousel) {
     width: auto;
     transform: none;