bookish-press 0.4.51 → 0.4.52

package/components/editor/TextEditor.svelte

@@ -25,7 +25,7 @@ $: {
         const sizedText = showPlaceholder()
             ? placeholder
             : text.replace(/\s/g, '\u00a0');
-        // Clip the text to prevent this editor from getting too long when editing or when asked to.. If it goes past one line,
+        // Clip the text to prevent this editor from getting too long when editing. If it goes past one line,
         // the measurements and layout are way off.
         const trimmedText = width !== undefined &&
             (clip === true || status === Status.Editing)

package/components/editor/Toolbar.svelte

@@ -238,9 +238,9 @@ function handleKeyPress(event) {
         flex-direction: row;
         flex-wrap: wrap;
         align-items: baseline;
-        background: var(--bookish-background-color);
         font-family: var(--app-font);
         font-size: var(--app-chrome-font-size);
+        row-gap: var(--app-chrome-padding);
     }
 
     .bookish-editor-toolbar:focus {

package/components/editor/URLEditor.svelte

@@ -9,5 +9,7 @@ export let edit;
     text={url}
     label="URL editor"
     valid={(url) => validator(url)}
+    width={20}
+    clip
     save={(url) => edit(url)}
 />

package/components/page/Outline.svelte

@@ -121,24 +121,24 @@ let darkLabel = '\u263E';
     class={'outline ' +
         (!expanded || collapse ? 'outline-collapsed' : 'outline-expanded')}
 >
-    <!-- Visual cue of expandability, only visible in footer mode. -->
-    <div
-        class={'outline-collapse-cue' +
-            (headers.length === 0 ? ' outline-collapse-cue-disabled' : '')}
-        role="button"
-        aria-label={expanded
-            ? 'Collapse navigation menu'
-            : 'Expand navigation menu'}
-        tabIndex="0"
-        on:click={headers.length > 0 ? toggleExpanded : undefined}
-        on:keydown={(event) => {
-            if (event.key === 'Enter' || event.key === ' ') toggleExpanded();
-        }}
-    >
-        {expandLabel}
-    </div>
-    <div class="outline-headers">
-        <!-- Book navigation links -->
+    <div class="outline-top">
+        <!-- Visual cue of expandability, only visible in footer mode. -->
+        <div
+            class={'outline-toggle' +
+                (headers.length === 0 ? ' outline-toggle-disabled' : '')}
+            role="button"
+            aria-label={expanded
+                ? 'Collapse navigation menu'
+                : 'Expand navigation menu'}
+            tabIndex="0"
+            on:click={headers.length > 0 ? toggleExpanded : undefined}
+            on:keydown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ')
+                    toggleExpanded();
+            }}
+        >
+            {expandLabel}
+        </div>
         <div class="outline-header-nav">
             {#if previous !== null}<Link to="{$base}/{previous}"
                     >{previousLabel}</Link
@@ -153,6 +153,26 @@ let darkLabel = '\u263E';
                     >{nextLabel}</span
                 >{/if}
         </div>
+        <!-- Dark mode toggle -->
+        <div
+            class="outline-dark-toggle"
+            role="button"
+            aria-label={$dark === true
+                ? 'Switch to light mode'
+                : 'Switch to dark mode'}
+            tabIndex="0"
+            on:click={toggleReadingMode}
+            on:keydown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    toggleReadingMode();
+                    event.stopPropagation();
+                }
+            }}
+        >
+            {$dark ? darkLabel : lightLabel}
+        </div>
+    </div>
+    <div class="outline-headers">
         <!--  Scan through the headers and add a properly formatted link for each. -->
         {#each headers as header, index}
             <!-- Assumes that all headers have an H1, H2, etc. tag. -->
@@ -173,24 +193,6 @@ let darkLabel = '\u263E';
             {/if}
         {/each}
     </div>
-    <!-- Dark mode toggle -->
-    <div
-        class="outline-reading-mode"
-        role="button"
-        aria-label={$dark === true
-            ? 'Switch to light mode'
-            : 'Switch to dark mode'}
-        tabIndex="0"
-        on:click={toggleReadingMode}
-        on:keydown={(event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                toggleReadingMode();
-                event.stopPropagation();
-            }
-        }}
-    >
-        {$dark ? darkLabel : lightLabel}
-    </div>
 </nav>
 
 <style>
@@ -206,18 +208,10 @@ let darkLabel = '\u263E';
         );
     }
 
-    .outline-header-nav {
-        display: inline-block;
-        width: 100%;
-        padding-bottom: var(--outline-padding);
-    }
-
     .outline-header {
         display: block;
         line-height: var(--bookish-paragraph-line-height-tight);
         text-indent: 0;
-        padding-left: 1rem;
-        padding-right: 1rem;
         margin-bottom: 0.75rem;
     }
 
@@ -264,16 +258,30 @@ let darkLabel = '\u263E';
         color: var(--bookish-paragraph-color);
     }
 
