Implemented phase 1 for the POC prototype in the Website service.
This commit is contained in:
javier committed
1 parent
6d7ab4bcba
commit
ea89ea892a
37 files changed
+4173
-43
No files matched your search
@@ -80,6 +80,9 @@
|
||||
--cover-rust: #6b3a1f;
|
||||
--cover-slate: #26363b;
|
||||
--cover-plum: #43304f;
|
||||
--cover-brick: #7a2e24;
|
||||
--cover-olive: #4a4326;
|
||||
--cover-ink: #1e3347;
|
||||
|
||||
/* Type families */
|
||||
--font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
|
||||
@@ -559,6 +562,17 @@ input[type="radio"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button--bare {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.button--bare:hover {
|
||||
border-color: transparent;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.button:disabled,
|
||||
.button[aria-disabled="true"] {
|
||||
border-color: var(--line);
|
||||
@@ -639,9 +653,25 @@ input[type="radio"] {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* An applied filter: pressing it removes it. */
|
||||
.pill--active {
|
||||
gap: var(--space-1);
|
||||
border-color: var(--header);
|
||||
background: var(--header);
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.pill--active:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.pill {
|
||||
height: var(--control-xs);
|
||||
padding: 0 var(--space-3);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -675,6 +705,12 @@ input[type="radio"] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input--sm {
|
||||
height: var(--control-sm);
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
textarea.input {
|
||||
height: auto;
|
||||
min-height: 96px;
|
||||
@@ -749,6 +785,26 @@ textarea.input {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.monogram--lg {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.monogram--xl {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.monogram--xl {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1330,6 +1386,451 @@ textarea.input {
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Catalogue components
|
||||
========================================================================== */
|
||||
|
||||
/* Placeholder covers. The face scales with the cover's width through container units. */
|
||||
.cover {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--cover-ground, var(--cover-navy));
|
||||
color: var(--cover-lettering, var(--gold));
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.cover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 42% -15% auto;
|
||||
height: 22%;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
.cover__face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 6.5cqw;
|
||||
}
|
||||
|
||||
.cover__title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-lettering);
|
||||
font-size: 16cqw;
|
||||
line-height: 0.9;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cover__foot {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 4cqw;
|
||||
}
|
||||
|
||||
.cover__imprint {
|
||||
color: var(--cover-imprint, #c9d3e4);
|
||||
font-size: max(9px, 4cqw);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cover__number {
|
||||
color: #ffffff;
|
||||
font-family: var(--font-lettering);
|
||||
font-size: 16cqw;
|
||||
line-height: 0.9;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cover__number--text {
|
||||
font-size: 12cqw;
|
||||
}
|
||||
|
||||
.cover--navy { --cover-ground: var(--cover-navy); --cover-lettering: var(--gold); --cover-imprint: #c9d3e4; }
|
||||
.cover--wine { --cover-ground: var(--cover-wine); --cover-lettering: #f0e3cf; --cover-imprint: #e4cfc0; }
|
||||
.cover--forest { --cover-ground: var(--cover-forest); --cover-lettering: #e4c35c; --cover-imprint: #c6d8ce; }
|
||||
.cover--rust { --cover-ground: var(--cover-rust); --cover-lettering: #f2d9a8; --cover-imprint: #e8d2b8; }
|
||||
.cover--slate { --cover-ground: var(--cover-slate); --cover-lettering: #d9e6e4; --cover-imprint: #c5d6d4; }
|
||||
.cover--plum { --cover-ground: var(--cover-plum); --cover-lettering: #f2c14e; --cover-imprint: #d8cce0; }
|
||||
.cover--brick { --cover-ground: var(--cover-brick); --cover-lettering: #f5e7d3; --cover-imprint: #ecd3c4; }
|
||||
.cover--olive { --cover-ground: var(--cover-olive); --cover-lettering: #efe4b8; --cover-imprint: #ddd3a8; }
|
||||
.cover--ink { --cover-ground: var(--cover-ink); --cover-lettering: #c9d9e8; --cover-imprint: #b5c8da; }
|
||||
|
||||
/* Each tone carries its own motif. */
|
||||
.cover--wine::before {
|
||||
inset: auto -20% -14% auto;
|
||||
width: 70%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cover--forest::before,
|
||||
.cover--olive::before {
|
||||
inset: 0 0 auto;
|
||||
height: 35%;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cover--rust::before,
|
||||
.cover--brick::before {
|
||||
inset: auto -15% 12%;
|
||||
height: 16%;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
transform: rotate(6deg);
|
||||
}
|
||||
|
||||
.cover--plum::before,
|
||||
.cover--ink::before {
|
||||
inset: 0 auto 0 0;
|
||||
width: 10%;
|
||||
height: auto;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cover--plum .cover__face,
|
||||
.cover--ink .cover__face {
|
||||
padding-left: 16cqw;
|
||||
}
|
||||
|
||||
/* Listing cards */
|
||||
.listing-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.listing-card__cover {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing-card__save {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(245, 243, 238, 0.92);
|
||||
color: #191713;
|
||||
}
|
||||
|
||||
.listing-card__save:hover {
|
||||
background: #ffffff;
|
||||
color: #b3271e;
|
||||
}
|
||||
|
||||
.listing-card__title {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing-card__title:hover {
|
||||
color: var(--ink);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.listing-card__meta,
|
||||
.listing-card__shop {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.listing-card__meta {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.listing-card__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.listing-card__shop {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing-card__shop:hover {
|
||||
color: var(--ink);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.listing-card {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Beside the filter rail, the grid runs four across. */
|
||||
.card-grid--search {
|
||||
--grid-columns: 4;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
.pagination__page,
|
||||
.pagination__next {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: var(--control-md);
|
||||
height: var(--control-md);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pagination__page:hover {
|
||||
background: var(--tint);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.pagination__page[aria-current] {
|
||||
background: var(--header);
|
||||
color: var(--on-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination__next {
|
||||
margin-left: 10px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination__next:hover {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: var(--ink);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.breadcrumb__current {
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
border-bottom: 1px solid var(--line);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs__tab {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
height: var(--control-md);
|
||||
padding: 0 var(--space-4);
|
||||
border-bottom: 3px solid transparent;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tabs__tab:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.tabs__tab[aria-current] {
|
||||
border-bottom-color: var(--ink);
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Select, and the sort control built on it */
|
||||
.select {
|
||||
height: 40px;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--card);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sort__label {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Checkbox rows */
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 24px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Segmented radio control */
|
||||
.segmented {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.segmented__option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segmented__option + .segmented__option {
|
||||
border-left: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.segmented__option input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segmented__option span {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--control-sm);
|
||||
padding: 0 var(--space-2);
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.segmented__option input:checked + span {
|
||||
background: var(--header);
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.segmented__option input:focus-visible + span {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Empty states */
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-8) var(--space-6);
|
||||
border: 1px dashed var(--rule);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
/* The gate note under gated actions */
|
||||
.gate-note {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: var(--space-3) 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--paper);
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.gate-note .icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.gate-note__link {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.verified {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
color: var(--good);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Helpers
|
||||
========================================================================== */
|
||||
@@ -1339,6 +1840,11 @@ textarea.input {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hidden once scripts run: the submit buttons of forms that then submit themselves. */
|
||||
.js .js-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden visually, still read out. */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
|
||||
Reference in new issue
Block a user