danielandClaude Sonnet 5
13fb67a0f8
Displays a page's file resources as a responsive grid of cards with a thumbnail (explicit param, name-matched image, or a generic file icon), title, size and download link. Meant for a downloads page offering a handful of PDFs. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
123 lines
2.6 KiB
SCSS
123 lines
2.6 KiB
SCSS
@import "bootstrap/bootstrap";
|
|
|
|
:root {
|
|
--bs-primary: #004a6f;
|
|
--bs-secondary: #009ee3;
|
|
--bs-success: #198754;
|
|
--bs-danger: #dc3545;
|
|
--bs-warning: #ffc107;
|
|
--bs-info: #00a194;
|
|
--bs-light: #eff0f1;
|
|
--bs-dark: #535455;
|
|
|
|
//--bs-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
--bs-body-font-size: 1.1rem;
|
|
--bs-body-line-height: 1.5;
|
|
}
|
|
|
|
// Keep the full-bleed `.banner` from adding a horizontal scrollbar
|
|
// (100vw is wider than the viewport when a vertical scrollbar is shown).
|
|
html {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--bs-font-sans-serif);
|
|
line-height: var(--bs-body-line-height);
|
|
color: var(--bs-dark);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
// Navigation customization
|
|
.navbar {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
&-brand {
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
|
|
// Card customization
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
// Footer customization
|
|
.footer {
|
|
background-color: var(--bs-dark);
|
|
color: var(--bs-dark);
|
|
padding: 40px 20px 20px;
|
|
margin-top: 60px;
|
|
border-top: 1px solid #dee2e6;
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Full-bleed banner / hero image: spans the viewport width while the
|
|
// surrounding page content stays within `.container`. Works from inside
|
|
// any centred `.container` because the horizontal margins cancel out the
|
|
// container offset (50% of the parent - 50% of the viewport).
|
|
.banner {
|
|
display: block;
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
margin-left: calc(50% - 50vw);
|
|
margin-right: calc(50% - 50vw);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
// When the banner is the first thing in the page body, pull it flush
|
|
// against the navbar by cancelling the layout's top padding (`py-5`).
|
|
.content-body > .banner:first-child,
|
|
.content-body > p:first-child > .banner:only-child {
|
|
margin-top: -3rem;
|
|
}
|
|
|
|
// Resource tiles (see the `resource-tiles` shortcode): a grid of cards,
|
|
// one per downloadable file, each with a thumbnail or a generic file
|
|
// icon on top.
|
|
.resource-tile {
|
|
&__thumb,
|
|
&__icon {
|
|
aspect-ratio: 3 / 2;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
background-color: var(--bs-light);
|
|
}
|
|
|
|
&__icon {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
&__ext {
|
|
position: absolute;
|
|
bottom: 0.9rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.card-title {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
|