Save workspace changes
This commit is contained in:
@@ -0,0 +1,199 @@
|
||||
/*
|
||||
* MasonryGallery – scoped CSS
|
||||
*
|
||||
* Grid column definitions (activated when React adds .is-enhanced to the root).
|
||||
* Mirrors the blade @push('styles') blocks so the same rules apply whether the
|
||||
* page is rendered server-side or by the React component.
|
||||
*/
|
||||
|
||||
/* ── Masonry grid ─────────────────────────────────────────────────────────── */
|
||||
[data-nova-gallery].is-enhanced [data-gallery-grid] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
grid-auto-rows: 8px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
[data-nova-gallery].is-enhanced [data-gallery-grid] {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Spec §5: 4 columns desktop, scaling up for very wide screens */
|
||||
@media (min-width: 1024px) {
|
||||
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (min-width: 2200px) {
|
||||
[data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
[data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
[data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
|
||||
|
||||
/* ── Fallback aspect-ratio for cards without stored dimensions ───────────── */
|
||||
/*
|
||||
* When ArtworkCard has no width/height data it renders the img as h-auto,
|
||||
* meaning the container height is 0 until the image loads. Setting a
|
||||
* default aspect-ratio here reserves approximate space immediately and
|
||||
* prevents applyMasonry from calculating span=1 → then jumping on load.
|
||||
* Cards with an inline aspect-ratio style (from real dimensions) override this.
|
||||
*/
|
||||
[data-nova-gallery] [data-gallery-grid] .nova-card-media {
|
||||
aspect-ratio: 3 / 2;
|
||||
width: 100%; /* prevent aspect-ratio + max-height from shrinking the column width */
|
||||
}
|
||||
|
||||
/* Override: when an inline aspect-ratio is set by ArtworkCard those values */
|
||||
/* take precedence naturally (inline style > class). No extra selector needed. */
|
||||
|
||||
/* ── Card max-height cap ──────────────────────────────────────────────────── */
|
||||
/*
|
||||
* Limits any single card to the height of 2 stacked 16:9 images in its column.
|
||||
* Formula: 2 × (col_width × 9/16) = col_width × 9/8
|
||||
*
|
||||
* 5-col (lg+): col_width = (100vw - 80px_padding - 4×24px_gaps) / 5
|
||||
* = (100vw - 176px) / 5
|
||||
* max-height = (100vw - 176px) / 5 × 9/8
|
||||
* = (100vw - 176px) × 0.225
|
||||
*
|
||||
* 2-col (md): col_width = (100vw - 80px - 1×24px) / 2
|
||||
* = (100vw - 104px) / 2
|
||||
* max-height = (100vw - 104px) / 2 × 9/8
|
||||
* = (100vw - 104px) × 0.5625
|
||||
*
|
||||
* 1-col mobile: uncapped – portrait images are fine filling the full width.
|
||||
*/
|
||||
|
||||
/* Global selector covers both the React-rendered gallery and the blade fallback */
|
||||
[data-nova-gallery] [data-gallery-grid] .nova-card-media {
|
||||
overflow: hidden; /* ensure img is clipped at max-height */
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
[data-nova-gallery] [data-gallery-grid] .nova-card-media {
|
||||
/* 5-column layout: 2 × (col_width × 9/16) = col_width × 9/8 */
|
||||
max-height: calc((100vw - 176px) * 9 / 40);
|
||||
}
|
||||
/* Wide (2-col spanning) cards get double the column width */
|
||||
[data-nova-gallery] [data-gallery-grid] .nova-card--wide .nova-card-media {
|
||||
max-height: calc((100vw - 176px) * 9 / 20);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
[data-nova-gallery] [data-gallery-grid] .nova-card-media {
|
||||
/* 2-column layout */
|
||||
max-height: calc((100vw - 104px) * 9 / 16);
|
||||
}
|
||||
[data-nova-gallery] [data-gallery-grid] .nova-card--wide .nova-card-media {
|
||||
/* 2-col span fills full width on md breakpoint */
|
||||
max-height: calc((100vw - 104px) * 9 / 8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Image is positioned absolutely inside the container so it always fills
|
||||
the capped box (max-height), cropping top/bottom via object-fit: cover. */
|
||||
[data-nova-gallery] [data-gallery-grid] .nova-card-media > .nova-card-main-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ── Skeleton ─────────────────────────────────────────────────────────────── */
|
||||
.nova-skeleton-card {
|
||||
border-radius: 1rem;
|
||||
min-height: 180px;
|
||||
background: linear-gradient(
|
||||
110deg,
|
||||
rgba(255, 255, 255, 0.06) 8%,
|
||||
rgba(255, 255, 255, 0.12) 18%,
|
||||
rgba(255, 255, 255, 0.06) 33%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: novaShimmer 1.2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes novaShimmer {
|
||||
to { background-position-x: -200%; }
|
||||
}
|
||||
|
||||
/* ── Card enter animation (appended by infinite scroll) ───────────────────── */
|
||||
.nova-card-enter { opacity: 0; transform: translateY(8px); }
|
||||
.nova-card-enter-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 200ms ease-out, transform 200ms ease-out;
|
||||
}
|
||||
|
||||
/* ── Card hover: bottom glow pulse ───────────────────────────────────────── */
|
||||
.nova-card > a {
|
||||
will-change: transform, box-shadow;
|
||||
}
|
||||
.nova-card:hover > a {
|
||||
box-shadow:
|
||||
0 8px 30px rgba(0, 0, 0, 0.6),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 0 20px rgba(224, 122, 33, 0.07);
|
||||
}
|
||||
|
||||
/* ── Quick action buttons ─────────────────────────────────────────────────── */
|
||||
/*
|
||||
* .nb-card-actions – absolutely positioned at top-right of .nova-card.
|
||||
* Fades in + slides down slightly when the card is hovered.
|
||||
* Requires .nova-card to have position:relative (set inline by ArtworkCard.jsx).
|
||||
*/
|
||||
.nb-card-actions {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity 200ms ease-out, transform 200ms ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nova-card:hover .nb-card-actions,
|
||||
.nova-card:focus-within .nb-card-actions {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nb-card-action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(10, 14, 20, 0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 150ms ease, transform 150ms ease, color 150ms ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.nb-card-action-btn:hover {
|
||||
background: rgba(224, 122, 33, 0.85);
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
Reference in New Issue
Block a user