mummert/pinboard-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tune pinboard styling and Muuri-driven dynamic item widths

Browse Source
This commit is contained in:
Jürgen Mummert
2026-03-04 18:50:49 +01:00
parent ab5e9b30b5
commit 42a816d347
2 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/assets/pinboard.css
View File

@@ -6,23 +6,27 @@
box-sizing: border-box;
}
.pinboard {
--pin-gap: 1.25rem;
}
.pinboard__surface {
position: relative;
min-height: 42rem;
padding: 1.2rem;
border: 30px solid #cba888;
border-radius: 1.2rem;
overflow: hidden;
background:
radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.25), transparent 42%),
radial-gradient(circle at 80% 90%, rgba(50, 30, 10, 0.2), transparent 36%),
repeating-linear-gradient(35deg, rgba(75, 40, 15, 0.18), rgba(75, 40, 15, 0.18) 3px, rgba(93, 52, 23, 0.12) 3px, rgba(93, 52, 23, 0.12) 9px),
linear-gradient(145deg, #b77944 0%, #a66a38 45%, #8d552a 100%);
radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 42%),
radial-gradient(circle at 80% 90%, rgba(40, 22, 10, 0.16), transparent 36%),
url('/bundles/contaopinboard/assets/wood_0011_color_1k.jpg') center/cover no-repeat;
box-shadow: inset 0 0 0 1px rgba(65, 33, 12, 0.25), inset 0 0 18px rgba(45, 22, 8, 0.35);
}
.pin-note {
position: absolute;
width: clamp(220px, 26vw, 320px);
width: 320px;
min-height: 230px;
padding: 1.5em;
box-sizing: border-box;
@@ -113,8 +117,4 @@
.pinboard__surface {
min-height: 36rem;
}
.pin-note {
width: min(84vw, 290px);
}
}