mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-26 03:05:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

New Multi-column redesign

Browse source
This commit is contained in:
Lim Chee Aun 2023-04-17 19:37:38 +08:00
parent ba868ffff5
commit 5f5b1e5132
1 changed files with 58 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/app.css
View file

@ -1711,6 +1711,8 @@ ul.link-list li a .icon {
overscroll-behavior: auto; overscroll-behavior: auto;
flex-basis: min(100vw, 360px); flex-basis: min(100vw, 360px);
flex-shrink: 0; 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 { #columns .header-grid input {
pointer-events: none; pointer-events: none;
@ -1725,8 +1727,8 @@ ul.link-list li a .icon {
} }
@media (min-width: 40em) { @media (min-width: 40em) {
#columns { #columns {
gap: 16px; /* gap: 16px; */
padding: 16px; /* padding: 0 16px; */
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
height: 100vh; height: 100vh;
height: 100dvh; height: 100dvh;
@ -1735,22 +1737,65 @@ ul.link-list li a .icon {
} }
#columns > * { #columns > * {
padding: 0 16px; padding: 0 16px;
border: var(--hairline-width) solid var(--outline-color); border-inline: var(--hairline-width) solid var(--bg-faded-color);
border-radius: 16px; /* border-radius: 16px; */
box-shadow: 0 4px 16px var(--drop-shadow-color); /* box-shadow: -4px 0 16px -8px var(--drop-shadow-color); */
height: unset; height: unset;
background-image: linear-gradient( background-color: var(--bg-faded-blur-color);
backdrop-filter: blur(16px) saturate(3);
/* background-image: linear-gradient(
160deg, 160deg,
transparent 20%, transparent 20%,
var(--bg-color), var(--bg-color),
transparent 75% 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 > *:focus-visible,
#columns > *:has(:focus-visible) { #columns > *:has(:focus-visible) {
box-shadow: 0 4px 16px var(--drop-shadow-color), /* box-shadow: 0 4px 16px var(--drop-shadow-color),
0 4px 16px var(--drop-shadow-color); 0 4px 16px var(--drop-shadow-color); */
border-color: var(--outline-hover-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 .timeline:not(.flat) > li:has(.status-link.is-active),
#columns #columns
@ -1765,6 +1810,9 @@ ul.link-list li a .icon {
#columns .timeline-deck > header { #columns .timeline-deck > header {
margin: 0; margin: 0;
} }
#columns .timeline-deck > header[hidden] {
transform: none;
}
#columns li:has(.status-carousel) { #columns li:has(.status-carousel) {
width: auto; width: auto;
transform: none; transform: none;