jmartin
43928f7a49
Single-container app with Postgres catalog, Typesense search, Authelia Remote-User admin, portfolio views, resume/PDF, media uploads, and ArtStation import tooling.
110 lines
1.8 KiB
SCSS
110 lines
1.8 KiB
SCSS
.portfolio {
|
|
padding: 3rem 0 4rem;
|
|
|
|
&__header {
|
|
margin-bottom: 2rem;
|
|
|
|
h1 {
|
|
margin: 0 0 0.5rem;
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
}
|
|
}
|
|
|
|
&__eyebrow {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-size: 0.72rem;
|
|
color: var(--accent);
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
&__desc {
|
|
color: var(--text-muted);
|
|
max-width: 40rem;
|
|
margin: 0;
|
|
}
|
|
|
|
&__view-note {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-dim);
|
|
|
|
code {
|
|
color: var(--accent);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
a {
|
|
color: var(--text-muted);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&__filters {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.65rem;
|
|
margin-bottom: 1.25rem;
|
|
|
|
@media (min-width: 720px) {
|
|
grid-template-columns: 1.5fr 1fr 0.8fr;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.7rem 0.9rem;
|
|
outline: none;
|
|
|
|
&:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__quick {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.45rem;
|
|
margin-bottom: 2rem;
|
|
|
|
a {
|
|
font-size: 0.78rem;
|
|
padding: 0.35rem 0.75rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
|
|
&:hover,
|
|
&.is-active {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__status {
|
|
color: var(--text-muted);
|
|
margin: 2rem 0;
|
|
|
|
&--err {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
|
|
&__pager {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.25rem;
|
|
margin-top: 2.5rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|