orionplace-react 0.7.7 → 0.8.0

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

@@ -1,387 +0,0 @@
-/* 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; }
-}