orionplace-react 0.7.8 → 0.8.0

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

@@ -1,333 +0,0 @@
-/* The gap and base text of `op-feature-stack` in the other packages. */
-.feature,
-.article,
-.header,
-.related {
-  display: grid;
-  min-width: 0;
-  gap: 1.25rem;
-}
-
-.feature {
-  color: var(--orionplace-text);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  container: article / inline-size;
-}
-
-.article,
-.skeleton {
-  width: 100%;
-  max-width: 45rem;
-  margin-inline: auto;
-}
-
-/* The shared storefront button, as op-feature-button in Nuxt and Svelte. */
-.button {
-  composes: button from '../shared/features.module.css';
-  width: fit-content;
-}
-
-.error {
-  composes: notice noticeError from '../account/account.module.css';
-}
-
-.header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.25;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.75rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.cover {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 3 / 2;
-  object-fit: cover;
-  background: var(--orionplace-surface);
-}
-
-.prose {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  line-height: 1.85;
-}
-
-.prose::after {
-  display: table;
-  clear: both;
-  content: '';
-}
-
-/* Product cards placed in the text keep their own look: the text rules skip placement blocks. */
-.prose :where(p, ul, ol, blockquote, pre, figure):where(:not([data-product-id] *, [data-product-ids] *)) {
-  margin: 1rem 0;
-}
-
-.prose :where(h1, h2, h3, h4, h5, h6, figure, table, pre):where(:not([data-product-id] *, [data-product-ids] *)) {
-  clear: both;
-}
-
-.prose :where(h1, h2, h3, h4, h5, h6):where(:not([data-product-id] *, [data-product-ids] *)) {
-  margin: 2rem 0 1rem;
-  font-weight: 500;
-  line-height: 1.3;
-}
-
-.prose h1:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.875rem; }
-.prose h2:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.5rem; }
-.prose h3:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.25rem; }
-.prose h4:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1.125rem; }
-.prose h5:where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 1rem; }
-.prose h6:where(:not([data-product-id] *, [data-product-ids] *)) {
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.prose :where(strong, b):where(:not([data-product-id] *, [data-product-ids] *)) { font-weight: 500; }
-.prose :where(sub, sup):where(:not([data-product-id] *, [data-product-ids] *)) { font-size: 0.75em; line-height: 0; }
-.prose mark:where(:not([data-product-id] *, [data-product-ids] *)) { color: inherit; background: var(--orionplace-attention-surface); }
-
-.prose a:where(:not([data-product-id] *, [data-product-ids] *)) {
-  border-bottom: 1px solid currentColor;
-  color: var(--orionplace-text);
-  text-decoration: none;
-}
-
-.prose a:not([href]):where(:not([data-product-id] *, [data-product-ids] *)) { border-bottom: 0; }
-.prose a:focus-visible:where(:not([data-product-id] *, [data-product-ids] *)) { color: var(--orionplace-accent); outline: none; }
-@media (hover: hover) {
-  .prose a:hover:where(:not([data-product-id] *, [data-product-ids] *)) {
-    color: var(--orionplace-accent);
-    outline: none;
-  }
-}
-.prose :where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *)) { padding-left: 1.5rem; }
-.prose ul:where(:not([data-product-id] *, [data-product-ids] *)) { list-style: disc; }
-.prose ol:where(:not([data-product-id] *, [data-product-ids] *)) { list-style: decimal; }
-.prose li > :where(ul, ol):where(:not([data-product-id] *, [data-product-ids] *)) { margin: 0.25rem 0; }
-.prose li > p:where(:not([data-product-id] *, [data-product-ids] *)) { margin: 0; }
-.prose ul[data-type='taskList']:where(:not([data-product-id] *, [data-product-ids] *)) { padding-left: 0; list-style: none; }
-
-.prose li[data-type='taskItem']:where(:not([data-product-id] *, [data-product-ids] *)) {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-
-.prose li[data-type='taskItem'] > label:where(:not([data-product-id] *, [data-product-ids] *)) {
-  display: flex;
-  align-items: center;
-  min-height: 1.85em;
-}
-
-.prose blockquote:where(:not([data-product-id] *, [data-product-ids] *)) {
-  padding-left: 1rem;
-  border-left: 2px solid var(--orionplace-border);
-  color: var(--orionplace-muted);
-}
-
-.prose hr:where(:not([data-product-id] *, [data-product-ids] *)) {
-  margin: 2rem 0;
-  border: 0;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.prose code:where(:not([data-product-id] *, [data-product-ids] *)) {
-  padding: 0.1em 0.3em;
-  background: var(--orionplace-muted-surface);
-  font-size: 0.875em;
-}
-
-.prose pre:where(:not([data-product-id] *, [data-product-ids] *)) {
-  overflow-x: auto;
-  padding: 1rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-muted-surface);
-  line-height: 1.6;
-}
-
-.prose pre code:where(:not([data-product-id] *, [data-product-ids] *)) { padding: 0; background: transparent; }
-
-.prose table:where(:not([data-product-id] *, [data-product-ids] *)) {
-  display: block;
-  max-width: 100%;
-  overflow-x: auto;
-  margin: 1rem 0;
-  border-collapse: collapse;
-}
-
-.prose :where(th, td):where(:not([data-product-id] *, [data-product-ids] *)) {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  text-align: left;
-  vertical-align: top;
-}
-
-.prose :where(img, video, audio):where(:not([data-product-id] *, [data-product-ids] *)) { max-width: 100%; }
-.prose img:where(:not([data-product-id] *, [data-product-ids] *)) { height: auto; }
-.prose figure:where(:not([data-product-id] *, [data-product-ids] *)) { max-width: 100%; }
-.prose figure > img:where(:not([data-product-id] *, [data-product-ids] *)) { display: block; margin-inline: auto; }
-.prose figcaption:where(:not([data-product-id] *, [data-product-ids] *)) { margin-top: 0.5rem; color: var(--orionplace-muted); }
-
-.prose :where(img, figure)[data-float='left']:where(:not([data-product-id] *, [data-product-ids] *)),
-.prose :where(img, figure)[style*='float: left']:where(:not([data-product-id] *, [data-product-ids] *)) {
-  float: left;
-  max-width: 50%;
-  margin: 0.25rem 1.5rem 1rem 0;
-}
-
-.prose :where(img, figure)[data-float='right']:where(:not([data-product-id] *, [data-product-ids] *)),
-.prose :where(img, figure)[style*='float: right']:where(:not([data-product-id] *, [data-product-ids] *)) {
-  float: right;
-  max-width: 50%;
-  margin: 0.25rem 0 1rem 1.5rem;
-}
-
-.prose details:where(:not([data-product-id] *, [data-product-ids] *)) {
-  margin: 1rem 0;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--orionplace-border);
-}
-
-.prose summary:where(:not([data-product-id] *, [data-product-ids] *)) { cursor: pointer; font-weight: 500; }
-
-/* `op-feature-panel op-feature-stack` in the other packages. */
-.access {
-  display: grid;
-  gap: 1.25rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.access h2,
-.related h2 {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.access p { margin: 0; color: var(--orionplace-muted); line-height: 1.5rem; }
-.video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
-
-.skeleton {
-  display: grid;
-  gap: 0.75rem;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.skeleton span { display: block; background: var(--orionplace-border); }
-.skeletonTitle { width: 92%; height: 1.75rem; }
-.skeletonTitleShort { width: 60%; height: 1.75rem; }
-.skeletonMeta { display: flex; gap: 1rem; }
-.skeletonMeta span { width: 7rem; height: 0.75rem; }
-.skeletonCover {
-  width: 100%;
-  aspect-ratio: 3 / 2;
-  border: 1px solid var(--orionplace-border);
-  background: transparent !important;
-}
-.skeletonText { display: grid; gap: 1rem; padding-block: 0.5rem; }
-.skeletonText span { height: 0.75rem; }
-.skeletonText span:nth-child(3) { width: 92%; }
-.skeletonText span:nth-child(5) { width: 80%; }
-.skeletonText span:last-child { width: 66%; }
-.skeletonRelated { width: 10rem; height: 0.75rem; }
-.skeletonCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
-.skeletonCards span {
-  aspect-ratio: 3 / 4;
-  border: 1px solid var(--orionplace-border);
-  background: transparent;
-}
-
-.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 article (min-width: 592px) {
-  .header h1 { font-size: 1.875rem; }
-}
-
-/* A narrow article has no room for text beside a floated image; 592px is
-   the article's width in the /journal page on a 640px screen. */
-@container article (max-width: 591px) {
-  .prose :where(img, figure)[data-float]:where(:not([data-product-id] *, [data-product-ids] *)),
-  .prose :where(img, figure)[style*='float:']:where(:not([data-product-id] *, [data-product-ids] *)) {
-    float: none !important;
-    width: auto !important;
-    max-width: 100%;
-    margin: 1rem 0 !important;
-  }
-}
-
-/* The related products' placeholder shows three cards from 660px of article
-   width, as on Nuxt. */
-@container article (max-width: 659px) {
-  .skeletonCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .skeletonCards span:last-child { display: none; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .skeleton { animation: none; }
-}
-/* Images that open in the viewer. */
-.cover[data-blog-image-viewer],
-.prose img[data-blog-image-viewer]:where(:not([data-product-id] *, [data-product-ids] *)) { cursor: zoom-in; }
-.cover[data-blog-image-viewer]:focus-visible,
-.prose img[data-blog-image-viewer]:focus-visible:where(:not([data-product-id] *, [data-product-ids] *)) { outline: 2px solid var(--orionplace-accent); outline-offset: 3px; }
-
-/* Product placements: cards fill them; one without its products stays hidden. */
-.prose :where([data-product-id], [data-product-ids]):empty {
-  display: none;
-}
-
-.prose [data-product-ids] {
-  clear: both;
-  margin: 1.5rem 0;
-}
-
-.prose [data-product-id]:not([data-product-ids]) {
-  width: min(100%, 260px);
-  margin-block: 1.5rem;
-}
-
-/* The editor's float has no room beside a card on a narrow page. */
-@container article (max-width: 480px) {
-  .prose [data-product-id]:not([data-product-ids]) {
-    float: none !important;
-    margin-inline: auto !important;
-  }
-}