@conduction/docusaurus-preset 3.44.1 → 3.44.3

package/src/components/GameModal/GameModal.jsx

@@ -244,174 +244,190 @@ export default function GameModal({games: gamesProp, share: shareConfig, classNa
       <div className={styles.overlay} onClick={close} />
       <div className={styles.panel}>
         <button type="button" className={styles.close} onClick={close} aria-label={translate({id: 'preset.gameModal.close', message: 'Close', description: 'Accessible label for the close (×) button on the game-over modal'})}>×</button>
-        <p className={styles.eyebrow}>{eyebrow}</p>
-        <h2 className={styles.title} id="gm-title">{title}</h2>
-        <p className={styles.subtitle}>{subtitle}</p>
+        {/* Three blocks, laid out in two columns from 880px up: the
+            headline top left, what you do with the run top right,
+            and the roster of sixteen games across the bottom in two
+            columns of eight. In one column the roster alone ran past
+            the bottom of the window, which put the total and the
+            share buttons out of reach on a laptop. The DOM order is
+            the reading order either way; only the grid moves the
+            roster above the share block on a wide screen. */}
+        <div className={styles.body}>
+          <div className={styles.intro}>
+            <p className={styles.eyebrow}>{eyebrow}</p>
+            <h2 className={styles.title} id="gm-title">{title}</h2>
+            <p className={styles.subtitle}>{subtitle}</p>
 
-        {typeof event.score !== 'undefined' && (
-          <span className={styles.scorePill}>{event.summary || translate({id: 'preset.gameModal.scorePill', message: 'score: {score}', description: 'Default score pill text. {score} is the numeric score.'}, {score: event.score})}</span>
-        )}
+            {typeof event.score !== 'undefined' && (
+              <span className={styles.scorePill}>{event.summary || translate({id: 'preset.gameModal.scorePill', message: 'score: {score}', description: 'Default score pill text. {score} is the numeric score.'}, {score: event.score})}</span>
+            )}
 
-        <div className={styles.progress}>
-          <div className={styles.progressLabel}>
-            <span>
-              <Translate
-                id="preset.gameModal.progress.found"
-                description="Progress label below the game-over copy. {found} bolded count of games discovered; {total} is the total."
-                values={{
-                  found: <strong>{foundCount}</strong>,
-                  total: total,
-                }}>
-                {'{found} / {total} mini-games found'}
-              </Translate>
-            </span>
-            <span>{percent}%</span>
+            <div className={styles.progress}>
+              <div className={styles.progressLabel}>
+                <span>
+                  <Translate
+                    id="preset.gameModal.progress.found"
+                    description="Progress label below the game-over copy. {found} bolded count of games discovered; {total} is the total."
+                    values={{
+                      found: <strong>{foundCount}</strong>,
+                      total: total,
+                    }}>
+                    {'{found} / {total} mini-games found'}
+                  </Translate>
+                </span>
+                <span>{percent}%</span>
+              </div>
+              <div className={styles.progressBar}>
+                <div className={styles.progressFill} style={{width: percent + '%'}} />
+              </div>
+            </div>
           </div>
-          <div className={styles.progressBar}>
-            <div className={styles.progressFill} style={{width: percent + '%'}} />
-          </div>
-        </div>
 
-        <ul className={styles.grid}>
-          {games.map((g) => {
-            const best = bestFor(scores, g.id);
-            const isFound = Boolean(scores.games[g.id] && scores.games[g.id].found);
-            return (
-              <li key={g.id} className={isFound ? styles.gridItemFound : styles.gridItem}>
-                <span className={styles.gridHex} aria-hidden="true" />
-                <span className={styles.gridLabel}>{g.label}</span>
-                {best !== null && (
-                  <span className={styles.gridScore}>{formatScore(best, locale)}</span>
-                )}
-              </li>
-            );
-          })}
-        </ul>
+          <div className={styles.roster}>
+            <ul className={styles.grid}>
+              {games.map((g) => {
+                const best = bestFor(scores, g.id);
+                const isFound = Boolean(scores.games[g.id] && scores.games[g.id].found);
+                return (
+                  <li key={g.id} className={isFound ? styles.gridItemFound : styles.gridItem}>
+                    <span className={styles.gridHex} aria-hidden="true" />
+                    <span className={styles.gridLabel}>{g.label}</span>
+                    {best !== null && (
+                      <span className={styles.gridScore}>{formatScore(best, locale)}</span>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
 
-        {grandTotal > 0 && (
-          <p className={styles.total}>
-            <Translate
-              id="preset.gameModal.totalScore"
-              description="Total score line under the games list. {score} is the sum of the player's best score in every game."
-              values={{score: <strong>{formatScore(grandTotal, locale)}</strong>}}>
-              {'Total score {score}'}
-            </Translate>
-          </p>
-        )}
+          <div className={styles.aside}>
+            {grandTotal > 0 && (
+              <p className={styles.total}>
+                <Translate
+                  id="preset.gameModal.totalScore"
+                  description="Total score line under the games list. {score} is the sum of the player's best score in every game."
+                  values={{score: <strong>{formatScore(grandTotal, locale)}</strong>}}>
+                  {'Total score {score}'}
+                </Translate>
+              </p>
+            )}
 
-        <p className={styles.cta}>
-          {/* Two messages picked here rather than one ICU plural.
-              Docusaurus's translate() only substitutes {placeholder};
-              it does not expand plurals, so an ICU string renders to
-              the reader verbatim, braces and all, in every locale. */}
-          {foundCount < total
-            ? (total - foundCount === 1
-                ? translate({
-                    id: 'preset.gameModal.cta.remaining.one',
-                    message: 'One more game hidden somewhere. Keep clicking.',
-                    description: 'CTA on the game-over modal when exactly one mini-game is still hidden.',
-                  })
+            <p className={styles.cta}>
+              {/* Two messages picked here rather than one ICU plural.
+                  Docusaurus's translate() only substitutes {placeholder};
+                  it does not expand plurals, so an ICU string renders to
+                  the reader verbatim, braces and all, in every locale. */}
+              {foundCount < total
+                ? (total - foundCount === 1
+                    ? translate({
+                        id: 'preset.gameModal.cta.remaining.one',
+                        message: 'One more game hidden somewhere. Keep clicking.',
+                        description: 'CTA on the game-over modal when exactly one mini-game is still hidden.',
+                      })
+                    : translate(
+                        {
+                          id: 'preset.gameModal.cta.remaining.other',
+                          message: '{remaining} more games hidden somewhere. Keep clicking.',
+                          description: 'CTA on the game-over modal when several mini-games are still hidden. {remaining} is how many.',
+                        },
+                        {remaining: total - foundCount},
+                      ))
                 : translate(
                     {
-                      id: 'preset.gameModal.cta.remaining.other',
-                      message: '{remaining} more games hidden somewhere. Keep clicking.',
-                      description: 'CTA on the game-over modal when several mini-games are still hidden. {remaining} is how many.',
+                      id: 'preset.gameModal.cta.allFound',
+                      message: 'All {total} found. You read the kit.',
+                      description: 'CTA on the game-over modal when every mini-game has been discovered. {total} is how many games there are.',
                     },
-                    {remaining: total - foundCount},
-                  ))
-            : translate(
-                {
-                  id: 'preset.gameModal.cta.allFound',
-                  message: 'All {total} found. You read the kit.',
-                  description: 'CTA on the game-over modal when every mini-game has been discovered. {total} is how many games there are.',
-                },
-                {total},
-              )}
-        </p>
-
-        {/* Posting a score is the whole competition: there is no
-            leaderboard to submit to, so the share block is where a run
-            turns into something other people can see. */}
-        <div className={styles.share}>
-          <p className={styles.shareHead}>
-            <Translate id="preset.gameModal.share.head" description="Heading above the share buttons on the game-over modal">
-              Post your score
-            </Translate>
-          </p>
-          <p className={styles.shareHint}>
-            <Translate id="preset.gameModal.share.hint" description="Line under the share heading telling the player to attach a screenshot of the modal">
-              Add a screenshot of this card, so people can see the run behind the number.
-            </Translate>
-          </p>
+                    {total},
+                  )}
+            </p>
 
-          <div className={styles.shareButtons}>
-            <button
-              type="button"
-              className={styles.shareBtn}
-              onClick={() => (instance ? shareOnMastodon(instance) : setAskInstance(true))}>
-              <Translate id="preset.gameModal.share.mastodon" description="Share-on-Mastodon button label">Mastodon</Translate>
-            </button>
-            <button type="button" className={styles.shareBtn} onClick={shareOnLinkedIn}>
-              <Translate id="preset.gameModal.share.linkedin" description="Share-on-LinkedIn button label">LinkedIn</Translate>
-            </button>
-            <button type="button" className={styles.shareBtn} onClick={copyShareText}>
-              <Translate id="preset.gameModal.share.copy" description="Copy-the-post-text button label">Copy the post</Translate>
-            </button>
-            <span className={styles.shareStatus} role="status" aria-live="polite">
-              {copied && (
-                <Translate id="preset.gameModal.share.copied" description="Confirmation shown after the post text is copied to the clipboard">
-                  Copied. Paste it with your screenshot.
+            {/* Posting a score is the whole competition: there is no
+                leaderboard to submit to, so the share block is where a run
+                turns into something other people can see. */}
+            <div className={styles.share}>
+              <p className={styles.shareHead}>
+                <Translate id="preset.gameModal.share.head" description="Heading above the share buttons on the game-over modal">
+                  Post your score
                 </Translate>
-              )}
-            </span>
-          </div>
-
-          {askInstance && (
-            /* Mastodon has no central share endpoint, so the post can
-               only be opened on the player's own instance. Asked once,
-               then remembered. */
-            <form
-              className={styles.instanceRow}
-              onSubmit={(e) => { e.preventDefault(); shareOnMastodon(e.target.elements.instance.value); }}>
-              <label className={styles.instanceLabel} htmlFor="gm-instance">
-                <Translate id="preset.gameModal.share.instanceLabel" description="Label for the input asking which Mastodon instance the player is on">
-                  Your Mastodon instance
+              </p>
+              <p className={styles.shareHint}>
+                <Translate id="preset.gameModal.share.hint" description="Line under the share heading telling the player to attach a screenshot of the modal">
+                  Add a screenshot of this card, so people can see the run behind the number.
                 </Translate>
-              </label>
-              <input
-                id="gm-instance"
-                name="instance"
-                className={styles.instanceInput}
-                defaultValue={instance}
-                placeholder="mastodon.nl"
-                autoComplete="off"
-              />
-              <button type="submit" className={styles.shareBtn}>
-                <Translate id="preset.gameModal.share.instanceGo" description="Submit button next to the Mastodon instance input">Open</Translate>
-              </button>
-            </form>
-          )}
+              </p>
 
-          {shareConfig && pickLocale(shareConfig.prize) && (
-            /* The prize sentence stays text and only the rules link is
-               a link: a whole underlined paragraph reads as one long
-               link and hides where it goes. */
-            <p className={styles.prize}>
-              {pickLocale(shareConfig.prize)}
-              {shareConfig.prizeHref && (
-                <>
-                  {' '}
-                  <a href={shareConfig.prizeHref}>
-                    {pickLocale(shareConfig.prizeLinkLabel) || translate({
-                      id: 'preset.gameModal.share.rules',
-                      message: 'Read the rules',
-                      description: 'Link to the giveaway rules, shown after the prize line in the share block',
-                    })}
-                  </a>
-                </>
+              <div className={styles.shareButtons}>
+                <button
+                  type="button"
+                  className={styles.shareBtn}
+                  onClick={() => (instance ? shareOnMastodon(instance) : setAskInstance(true))}>
+                  <Translate id="preset.gameModal.share.mastodon" description="Share-on-Mastodon button label">Mastodon</Translate>
+                </button>
+                <button type="button" className={styles.shareBtn} onClick={shareOnLinkedIn}>
+                  <Translate id="preset.gameModal.share.linkedin" description="Share-on-LinkedIn button label">LinkedIn</Translate>
+                </button>
+                <button type="button" className={styles.shareBtn} onClick={copyShareText}>
+                  <Translate id="preset.gameModal.share.copy" description="Copy-the-post-text button label">Copy the post</Translate>
+                </button>
+                <span className={styles.shareStatus} role="status" aria-live="polite">
+                  {copied && (
+                    <Translate id="preset.gameModal.share.copied" description="Confirmation shown after the post text is copied to the clipboard">
+                      Copied. Paste it with your screenshot.
+                    </Translate>
+                  )}
+                </span>
+              </div>
+
+              {askInstance && (
+                /* Mastodon has no central share endpoint, so the post can
+                   only be opened on the player's own instance. Asked once,
+                   then remembered. */
+                <form
+                  className={styles.instanceRow}
+                  onSubmit={(e) => { e.preventDefault(); shareOnMastodon(e.target.elements.instance.value); }}>
+                  <label className={styles.instanceLabel} htmlFor="gm-instance">
+                    <Translate id="preset.gameModal.share.instanceLabel" description="Label for the input asking which Mastodon instance the player is on">
+                      Your Mastodon instance
+                    </Translate>
+                  </label>
+                  <input
+                    id="gm-instance"
+                    name="instance"
+                    className={styles.instanceInput}
+                    defaultValue={instance}
+                    placeholder="mastodon.nl"
+                    autoComplete="off"
+                  />
+                  <button type="submit" className={styles.shareBtn}>
+                    <Translate id="preset.gameModal.share.instanceGo" description="Submit button next to the Mastodon instance input">Open</Translate>
+                  </button>
+                </form>
               )}
-            </p>
-          )}
+
+              {shareConfig && pickLocale(shareConfig.prize) && (
+                /* The prize sentence stays text and only the rules link is
+                   a link: a whole underlined paragraph reads as one long
+                   link and hides where it goes. */
+                <p className={styles.prize}>
+                  {pickLocale(shareConfig.prize)}
+                  {shareConfig.prizeHref && (
+                    <>
+                      {' '}
+                      <a href={shareConfig.prizeHref}>
+                        {pickLocale(shareConfig.prizeLinkLabel) || translate({
+                          id: 'preset.gameModal.share.rules',
+                          message: 'Read the rules',
+                          description: 'Link to the giveaway rules, shown after the prize line in the share block',
+                        })}
+                      </a>
+                    </>
+                  )}
+                </p>
+              )}
+            </div>
+          </div>
         </div>
 
         <div className={styles.actions}>

package/src/components/GameModal/GameModal.module.css

@@ -1,6 +1,15 @@
 /**
  * <GameModal /> styles. Mirrors preview/components/game-modal.css
  * for the panel + overlay; cobalt-on-white per huisstijl.
+ *
+ * From 880px the card is a wide two-column grid: the headline and how
+ * far you are top left, the total and the share block top right, and
+ * the roster of sixteen games across the bottom in two columns of
+ * eight. In a single
+ * narrow column the roster alone ran past the bottom of the window,
+ * which put the total and the share buttons out of reach on a laptop.
+ * Below 880px it stacks in DOM order, because two columns of 190px are
+ * worse than a long card you can scroll.
  */
 
 .modal {
@@ -23,13 +32,46 @@
 
 .panel {
   position: relative;
-  background: white;
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-body);
   border-radius: var(--radius-xl);
   padding: 40px 36px 32px;
   width: calc(100% - 48px);
   max-width: 520px;
   box-shadow: var(--shadow-3, 0 30px 80px -20px rgba(10, 23, 47, 0.4));
+  /* A short window is still a window. Scrolling the card is worse than
+     fitting and far better than a Play again button nobody can reach. */
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+}
+
+.body {
+  display: grid;
+  gap: 0;
+}
+
+@media (min-width: 880px) {
+  .panel { max-width: 880px; }
+  .body {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-areas:
+      'intro aside'
+      'roster roster';
+    column-gap: 40px;
+  }
+  .intro { grid-area: intro; }
+  .aside { grid-area: aside; }
+  .roster { grid-area: roster; }
+
+  /* Eight and eight rather than sixteen. Multi-column fills downwards,
+     so the list still reads in roster order. */
+  .grid {
+    display: block;
+    columns: 2;
+    column-gap: 32px;
+  }
+  .gridItem,
+  .gridItemFound { break-inside: avoid; }
 }
 
 .close {
@@ -40,15 +82,15 @@
   height: 32px;
   border-radius: 50%;
   border: none;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
   font-size: 20px;
   cursor: pointer;
   line-height: 1;
   font-family: inherit;
   transition: background 120ms ease;
 }
-.close:hover { background: var(--c-cobalt-100); }
+.close:hover { background: var(--conduction-color-surface-sunken); }
 
 .eyebrow {
   font-family: var(--conduction-typography-font-family-code);
@@ -64,13 +106,13 @@
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.02em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0 0 8px;
 }
 
 .subtitle {
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.55;
   margin: 0 0 16px;
 }
@@ -79,19 +121,22 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;
   letter-spacing: 0.04em;
   padding: 6px 12px;
   border-radius: var(--radius-pill);
-  margin-bottom: 24px;
+  margin-bottom: 8px;
 }
 
 .progress {
   margin: 24px 0 16px;
 }
+/* Last thing in the headline column, directly above the roster it
+   counts. Nothing follows it there, so it needs no tail margin. */
+.intro .progress { margin-bottom: 0; }
 .progressLabel {
   display: flex;
   justify-content: space-between;
@@ -99,14 +144,14 @@
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 8px;
 }
-.progressLabel strong { color: var(--c-cobalt-900); font-weight: 700; }
+.progressLabel strong { color: var(--conduction-color-text-strong); font-weight: 700; }
 
 .progressBar {
   height: 6px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: 3px;
   overflow: hidden;
 }
@@ -122,17 +167,18 @@
   margin: 0 0 20px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
 }
 .gridItem,
 .gridItemFound {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 14px;
-  color: var(--c-cobalt-400);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--conduction-color-text-muted);
 }
-.gridItemFound { color: var(--c-cobalt-900); font-weight: 500; }
+.gridItemFound { color: var(--conduction-color-text-strong); font-weight: 500; }
 .gridHex {
   width: 10px;
   height: 12px;
@@ -147,17 +193,17 @@
 .gridScore {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 12px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   font-variant-numeric: tabular-nums;
 }
 
 .total {
-  margin: 12px 0 0;
+  margin: 0;
   font-size: 15px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 .total strong {
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   font-family: var(--conduction-typography-font-family-code);
   font-variant-numeric: tabular-nums;
 }
@@ -169,7 +215,7 @@
 .share {
   margin: 20px 0 0;
   padding: 16px;
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-radius: var(--radius-md);
 }
 
@@ -177,13 +223,13 @@
   margin: 0 0 4px;
   font-weight: 600;
   font-size: 14px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .shareHint {
   margin: 0 0 12px;
   font-size: 13px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
 }
 
 .shareButtons {
@@ -194,8 +240,8 @@
 }
 
 .shareBtn {
-  background: white;
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-body);
   border: 1px solid var(--c-cobalt-200);
   padding: 8px 14px;
   border-radius: var(--radius-pill);
@@ -205,7 +251,7 @@
   font-family: inherit;
   transition: border-color 120ms ease, color 120ms ease;
 }
-.shareBtn:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.shareBtn:hover { border-color: var(--c-blue-cobalt); color: var(--conduction-color-text-default); }
 
 .shareStatus {
   font-size: 12px;
@@ -220,7 +266,7 @@
   gap: 8px;
   margin-top: 12px;
 }
-.instanceLabel { font-size: 12px; color: var(--c-cobalt-700); }
+.instanceLabel { font-size: 12px; color: var(--conduction-color-text-body); }
 .instanceInput {
   flex: 1;
   min-width: 160px;
@@ -229,8 +275,8 @@
   border-radius: var(--radius-md);
   font-family: var(--conduction-typography-font-family-code);
   font-size: 13px;
-  color: var(--c-cobalt-900);
-  background: white;
+  color: var(--conduction-color-text-strong);
+  background: var(--conduction-color-surface-card);
 }
 .instanceInput:focus {
   outline: 2px solid var(--c-blue-cobalt);
@@ -241,14 +287,14 @@
 .prize {
   margin: 12px 0 0;
   font-size: 13px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
-.prize a { color: var(--c-blue-cobalt); }
+.prize a { color: var(--conduction-color-text-default); }
 
 .cta {
   font-size: 13px;
-  color: var(--c-cobalt-400);
-  margin: 16px 0 24px;
+  color: var(--conduction-color-text-muted);
+  margin: 10px 0 0;
   font-style: italic;
 }
 
@@ -256,11 +302,12 @@
   display: flex;
   gap: 8px;
   justify-content: flex-end;
+  margin-top: 20px;
 }
 
 .btnSecondary {
-  background: white;
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-body);
   border: 1px solid var(--c-cobalt-200);
   padding: 10px 18px;
   border-radius: var(--radius-md);
@@ -270,7 +317,7 @@
   font-family: inherit;
   transition: border-color 120ms ease;
 }
-.btnSecondary:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.btnSecondary:hover { border-color: var(--c-blue-cobalt); color: var(--conduction-color-text-default); }
 
 .btnPrimary {
   background: var(--c-blue-cobalt);