@rathnasgala/theme 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Managed Gala static-site theme payload",
   "license": "MIT",
   "repository": {

package/payload/.gala/managed-files.json

@@ -2,12 +2,16 @@
   "schemaVersion": 1,
   "themePackage": {
     "name": "@rathnasgala/theme",
-    "version": "0.0.18",
+    "version": "0.0.19",
     "availableDesignThemes": [
       "editorial"
     ],
     "securityAdvisories": []
   },
+  "requiredBudgets": {
+    "managedJavaScriptBytes": 65536,
+    "managedCssBytes": 32768
+  },
   "files": {
     ".gala/publish.yml.template": "73080241d89bd09964b797a8bcc8e18471412e11bc873efad76305b60f497d08",
     ".gitignore": "b5fa24e10155097a0d372926fd2e59e6072e7cc2cb6399bbfb4beb8b33ea315b",
@@ -31,7 +35,7 @@
     "src/_data/languages.js": "1358748f7fa2f74406d3295a030827d6229a53e94da72cf712e719d7a356aeac",
     "src/_data/site.js": "d9c001f4cc12a34027dd92303530b11b5402d47613459bb997e22c4bcbea326d",
     "src/_includes/components/ui.njk": "23eb647d8658868449ec6bb809e965a85302124a97639f94d5d28af72df56e4c",
-    "src/_includes/layouts/base.njk": "6914da799eb31fea3fc230ab196252129ccca90f27ccb08bbcee81741a91ced4",
+    "src/_includes/layouts/base.njk": "e73be30738535902599e1c060c11afbd128c86332913114f643dc56dea99fcba",
     "src/_includes/layouts/post.njk": "1accd2832064ad19ee7bf18daf5fa1e60569f32c9b7a547934a6361f747d7eb7",
     "src/assets/embed-codepen.svg": "e9def697f38c466fb2b6652535c4c814e8cbbbefc6e052a69f335aeb27e8356b",
     "src/assets/embed-gist.svg": "fcd9bc2bf29a5c118492b853c0a01390b7539c38ddb985da3c2a6e2f246a39f7",
@@ -39,11 +43,12 @@
     "src/assets/embed-youtube.svg": "10d192f2b14b67664fea88c8cf246321d20190def51d59fad5762e552219b067",
     "src/assets/engagement-comments.js": "b20d9268c9d908b4453a42188eaca25349f25534fb04a9293c9e688a982cd8f8",
     "src/assets/engagement-transport.js": "4f9ca0cd669bf8abc25f2909104e3e4b231657ef97d36a17d06e53454d711786",
+    "src/assets/favicon.svg": "8615e3d96fe37ae9ed14afb1886e7c0e690eef5b10be66ca91cccfd085a74bb6",
     "src/assets/interactions.js": "dd4e343505e528d89596ca67db679b52c989e022f93399193e4377db01fc8a08",
     "src/assets/preferences.js": "789127bee013ed6a1bbf8cefd7b9109291c16220e7a6e09314e3c93c54731d1d",
     "src/assets/search.js": "df425f0239277792ad39f2138bc89cb66cc4ecda5ed59042d46abc2f05372088",
     "src/assets/theme-mode.js": "944b29db11a577961a60ddcfa52f07ef2411f3f3631bea85bd79be16428c08be",
-    "src/assets/theme.css": "2a2367f2c875121cc95bc789a0d5889960813e660ca7722b328b39b4ff5068a8",
+    "src/assets/theme.css": "cdd41ddb670fb8c823b3490efa2a887d11dd6a1931afa0264deee53283b684d3",
     "src/assets/vendor/hooks.js": "ae6ec58592683ca64fa4d65b20d40b103df62a673bcc4712515cf165950b07f3",
     "src/assets/vendor/htm.js": "e4dac9bc40a6f2ec590413d787ae30bbcfdfcde4f28971ee65d9578271b7aad4",
     "src/assets/vendor/preact.js": "712517dd2a42c3c22b5ab0264ad7e9a2b1e8be6cf97fa00dbedd98203617e616",
@@ -58,7 +63,6 @@
     "src/redirects.11ty.js": "3c163246a59f5364861db6a6f05ae88afc938a5379d86cf42776d8d49b0031f3",
     "src/search-index.11ty.js": "700dc2a2be0ef20de3a828a4612fcf7a082691eade29c6e1d75f09c24b6c6024",
     "src/search.njk": "63f2e8aeebb63c90da2e375eece639ce096cad1eff7f28628cafc46faf7ceee6",
-    "src/settings.njk": "9e6babf4d2774687558618c4fbd109ddfc0f479f52ec2e5d00c373c44ad16676",
     "src/sitemap.11ty.js": "4f233e94fb4a913ad5659116518432ed264984a7b622eba3558c77b4ec6435dc",
     "static/robots.txt": "16ceb5ee3e0dc13aa9adf31a3ebbe45a1d965b8c2b9f72eaf84e5911e140ed95"
   },

package/payload/src/_includes/layouts/base.njk

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="{{ '/custom.css' | url }}">
     <script src="{{ '/assets/theme-mode.js' | url }}" defer></script>
     <script src="{{ '/assets/preferences.js' | url }}" defer></script>
+    <link rel="icon" href="{{ '/assets/favicon.svg' | url }}" type="image/svg+xml">
     <script src="{{ '/assets/interactions.js' | url }}" defer></script>
     <script type="module" src="{{ '/assets/engagement-comments.js' | url }}"></script>
     <script src="{{ '/assets/search.js' | url }}" defer></script>
@@ -69,17 +70,12 @@
     <dialog id="gala-settings-dialog" class="gala-dialog" aria-labelledby="gala-settings-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close settings">Close</button></form>
       <h2 id="gala-settings-title">Reader settings</h2>
-      <section aria-labelledby="gala-dialog-theme-setting">
-        <h3 id="gala-dialog-theme-setting">Appearance</h3>
-        <button type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light."><span data-theme-mode-label>Theme: system</span></button>
-      </section>
       <section aria-labelledby="gala-dialog-language-setting">
         <h3 id="gala-dialog-language-setting">Language preference</h3>
         <label>Preferred language
           <select data-language-preference>{% for language in languages %}<option value="{{ language | escape }}">{{ language }}</option>{% endfor %}</select>
         </label>
       </section>
-      <p><a href="{{ '/settings/' | url }}">Open settings page</a></p>
     </dialog>
     <dialog id="gala-search-dialog" class="gala-dialog" aria-labelledby="gala-search-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close search">Close</button></form>
@@ -98,7 +94,7 @@
     {% if site.site.id and site.site.id != "unavailable" %}
     <dialog id="gala-account-dialog" class="gala-dialog gala-account-dialog" aria-labelledby="gala-account-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close account">Close</button></form>
-      <h2 id="gala-account-title">Gala account</h2>
+      <h2 id="gala-account-title" class="gala-visually-hidden">Gala account</h2>
       <iframe data-gala-session-frame title="Gala account and sign in" allow="identity-credentials-get" src="{{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}/v1/widget/session?siteId={{ site.site.id | escape }}"></iframe>
     </dialog>
     {% endif %}

package/payload/src/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#8a4b2a"/><path d="M22 11.5c-1.1-1.3-2.8-2-4.6-2-3.6 0-6.4 2.9-6.4 6.5s2.8 6.5 6.4 6.5c3.2 0 5.6-2 6-5h-5.6" fill="none" stroke="#fdfcfb" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/payload/src/assets/theme.css

@@ -235,13 +235,29 @@ blockquote {
   color: var(--gala-color-muted);
 }
 
+/*
+ * Stays with the reader. It used to scroll away, so on a long post the only way back to the site
+ * — or to sign in — was to scroll to the top. The negative inline margin lets the bar's background
+ * reach the edge of the viewport while its contents stay on the page's own measure.
+ */
 .gala-site-header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--gala-space-md);
   max-inline-size: var(--gala-content-width);
   margin-inline: auto;
