Ryan Malloy
eae849fe7a
SSR the notebook list in Astro frontmatter (eliminating the client-side loading spinner). Add hero section with oscilloscope graticule background, 4-column feature highlights, and a React island gallery with category filter pills, tag search, and grouped/flat view modes.
32 lines
830 B
CSS
32 lines
830 B
CSS
/* Oscilloscope graticule background for the hero section */
|
|
.hero-graticule {
|
|
--grid-color: rgba(51, 65, 85, 0.35);
|
|
--grid-size: 48px;
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-graticule::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(var(--grid-color) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
|
|
background-size: var(--grid-size) var(--grid-size);
|
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 85%);
|
|
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 85%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Horizontal scrollable filter pills */
|
|
.filter-pills {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.filter-pills::-webkit-scrollbar {
|
|
display: none;
|
|
}
|