111 lines
2.2 KiB
CSS
111 lines
2.2 KiB
CSS
.pinboard {
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.pinboard__surface {
|
|
position: relative;
|
|
min-height: 42rem;
|
|
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%);
|
|
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, 28vw, 340px);
|
|
min-height: 190px;
|
|
padding: 1rem 1rem 1.25rem;
|
|
border-radius: 0.3rem;
|
|
background: linear-gradient(160deg, #fff8a8 0%, #f5eb85 100%);
|
|
color: #2a241c;
|
|
box-shadow: 0 10px 22px rgba(20, 10, 5, 0.34);
|
|
cursor: grab;
|
|
user-select: none;
|
|
touch-action: none;
|
|
transition: box-shadow 160ms ease, transform 160ms ease;
|
|
}
|
|
|
|
.pin-note::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -9px;
|
|
left: 50%;
|
|
width: 18px;
|
|
height: 18px;
|
|
transform: translateX(-50%);
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 35%, #f2f2f2, #979797 68%, #707070 100%);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.pin-note.is-highlighted {
|
|
background: linear-gradient(160deg, #ffd99b 0%, #f7c46f 100%);
|
|
}
|
|
|
|
.pin-note.is-dragging {
|
|
cursor: grabbing;
|
|
box-shadow: 0 18px 34px rgba(20, 10, 5, 0.46);
|
|
}
|
|
|
|
.pin-note__image-wrap {
|
|
margin: 0 0 0.7rem;
|
|
}
|
|
|
|
.pin-note__image {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.pin-note__headline {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.1rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.pin-note__text {
|
|
font-size: 0.96rem;
|
|
line-height: 1.45;
|
|
max-height: 14rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pin-note__link-wrap {
|
|
margin: 0.8rem 0 0;
|
|
}
|
|
|
|
.pin-note__link {
|
|
color: inherit;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pinboard__empty {
|
|
margin: 0;
|
|
padding: 1.5rem;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.pinboard {
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
.pinboard__surface {
|
|
min-height: 36rem;
|
|
}
|
|
|
|
.pin-note {
|
|
width: min(84vw, 290px);
|
|
}
|
|
}
|