-  margin-block-end: 1.5rem;
+  margin-block-end: var(--gala-space-xl);
+  padding-block: var(--gala-space-xs);
+  background: color-mix(in srgb, var(--gala-color-background) 88%, transparent);
+  backdrop-filter: blur(8px);
+  border-block-end: 1px solid var(--gala-color-hairline);
+}
+@supports not (backdrop-filter: blur(8px)) {
+  .gala-site-header { background: var(--gala-color-background); }
 }
 
 .gala-site-header__actions { display: flex; gap: 0.5rem; }
@@ -279,8 +295,16 @@ blockquote {
   box-shadow: var(--gala-shadow-high);
 }
 .gala-dialog::backdrop { background: rgb(0 0 0 / 65%); }
-.gala-dialog__close { float: inline-end; }
-.gala-account-dialog iframe { inline-size: 100%; min-block-size: 22rem; border: 0; }
+/* Sized to what it holds. 22rem was a box for a name and one button, and it showed. */
+.gala-account-dialog { inline-size: min(26rem, calc(100% - 2rem)); }
+.gala-account-dialog iframe {
+  display: block;
+  inline-size: 100%;
+  min-block-size: 7rem;
+  border: 0;
+}
+/* The close control belongs on the same line as the title, not floated above it. */
+.gala-dialog__close { float: inline-end; margin-inline-start: var(--gala-space-md); }
 
 main,
 .gala-page-footer {
@@ -372,12 +396,7 @@ button:focus-visible {
 .gala-search-results h2 { margin-block-start: 0; }
 .gala-toc { padding: 1rem; background: var(--gala-color-surface); }
 .gala-share__fallback { inline-size: min(100%, 36rem); }
-.gala-engagement { min-block-size: var(--gala-widget-min-block-size); }
-.gala-engagement dl { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
-.gala-engagement dl > div { display: grid; gap: 0.25rem; }
-.gala-engagement dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
 .gala-engagement__placeholder { display: grid; min-block-size: var(--gala-widget-min-block-size); align-content: center; margin: 0; }
-.gala-engagement-profile { margin-block: 1.5rem; padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
 .gala-engagement-profile > * { margin-block: 0 0.5rem; }
 .gala-comments { display: grid; gap: 1rem; padding-inline-start: 1.5rem; }
 .gala-comments li { padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
@@ -387,8 +406,6 @@ button:focus-visible {
    reassures rather than sells. Hidden for anyone who opened the account dialog deliberately. */
 .gala-account-dialog__invite { margin-block: 0 1rem; max-inline-size: 34rem; }
 .gala-account-dialog__invite[hidden] { display: none; }
-.gala-reaction-actions,
-.gala-comment-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
 .gala-engagement-actions form,
 [data-comment-editor] { display: grid; gap: 0.5rem; max-inline-size: 42rem; }
 .gala-engagement-actions label { display: grid; gap: 0.5rem; }
@@ -522,3 +539,50 @@ button:focus-visible {
   font-size: var(--gala-text-sm);
 }
 .gala-comments__more { margin-block-start: var(--gala-space-md); }
+
+/* ---------------------------------------------------------------- where the article ends
+   The writing and the conversation about it are different things, and the page has to say so.
+   A footnote used to run straight into the author card with nothing between them. */
+.gala-engagement {
+  /* Space is reserved before the counts arrive, so the page does not jump under the reader. */
+  min-block-size: var(--gala-widget-min-block-size);
+  max-inline-size: var(--gala-content-width);
+  margin-block-start: var(--gala-space-xl);
+  padding-block-start: var(--gala-space-lg);
+  border-block-start: 1px solid var(--gala-color-border);
+}
+.gala-engagement-profile {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gala-space-sm);
+  padding: 0;
+  background: none;
+}
+.gala-engagement-profile h2 { font-size: var(--gala-text-lg); margin: 0; }
+.gala-engagement-profile p { margin: 0; color: var(--gala-color-muted); font-size: var(--gala-text-sm); }
+
+/* Counts read as data, not as three stacked paragraphs. */
+.gala-engagement dl {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gala-space-lg);
+  margin-block: var(--gala-space-md);
+}
+.gala-engagement dl > div { display: flex; flex-direction: column-reverse; gap: 0.1rem; }
+.gala-engagement dt {
+  font-size: var(--gala-text-xs);
+  letter-spacing: var(--gala-tracking-wide);
+  text-transform: uppercase;
+  color: var(--gala-color-muted);
+}
+.gala-engagement dd {
+  margin: 0;
+  font-size: var(--gala-text-lg);
+  font-variant-numeric: tabular-nums;
+}
+
+.gala-reaction-actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2xs); }
+.gala-comment-actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2xs); }
+.gala-engagement-actions { display: grid; gap: var(--gala-space-sm); justify-items: start; }
+.gala-engagement-actions > [data-follow-article] { inline-size: auto; }
+.gala-share { margin-block-start: var(--gala-space-lg); }

package/payload/src/settings.njk

@@ -1,19 +0,0 @@
----
-layout: layouts/base.njk
-title: Settings
-permalink: /settings/index.html
----
-<h1>Reader settings</h1>
-<section aria-labelledby="theme-setting">
-  <h2 id="theme-setting">Theme</h2>
-  <button type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light.">Theme: system</button>
-</section>
-<section aria-labelledby="language-setting">
-  <h2 id="language-setting">Language preference</h2>
-  <p>Your preference highlights matching choices. The language in the page URL always controls the content.</p>
-  <label>Preferred language
-    <select data-language-preference>
-      {% for language in languages %}<option value="{{ language | escape }}">{{ language }}</option>{% endfor %}
-    </select>
-  </label>
-</section>