orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/blog/StorefrontJournal.module.css

@@ -0,0 +1,387 @@
+/* Layout follows the width of this component, not of the screen: 960 and
+   1216px are the widths the full-width /journal page gives it on 1024 and
+   1280px screens. The list column measures itself (`posts`) as
+   BlogPostGroup does: 592 and 912px are its widths on 640 and 1280px
+   screens. */
+.feature {
+  display: grid;
+  min-width: 0;
+  /* The gap of `op-feature-stack` in the other packages. */
+  gap: 1.25rem;
+  color: var(--orionplace-text);
+  /* The page's base text, as `op-feature` in the other packages. */
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  container: journal / inline-size;
+}
+
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.heading {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.heading h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  line-height: 1.25;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.heading p {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.layout {
+  display: grid;
+  min-width: 0;
+  align-items: start;
+  gap: 2rem;
+}
+
+.content {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 2rem;
+  container: posts / inline-size;
+}
+
+/* The shared storefront button, as op-feature-button in Nuxt and Svelte:
+   uppercase 12px text, 44px tall, hover background. */
+.button {
+  composes: button from '../shared/features.module.css';
+}
+
+.filters {
+  display: none;
+  min-width: 0;
+  align-content: start;
+  gap: 2rem;
+}
+
+.filters[data-open] {
+  display: grid;
+}
+
+.filters fieldset {
+  display: grid;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.filters legend {
+  margin-bottom: 0.75rem;
+  padding: 0;
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.filters label {
+  display: flex;
+  /* The padding adds to the 36px row, as in the other packages. */
+  box-sizing: content-box;
+  min-height: 2.25rem;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0.25rem;
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+  cursor: pointer;
+}
+
+.filters label:focus-within {
+  background: var(--orionplace-hover);
+}
+
+@media (hover: hover) {
+  .filters label:hover {
+    background: var(--orionplace-hover);
+  }
+}
+
+.filters label span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.filters input {
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin: 0;
+  appearance: none;
+  border: 1px solid var(--orionplace-muted);
+  border-radius: 0;
+  background: var(--orionplace-surface);
+  outline: none;
+  cursor: pointer;
+  transition: background-color 120ms, border-color 120ms;
+}
+
+.filters input:checked {
+  border-color: var(--orionplace-accent);
+  background: var(--orionplace-accent);
+  box-shadow: inset 0 0 0 3px var(--orionplace-surface);
+}
+
+.filters input:focus-visible {
+  border-color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .filters input:hover:not(:disabled) {
+    border-color: var(--orionplace-text);
+  }
+}
+
+.filters input:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--orionplace-danger);
+  color: var(--orionplace-danger);
+}
+
+.countSkeleton,
+.filterToggleSkeleton,
+.filterSkeleton span,
+.skeletonCopy > span {
+  display: block;
+  background: var(--orionplace-border);
+}
+
+.countSkeleton {
+  width: 6rem;
+  height: 0.75rem;
+  margin-block: 0.125rem;
+}
+
+.filterToggleSkeleton {
+  box-sizing: border-box;
+  width: 7rem;
+  height: 2.75rem;
+  border: 1px solid var(--orionplace-border);
+  background: transparent;
+}
+
+.filterSkeleton {
+  display: none;
+  align-content: start;
+  gap: 0.75rem;
+}
+
+.filterSkeletonTitle {
+  width: 6rem;
+  height: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.filterSkeletonRow {
+  display: flex !important;
+  min-height: 2.25rem;
+  align-items: center;
+  gap: 0.75rem;
+  background: transparent !important;
+}
+
+.filterSkeletonRow > span:first-child {
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--orionplace-border);
+  background: transparent;
+}
+
+.filterSkeletonRow > span:last-child {
+  width: 8rem;
+  height: 0.75rem;
+}
+
+.filterSkeletonRow > span[data-short] {
+  width: 6rem;
+}
+
+.skeleton {
+  /* Tailwind's animate-pulse, as in the Nuxt and Svelte journals. */
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* The placeholder parts share the proportions of BlogPostCard: a bordered
+   3:2 cover with the date, title and preview lines below or beside it. */
+.skeletonCard,
+.skeletonHero,
+.skeletonRow {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+}
+
+.skeletonCover {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border: 1px solid var(--orionplace-border);
+}
+
+.skeletonCopy {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 0.75rem;
+  padding-block: 1rem;
+}
+
+.date,
+.text { height: 0.75rem; }
+.title { height: 1rem; }
+.w24 { width: 6rem; }
+.w11of12 { width: 91.666667%; }
+.w4of5 { width: 80%; }
+.w3of5 { width: 60%; }
+.w2of3 { width: 66.666667%; }
+.w1of2 { width: 50%; }
+.wFull { width: 100%; }
+
+.skeletonCustom {
+  display: grid;
+  gap: 2.5rem;
+}
+
+.skeletonPair,
+.skeletonStack {
+  display: grid;
+  align-content: start;
+  gap: 1.5rem;
+}
+
+.skeletonList {
+  display: grid;
+  row-gap: 2.5rem;
+}
+
+.skeletonGrid {
+  display: grid;
+  gap: 2.5rem 1.5rem;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@container journal (min-width: 592px) {
+  .heading h1 { font-size: 1.875rem; }
+}
+
+@container posts (min-width: 592px) {
+  .skeletonGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .skeletonHero,
+  .skeletonRow {
+    align-items: center;
+    column-gap: 1.5rem;
+  }
+
+  .skeletonHero {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  }
+
+  .skeletonRow {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  }
+}
+
+@container posts (min-width: 664px) {
+  .skeletonPair {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container journal (min-width: 960px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr) 16rem;
+    gap: 2.5rem;
+  }
+
+  .content {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  /* A column taller than the window scrolls on its own. */
+  .filters,
+  .filterSkeleton {
+    position: sticky;
+    top: 1.5rem;
+    max-height: calc(100dvh - 3rem);
+    overflow-y: auto;
+    display: grid;
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .filterToggle,
+  .filterToggleSkeleton {
+    display: none;
+  }
+}
+
+@container journal (min-width: 1216px) {
+  .layout { gap: 3rem; }
+}
+
+@container posts (min-width: 912px) {
+  .skeletonGrid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .filters input { transition: none; }
+  .skeleton { animation: none; }
+}