-    .outline-reading-mode {
+    .outline-dark-toggle {
         transition: transform 0.2s ease-in;
     }
 
-    .outline-reading-mode:hover {
+    .outline-dark-toggle:hover {
         cursor: pointer;
         transform: scale(1.25, 1.25);
         color: var(--bookish-paragraph-color);
     }
 
+    .outline-top {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 0.75rem;
+    }
+
+    /* Make a little centered box to store the outline to preserve its left aligned structure, while making it easier to click. */
+    .outline-headers {
+        margin: auto;
+    }
+
     /* Mobile */
     @media screen and (max-width: 1200px) {
         .outline {
@@ -281,7 +289,6 @@ let darkLabel = '\u263E';
             top: 100%; /* Put it all the way off screen on the bottom, then let JS translate */
             left: 0;
             right: 0;
-            width: 100%;
             z-index: 2; /* Put it above content when it's a sheet in the footer */
             border-top: 1px solid var(--bookish-border-color-light);
             text-align: left;
@@ -289,58 +296,38 @@ let darkLabel = '\u263E';
             background-color: var(--bookish-background-color);
             box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.25);
             backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
             /* Cap height at window size. If the content is too tall, scroll it. */
             max-height: 100%;
             overflow-y: scroll;
+            padding: 0.5em;
         }
 
-        /* Make a little centered box to store the outline to preserve its left aligned structure, while making it easier to click. */
-        .outline-headers {
-            width: 20em;
-            margin: auto;
-        }
-
-        .outline-header-nav {
-            text-align: center;
-            padding-top: 0.5em; /* Add some spacing when in the footer */
-            padding-bottom: 0.5em;
-            text-indent: 0 !important; /* Override header default */
-            font-size: 1.25rem !important;
-        }
-
-        .outline-reading-mode {
-            position: absolute;
-            top: 0.5em;
-            left: 0;
+        .outline-dark-toggle {
             font-size: 1em;
             display: inline-block;
-            padding-left: 1em;
-            padding-right: 1em;
         }
 
-        .outline-collapse-cue {
-            position: absolute;
-            top: 0.5em;
-            right: 0;
+        .outline-top {
+            flex-direction: row-reverse;
+        }
+
+        .outline-toggle {
             font-size: 1em;
             display: inline-block;
-            padding-left: 1em;
-            padding-right: 1em;
             transition: transform 0.2s ease-in;
         }
 
-        .outline-collapse-cue:hover {
+        .outline-toggle:hover {
             cursor: pointer;
             transform: scale(1.25, 1.25);
             color: var(--bookish-paragraph-color);
         }
 
-        .outline-collapse-cue-disabled {
+        .outline-toggle-disabled {
             display: none;
         }
 
-        .outline-expanded .outline-collapse-cue {
+        .outline-expanded .outline-toggle {
             transform: rotate(90deg);
         }
 
@@ -351,6 +338,15 @@ let darkLabel = '\u263E';
         .outline.outline-collapsed {
             transform: translateY(-3rem);
         }
+
+        .outline-headers {
+            width: 20em;
+        }
+
+        /* Center on mobile */
+        .outline-header-nav {
+            margin: auto;
+        }
     }
 
     /* Desktop */
@@ -380,14 +376,19 @@ let darkLabel = '\u263E';
             margin-left: var(--outline-offset);
         }
 
-        .outline-collapse-cue {
+        .outline-toggle {
             display: none;
         }
 
-        .outline-reading-mode {
+        .outline-dark-toggle {
             position: absolute;
             top: calc(var(--outline-padding));
             right: calc(var(--outline-padding));
         }
+
+        /* Left align on desktop, since no collapse cue. */
+        .outline-header-nav {
+            margin-right: auto;
+        }
     }
 </style>

package/components/page/Search.svelte

@@ -86,14 +86,12 @@ $: {
             this book:
         </p>
 
-        <p>
-            <TextInput
-                type="text"
-                placeholder={'search for a word'}
-                disabled={false}
-                bind:text={query}
-            />
-        </p>
+        <input
+            class="query"
+            type="text"
+            placeholder="search for a word"
+            bind:value={query}
+        />
 
         {#if query.trim() !== ''}
             {#if query.trim().length < 3}
@@ -131,3 +129,20 @@ $: {
         {/if}
     </Page>
 {/if}
+
+<style>
+    .query {
+        font-family: var(--bookish-header-font-family);
+        font-size: var(--bookish-header-font-size);
+        border: none;
+        border-bottom: 3px solid var(--bookish-border-color-light);
+        padding: var(--bookish-inline-padding);
+        display: inline-block;
+        margin-top: 2em;
+    }
+
+    .query:focus {
+        outline: none;
+        border-color: var(--bookish-highlight-color);
+    }
+</style>

package/models/book/Theme.js

@@ -146,7 +146,7 @@ export const SeriousTheme = {
     // Spacing
     spacing: {
         paragraphLineHeight: '2rem',
-        paragraphLineHeightTight: '1.4em',
+        paragraphLineHeightTight: '1.6em',
         headerLineHeight: '1.3em',
         paragraphSpacing: '1.8rem',
         headerSpacing: '2rem',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bookish-press",
   "private": false,
-  "version": "0.4.51",
+  "version": "0.4.52",
   "type": "module",
   "description": "A platform for reading and writing readable, accessible, beautiful online books.",
   "license": "MIT",