From 71e93d2eb290e1b736b453213a97265d60d6624d Mon Sep 17 00:00:00 2001 From: Cocoa Date: Fri, 22 Nov 2024 16:50:20 -0500 Subject: [PATCH] Add Matcha CSS and clean up HTML/CSS some --- index.html | 1 + package-lock.json | 4 +- public/matcha.css | 1731 ++++++++++++++++++++++++++++++++++++ public/styles.css | 144 +-- src/html/buttons.html | 14 +- src/html/crop_box.html | 179 ++-- src/html/file.html | 28 +- src/html/flyleaf.html | 14 +- src/html/page_layout.html | 199 +++-- src/html/preview.html | 6 +- src/html/printer.html | 116 ++- src/html/sig_format.html | 419 +++++---- src/html/source_manip.html | 119 +-- src/main.js | 2 +- src/utils/renderUtils.js | 4 +- 15 files changed, 2302 insertions(+), 678 deletions(-) create mode 100644 public/matcha.css diff --git a/index.html b/index.html index f570ac6..7650a4e 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + diff --git a/package-lock.json b/package-lock.json index 0afb3e8..d07cb85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "bookbinder", - "version": "1.5.0", + "version": "1.6.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "bookbinder", - "version": "1.5.0", + "version": "1.6.1", "license": "MPL", "dependencies": { "@cantoo/pdf-lib": "^1.21.0", diff --git a/public/matcha.css b/public/matcha.css new file mode 100644 index 0000000..1fa9517 --- /dev/null +++ b/public/matcha.css @@ -0,0 +1,1731 @@ +/** + * matcha.css — 3.0.0 + * Copyright © 2024 Lecoq Simon (@lowlighter) + * MIT license — https://github.com/lowlighter/matcha + */ +:root { + --ft: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji'; + --ft-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + --ft-size: 1em; + --ly-header-size: 3.5rem; + --ly-aside-size-small: 2.5rem; + --ly-brand: #e6edf3; + --ly-bg-brand: #010409; + --light-default: #1f2328; + --light-subtle: #1f2328; + --light-contrast: #e6edf3; + --light-muted: #656d76; + --light-accent: #8250df; + --light-active: #0969da; + --light-variant: #bf3989; + --light-success: #1a7f37; + --light-attention: #9a6700; + --light-severe: #bc4c00; + --light-danger: #d1242f; + --dark-default: #e6edf3; + --dark-subtle: #e6edf3; + --dark-contrast: #1f2328; + --dark-muted: #848d97; + --dark-accent: #a371f7; + --dark-active: #4493f8; + --dark-variant: #db61a2; + --dark-success: #3fb950; + --dark-attention: #d29922; + --dark-severe: #db6d28; + --dark-danger: #f85149; + --light-bg-default: #ffffff; + --light-bg-subtle: #d0d7de; + --light-bg-contrast: #24292f; + --light-bg-muted: #f6f8fa; + --light-bg-accent: #f9efff; + --light-bg-active: #ddf4ff; + --light-bg-variant: #ffeff7; + --light-bg-success: #dafbe1; + --light-bg-attention: #fff8c5; + --light-bg-severe: #fff1e5; + --light-bg-danger: #ffebe9; + --dark-bg-default: #0d1117; + --dark-bg-subtle: #30363d; + --dark-bg-contrast: #6e7681; + --dark-bg-muted: #161b22; + --dark-bg-accent: #231f39; + --dark-bg-active: #121d2f; + --dark-bg-variant: #221926; + --dark-bg-success: #12261e; + --dark-bg-attention: #272115; + --dark-bg-severe: #221a19; + --dark-bg-danger: #25171c; + --light-backdrop: #8c959f33; + --light-bd-muted: #d0d7deb3; + --dark-bd-muted: #30363db3; + --dark-backdrop: #161b2266; + --bd-radius: 6px; + --tr-duration: 0.2s; + --ct-width: 1024px; +} +:root, +[data-color-scheme='light'] { + --default: var(--light-default); + --subtle: var(--light-subtle); + --contrast: var(--light-contrast); + --muted: var(--light-muted); + --accent: var(--light-accent); + --active: var(--light-active); + --variant: var(--light-variant); + --success: var(--light-success); + --attention: var(--light-attention); + --severe: var(--light-severe); + --danger: var(--light-danger); + --bg-default: var(--light-bg-default); + --bg-subtle: var(--light-bg-subtle); + --bg-contrast: var(--light-bg-contrast); + --bg-muted: var(--light-bg-muted); + --bg-accent: var(--light-bg-accent); + --bg-active: var(--light-bg-active); + --bg-variant: var(--light-bg-variant); + --bg-success: var(--light-bg-success); + --bg-attention: var(--light-bg-attention); + --bg-severe: var(--light-bg-severe); + --bg-danger: var(--light-bg-danger); + --bd-muted: var(--light-bd-muted); + --backdrop: var(--light-backdrop); +} +[data-color-scheme='dark'] { + --default: var(--dark-default); + --subtle: var(--dark-subtle); + --contrast: var(--dark-contrast); + --muted: var(--dark-muted); + --accent: var(--dark-accent); + --active: var(--dark-active); + --variant: var(--dark-variant); + --success: var(--dark-success); + --attention: var(--dark-attention); + --severe: var(--dark-severe); + --danger: var(--dark-danger); + --bg-default: var(--dark-bg-default); + --bg-subtle: var(--dark-bg-subtle); + --bg-contrast: var(--dark-bg-contrast); + --bg-muted: var(--dark-bg-muted); + --bg-accent: var(--dark-bg-accent); + --bg-active: var(--dark-bg-active); + --bg-variant: var(--dark-bg-variant); + --bg-success: var(--dark-bg-success); + --bg-attention: var(--dark-bg-attention); + --bg-severe: var(--dark-bg-severe); + --bg-danger: var(--dark-bg-danger); + --bd-muted: var(--dark-bd-muted); + --backdrop: var(--dark-backdrop); +} +@media (prefers-color-scheme: dark) { + :root:not([data-color-scheme='light']) { + --default: var(--dark-default); + --subtle: var(--dark-subtle); + --contrast: var(--dark-contrast); + --muted: var(--dark-muted); + --accent: var(--dark-accent); + --active: var(--dark-active); + --variant: var(--dark-variant); + --success: var(--dark-success); + --attention: var(--dark-attention); + --severe: var(--dark-severe); + --danger: var(--dark-danger); + --bg-default: var(--dark-bg-default); + --bg-subtle: var(--dark-bg-subtle); + --bg-contrast: var(--dark-bg-contrast); + --bg-muted: var(--dark-bg-muted); + --bg-accent: var(--dark-bg-accent); + --bg-active: var(--dark-bg-active); + --bg-variant: var(--dark-bg-variant); + --bg-success: var(--dark-bg-success); + --bg-attention: var(--dark-bg-attention); + --bg-severe: var(--dark-bg-severe); + --bg-danger: var(--dark-bg-danger); + --bd-muted: var(--dark-bd-muted); + --backdrop: var(--dark-backdrop); + } +} +:root { + --shadow: 0px 0px 0px 1px var(--bg-subtle), 0px 6px 12px -3px var(--backdrop), + 0px 6px 18px 0px var(--backdrop); + --shadow-r: 6px 0px 18px 0px var(--backdrop); + --shadow-l: -6px 0px 18px 0px var(--backdrop); + --light: var(--dark-default); + --dark: var(--light-default); +} + +a { + color: var(--accent); + text-decoration: inherit; +} +a:hover, +summary:hover { + text-decoration: underline; +} +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +a:active:hover, +mark { + color: var(--active); +} + +details { + display: block; + padding: 1rem; + border: 1px solid var(--bd-muted); + border-radius: var(--bd-radius); + margin: 0 0 1rem; +} +summary { + display: list-item; + border-radius: calc(var(--bd-radius) - 1px) calc(var(--bd-radius) - 1px) 0 0; + color: var(--accent); + cursor: pointer; + user-select: none; +} +details[open] > summary { + padding: 1rem; + border-bottom: 1px solid var(--bd-muted); + margin: -1rem -1rem 1rem; + background: var(--bg-muted); +} +summary > :is(h1, h2, h3, h4, h5, h6) { + display: inline; +} +p, +pre { + margin: 0 auto 1rem; +} +p img { + vertical-align: middle; +} +:is(form, label):last-child, +:is(p, pre):last-child { + margin-bottom: 0; +} +blockquote { + padding: 0.25rem 1rem; + border-left: 0.25rem solid var(--bd-muted); + margin: 0 0 1rem; + color: var(--muted); +} +blockquote > cite:last-child { + display: block; + padding-left: 2rem; + margin-top: 0.25rem; + text-decoration: none; +} +blockquote > cite:last-child::before { + content: '— '; +} +figure { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +figcaption { + display: block; + width: 100%; + margin: 1rem 0; + color: var(--muted); + text-align: center; +} +button:is(.default, .accent, .active, .variant, .success, .attention, .severe, .danger), +fieldset:is(.accent, .active, .variant, .success, .attention, .severe, .danger) { + border-color: currentColor; +} +button.default:not(:disabled):active, +button.default:not(:disabled):hover { + background: var(--default); + color: var(--contrast); +} +button.accent:not(:disabled):active, +button.accent:not(:disabled):hover { + background: var(--accent); +} +button.active:not(:disabled):active, +button.active:not(:disabled):hover { + background: var(--active); +} +button.variant:not(:disabled):active, +button.variant:not(:disabled):hover { + background: var(--variant); +} +button.success:not(:disabled):active, +button.success:not(:disabled):hover { + background: var(--success); +} +button.attention:not(:disabled):active, +button.attention:not(:disabled):hover { + background: var(--attention); +} +button.severe:not(:disabled):active, +button.severe:not(:disabled):hover { + background: var(--severe); +} +button.danger:not(:disabled):active, +button.danger:not(:disabled):hover { + background: var(--danger); +} +fieldset.accent { + color: var(--accent); +} +fieldset.active { + color: var(--active); +} +fieldset.variant { + color: var(--variant); +} +fieldset.success { + color: var(--success); +} +fieldset.attention { + color: var(--attention); +} +fieldset.severe { + color: var(--severe); +} +fieldset.danger { + color: var(--danger); +} +fieldset, +form { + border-radius: var(--bd-radius); +} +form { + overflow: auto; + padding: 1rem; + margin: 0 auto 1rem; + background: var(--bg-muted); +} +fieldset { + padding: 0.5rem 1rem; + border: 2px solid var(--bd-muted); + margin-bottom: 1rem; +} +legend { + padding: 0 0.5rem; + font-weight: 600; +} +label { + position: relative; + display: table; + margin: 0 0 1rem; +} +label > small { + color: var(--muted); +} +label > small:first-child::after, +label > small:first-child::before { + content: '\a'; + white-space: pre; +} +label:has(> :is(input, textarea, button)) { + cursor: pointer; +} +label:has(> :is(input, textarea, select, button):disabled) { + color: var(--muted); + cursor: not-allowed; +} +label:has(> :is(input, textarea, select):required)::before { + position: absolute; + left: -0.6rem; + color: var(--danger); + content: '*'; +} +label:has(> textarea) { + display: block; +} +button, +input, +select, +textarea { + display: block; + box-sizing: border-box; + border: 1px solid var(--bd-muted); + border-radius: var(--bd-radius); + margin-top: 0.25rem; + background: var(--bg-default); + color: inherit; + cursor: pointer; + font-family: inherit; + font-size: inherit; + line-height: 1.5; + transition: border-color var(--tr-duration); +} +textarea { + width: calc(100% - 1rem); + padding: 0.5rem; + appearance: none; + cursor: text; + resize: none; +} +input, +textarea { + width: 100%; +} +:is(textarea, select):hover { + border-color: var(--accent); +} +:is(input, textarea, select):disabled { + background-color: var(--bg-muted); + cursor: not-allowed; +} +select { + width: 100%; + padding: 0.35rem 0.5rem; + text-transform: none; +} +input { + appearance: none; +} +input:not(:disabled):hover { + border-color: var(--accent); +} +input:not([type='radio'], [type='checkbox']) { + position: relative; + min-height: 1.5rem; + padding: 0.25rem 0.5rem; +} +input:is([type='radio'], [type='checkbox']), +input[type='checkbox']::before { + display: inline-block; + width: 1rem; + height: 1rem; + margin: 0 0.25rem; + vertical-align: middle; +} +input[type='checkbox'] { + border-radius: 0; +} +input[type='radio'] { + border-width: 2px; + border-radius: 50%; +} +input[type='radio']:checked { + border-width: 0.25rem; + border-color: var(--accent); +} +input[type='checkbox']:checked { + border-color: var(--accent); + background: var(--accent); +} +input[type='checkbox']:checked::before { + position: absolute; + margin: 0; + background: var(--light); + content: ''; + mask: center center/75%no-repeat; + mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=); +} +input:is([type='radio'], [type='checkbox']):disabled { + background-color: var(--bd-muted); +} +input[type='checkbox']:disabled { + border-color: transparent; +} +input[type='range'] { + height: 0.5rem; + border: transparent; + margin: 0.75rem 0; + accent-color: var(--accent); + appearance: auto; + background: var(--bg-subtle); +} +input[type='file']::file-selector-button { + border: 1px solid var(--bd-muted); + border-radius: var(--bd-radius); + background: 0 0; + color: var(--accent); + font: inherit; +} +input[type='file']:hover::file-selector-button { + background: var(--accent); + color: var(--light); +} +button, +input:is([type='submit'], [type='reset'], [type='button'], [type='image']) { + display: inline-block; + padding: 0.25rem 0.75rem; + margin: 0.25rem 0.125rem; + background: 0 0; + color: var(--accent); + text-transform: none; + transition: + background var(--tr-duration), + color var(--tr-duration), + filter var(--tr-duration); +} +input:is([type='image'], [type='file'], [type='color']) { + padding: 0.25rem; +} +:is(button, input:is([type='submit'], [type='reset'], [type='button'], [type='image'])):disabled { + cursor: not-allowed; + opacity: 0.5; +} +:is(button, input)[type='reset'] { + color: var(--danger); +} +:is(button, input:is([type='submit'], [type='reset'], [type='button'], [type='image'])):not( + :disabled + ):active { + filter: brightness(80%); +} +button[type]:not([type='button']), +input:is([type='submit'], [type='reset']) { + border-color: currentColor; +} +:where(button, input:is([type='submit'], [type='reset'], [type='button'], [type='image'])):not( + :disabled + ):active, +:where(button, input:is([type='submit'], [type='reset'], [type='button'], [type='image'])):not( + :disabled + ):hover { + border-color: transparent; + background: var(--accent); + color: var(--light); +} +:is(button, input)[type='reset']:not(:disabled):active, +:is(button, input)[type='reset']:not(:disabled):hover { + border-color: transparent; + background: var(--danger); + color: var(--light); +} +hgroup { + padding: 0.25rem 0.5rem; + border-left: 0.25rem solid currentColor; + margin: 0 0 1rem; +} +hgroup > :is(h1, h2, h3, h4, h5, h6)[id] > a:hover::before { + right: calc(100% + 1.25rem); +} +h1, +h2, +h3, +h4, +h5, +h6 { + border-bottom: 1px solid transparent; + margin: 0 0 1rem; + line-height: 1.25; +} +:not(:is(dialog, article, body) > header:first-child) > :is(h1, h2) { + border-color: var(--bd-muted); +} +:not(hgroup, blockquote, header) > :is(h1, h2, h3, h4, h5, h6):first-child { + margin-top: 1.5rem; +} +:is(h1, h2, h3, h4, h5, h6):last-child { + margin-bottom: 0; +} +h1 { + font-size: 2rem; +} +h2 { + font-size: 1.5rem; +} +h3 { + font-size: 1.25rem; +} +h4 { + font-size: 1rem; +} +h5 { + font-size: 0.875rem; +} +h6 { + color: var(--muted); + font-size: 0.85rem; +} +:is(h1, h2, h3, h4, h5, h6)[id] > a { + position: relative; + color: inherit; +} +:is(h1, h2, h3, h4, h5, h6)[id] > a:hover { + text-decoration: none; +} +:is(h1, h2, h3, h4, h5, h6)[id] > a:hover::before { + position: absolute; + top: 0.125rem; + right: calc(100% + 0.25rem); + color: var(--muted); + content: '#'; +} +:is(h1, h2, h3, h4, h5, h6)[id]:has(> a:hover) { + border-color: currentColor; +} +dl, +ol, +ul { + padding-left: 2rem; + margin: 0 0 1rem; +} +li > :is(ul, ol, dl) { + margin: 0; +} +dl, +dt { + padding: 0; +} +dt { + margin: 1rem 0 0; + font-weight: 600; +} +dd { + padding: 0 1rem; + margin: 0 0 1rem; +} +iframe, +img, +video { + max-width: 100%; + border-radius: var(--bd-radius); + margin: auto; +} +iframe { + width: 100%; + border: 0; +} +body { + max-width: var(--ct-width); + padding: 0 1.5rem; + margin: 0 auto; + font-family: var(--ft); + font-size: var(--ft-size); + line-height: 1.5; +} +[data-color-scheme], +body { + background: var(--bg-default); + color: var(--default); +} +header, +main { + margin: 0 0 1rem; +} +body > footer:last-child, +body > header:first-child { + margin-right: -1.5rem; + margin-left: -1.5rem; +} +footer { + text-align: right; +} +section { + max-width: var(--ct-width); + margin: 0 auto 2rem; +} +hr { + overflow: visible; + height: 0.25em; + box-sizing: content-box; + padding: 0; + border: 0; + margin: 1.5em 0; + background: var(--bd-muted); +} +b, +strong { + font-weight: 700; +} +cite, +dfn, +em, +i, +q, +strong { + font-style: italic; +} +q::before { + content: '« '; +} +q::after { + content: ' »'; +} +dfn, +em { + font-weight: 600; +} +cite, +u { + text-decoration: underline; +} +u > u { + text-decoration: underline double; +} +s { + text-decoration: line-through; +} +s > s { + text-decoration: line-through double; +} +small { + font-size: 85%; +} +table { + display: block; + max-width: 100%; + margin: 0 auto 1rem; + border-collapse: collapse; + border-spacing: 0; + inline-size: fit-content; + overflow-x: auto; +} +.table-responsive { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + overflow-x: auto; +} +.table-responsive table { + display: table; +} +caption { + margin-top: 0.5rem; + caption-side: bottom; + color: var(--muted); +} +tbody > tr:nth-child(2n) { + background: var(--bg-muted); +} +td, +th { + padding: 0.375rem 0.8125rem; + border: 1px solid var(--bd-muted); +} +th { + border-color: var(--bg-contrast); + background: var(--bg-subtle); + font-weight: 700; +} +table.center td, +th { + text-align: center; +} +abbr, +button, +code, +dd, +dt, +figcaption, +h1, +h2, +h3, +h4, +h5, +h6, +legend, +li, +p, +var { + hyphens: auto; + word-break: break-word; +} +.flash { + padding: 1rem; + border: 1px solid transparent; + margin: 1rem 0; +} +.default, +.flash { + color: var(--default); +} +.muted { + color: var(--muted); +} +.accent { + color: var(--accent); +} +.active { + color: var(--active); +} +.variant { + color: var(--variant); +} +.success { + color: var(--success); +} +.attention { + color: var(--attention); +} +.severe { + color: var(--severe); +} +.danger { + color: var(--danger); +} +.bg-default, +.flash.default { + background-color: var(--bg-default); +} +.bg-muted, +.flash.muted { + background-color: var(--bg-muted); +} +.bg-accent, +.flash.accent { + background-color: var(--bg-accent); +} +.bg-active, +.flash.active { + background-color: var(--bg-active); +} +.bg-variant, +.flash.variant { + background-color: var(--bg-variant); +} +.bg-success, +.flash.success { + background-color: var(--bg-success); +} +.bg-attention, +.flash.attention { + background-color: var(--bg-attention); +} +.bg-severe, +.flash.severe { + background-color: var(--bg-severe); +} +.bg-danger, +.flash.danger { + background-color: var(--bg-danger); +} +.fg-accent, +.fg-active, +.fg-attention, +.fg-danger, +.fg-muted, +.fg-severe, +.fg-success, +.fg-variant { + color: var(--light); +} +.fg-default { + background-color: var(--default); + color: var(--contrast); +} +.fg-muted { + background-color: var(--muted); +} +.fg-accent { + background-color: var(--accent); +} +.fg-active { + background-color: var(--active); +} +.fg-variant { + background-color: var(--variant); +} +.fg-success { + background-color: var(--success); +} +.fg-attention { + background-color: var(--attention); +} +.fg-severe { + background-color: var(--severe); +} +.fg-danger { + background-color: var(--danger); +} +.flash, +.rounded { + border-radius: var(--bd-radius); +} +.bd-accent, +.bd-active, +.bd-attention, +.bd-danger, +.bd-default, +.bd-muted, +.bd-severe, +.bd-success, +.bd-variant { + border: 1px solid var(--default); +} +.bd-default, +.flash.default { + border-color: var(--default); +} +.bd-muted, +.flash.muted { + border-color: var(--muted); +} +.bd-accent, +.flash.accent { + border-color: var(--accent); +} +.bd-active, +.flash.active { + border-color: var(--active); +} +.bd-variant, +.flash.variant { + border-color: var(--variant); +} +.bd-success, +.flash.success { + border-color: var(--success); +} +.bd-attention, +.flash.attention { + border-color: var(--attention); +} +.bd-severe, +.flash.severe { + border-color: var(--severe); +} +.bd-danger, +.flash.danger { + border-color: var(--danger); +} +.bold { + font-weight: 700; +} +.semibold { + font-weight: 600; +} +.italic { + font-style: italic; +} +.underline { + text-decoration: underline; +} +.strikethrough { + text-decoration: line-through; +} +.uppercase { + text-transform: uppercase; +} +.lowercase { + text-transform: lowercase; +} +.capitalize { + text-transform: capitalize; +} +.centered { + text-align: center; +} +.justified { + text-align: justify; +} +.monospace { + font-family: var(--mono); +} +.smaller { + font-size: 0.85rem; +} +.small { + font-size: 0.875rem; +} +.normal { + font-size: 1rem; +} +.large { + font-size: 1.25rem; +} +.larger { + font-size: 1.5rem; +} +.relative { + position: relative; +} +.fixed { + position: fixed; +} +.absolute { + position: absolute; +} +.sticky { + position: sticky; +} +.hidden { + display: none; +} +.inline { + display: inline; +} +.block { + display: block; +} +.block.inline { + display: inline-block; +} +.flex { + display: flex; +} +.flex.inline { + display: inline-flex; +} +.contents { + display: contents; +} +.flex.row { + flex-direction: row; +} +.flex.column { + flex-direction: column; +} +.flex.row.reverse { + flex-direction: row-reverse; +} +.flex.column.reverse { + flex-direction: column-reverse; +} +.flex.wrap { + flex-wrap: wrap; +} +.flex.wrap.reverse { + flex-wrap: wrap-reverse; +} +.flex.no-wrap { + flex-wrap: nowrap; +} +.flex.start { + justify-content: flex-start; +} +.flex.end { + justify-content: flex-end; +} +.flex.center { + justify-content: center; +} +.flex.space-between { + justify-content: space-between; +} +.flex.space-around { + justify-content: space-around; +} +.flex.space-evenly { + justify-content: space-evenly; +} +.flex.stretch { + justify-content: stretch; +} +.flex.align-start { + align-items: flex-start; +} +.flex.align-end { + align-items: flex-end; +} +.flex.align-center { + align-items: center; +} +.flex.align-stretch { + align-items: stretch; +} +.grow { + flex-grow: 1; +} +.shrink { + flex-shrink: 1; +} +.overflow { + overflow: auto; +} +.overflow-x { + overflow-x: auto; +} +.overflow-y { + overflow-y: auto; +} +.no-overflow { + overflow: hidden; +} +.pointer { + cursor: pointer; +} +.wait { + cursor: wait; +} +.not-allowed { + cursor: not-allowed; +} +.no-select { + user-select: none; +} +.select-all { + user-select: all; +} +.events { + pointer-events: auto; +} +.no-events { + pointer-events: none; +} +.width { + width: 100%; +} +.height { + height: 100%; +} +.border-box { + box-sizing: border-box; +} +.content-box { + box-sizing: content-box; +} +.resize { + resize: both; +} +.resize-x { + resize: horizontal; +} +.resize-y { + resize: vertical; +} +.no-resize { + resize: none; +} +svg.fill-current { + fill: currentColor; +} +svg.no-fill { + fill: none; +} +svg.stroke-current { + stroke: currentColor; +} +svg.no-stroke { + stroke: none; +} +.shadow { + box-shadow: var(--shadow); +} +.no-shadow { + box-shadow: none; +} +.m-0 { + margin: 0; +} +.m-\.125 { + margin: 0.125rem; +} +.m-\.25 { + margin: 0.25rem; +} +.m-\.5 { + margin: 0.5rem; +} +.m-\.75 { + margin: 0.75rem; +} +.m-1 { + margin: 1rem; +} +.m-1\.25 { + margin: 1.25rem; +} +.m-1\.5 { + margin: 1.5rem; +} +.m-1\.75 { + margin: 1.75rem; +} +.m-2 { + margin: 2rem; +} +.m-3 { + margin: 3rem; +} +.m-4 { + margin: 4rem; +} +.mx-0 { + margin-right: 0; + margin-left: 0; +} +.mx-\.125 { + margin-right: 0.125rem; + margin-left: 0.125rem; +} +.mx-\.25 { + margin-right: 0.25rem; + margin-left: 0.25rem; +} +.mx-\.5 { + margin-right: 0.5rem; + margin-left: 0.5rem; +} +.mx-\.75 { + margin-right: 0.75rem; + margin-left: 0.75rem; +} +.mx-1 { + margin-right: 1rem; + margin-left: 1rem; +} +.mx-1\.25 { + margin-right: 1.25rem; + margin-left: 1.25rem; +} +.mx-1\.5 { + margin-right: 1.5rem; + margin-left: 1.5rem; +} +.mx-1\.75 { + margin-right: 1.75rem; + margin-left: 1.75rem; +} +.mx-2 { + margin-right: 2rem; + margin-left: 2rem; +} +.mx-3 { + margin-right: 3rem; + margin-left: 3rem; +} +.mx-4 { + margin-right: 4rem; + margin-left: 4rem; +} +.my-0 { + margin-top: 0; + margin-bottom: 0; +} +.my-\.125 { + margin-top: 0.125rem; + margin-bottom: 0.125rem; +} +.my-\.25 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} +.my-\.5 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.my-\.75 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} +.my-1 { + margin-top: 1rem; + margin-bottom: 1rem; +} +.my-1\.25 { + margin-top: 1.25rem; + margin-bottom: 1.25rem; +} +.my-1\.5 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} +.my-1\.75 { + margin-top: 1.75rem; + margin-bottom: 1.75rem; +} +.my-2 { + margin-top: 2rem; + margin-bottom: 2rem; +} +.my-3 { + margin-top: 3rem; + margin-bottom: 3rem; +} +.my-4 { + margin-top: 4rem; + margin-bottom: 4rem; +} +.mt-0 { + margin-top: 0; +} +.mt-\.125 { + margin-top: 0.125rem; +} +.mt-\.25 { + margin-top: 0.25rem; +} +.mt-\.5 { + margin-top: 0.5rem; +} +.mt-\.75 { + margin-top: 0.75rem; +} +.mt-1 { + margin-top: 1rem; +} +.mt-1\.25 { + margin-top: 1.25rem; +} +.mt-1\.5 { + margin-top: 1.5rem; +} +.mt-1\.75 { + margin-top: 1.75rem; +} +.mt-2 { + margin-top: 2rem; +} +.mt-3 { + margin-top: 3rem; +} +.mt-4 { + margin-top: 4rem; +} +.mr-0 { + margin-right: 0; +} +.mr-\.125 { + margin-right: 0.125rem; +} +.mr-\.25 { + margin-right: 0.25rem; +} +.mr-\.5 { + margin-right: 0.5rem; +} +.mr-\.75 { + margin-right: 0.75rem; +} +.mr-1 { + margin-right: 1rem; +} +.mr-1\.25 { + margin-right: 1.25rem; +} +.mr-1\.5 { + margin-right: 1.5rem; +} +.mr-1\.75 { + margin-right: 1.75rem; +} +.mr-2 { + margin-right: 2rem; +} +.mr-3 { + margin-right: 3rem; +} +.mr-4 { + margin-right: 4rem; +} +.mb-0 { + margin-bottom: 0; +} +.mb-\.125 { + margin-bottom: 0.125rem; +} +.mb-\.25 { + margin-bottom: 0.25rem; +} +.mb-\.5 { + margin-bottom: 0.5rem; +} +.mb-\.75 { + margin-bottom: 0.75rem; +} +.mb-1 { + margin-bottom: 1rem; +} +.mb-1\.25 { + margin-bottom: 1.25rem; +} +.mb-1\.5 { + margin-bottom: 1.5rem; +} +.mb-1\.75 { + margin-bottom: 1.75rem; +} +.mb-2 { + margin-bottom: 2rem; +} +.mb-3 { + margin-bottom: 3rem; +} +.mb-4 { + margin-bottom: 4rem; +} +.ml-0 { + margin-left: 0; +} +.ml-\.125 { + margin-left: 0.125rem; +} +.ml-\.25 { + margin-left: 0.25rem; +} +.ml-\.5 { + margin-left: 0.5rem; +} +.ml-\.75 { + margin-left: 0.75rem; +} +.ml-1 { + margin-left: 1rem; +} +.ml-1\.25 { + margin-left: 1.25rem; +} +.ml-1\.5 { + margin-left: 1.5rem; +} +.ml-1\.75 { + margin-left: 1.75rem; +} +.ml-2 { + margin-left: 2rem; +} +.ml-3 { + margin-left: 3rem; +} +.ml-4 { + margin-left: 4rem; +} +.p-0 { + padding: 0; +} +.p-\.125 { + padding: 0.125rem; +} +.p-\.25 { + padding: 0.25rem; +} +.p-\.5 { + padding: 0.5rem; +} +.p-\.75 { + padding: 0.75rem; +} +.p-1 { + padding: 1rem; +} +.p-1\.25 { + padding: 1.25rem; +} +.p-1\.5 { + padding: 1.5rem; +} +.p-1\.75 { + padding: 1.75rem; +} +.p-2 { + padding: 2rem; +} +.p-3 { + padding: 3rem; +} +.p-4 { + padding: 4rem; +} +.px-0 { + padding-right: 0; + padding-left: 0; +} +.px-\.125 { + padding-right: 0.125rem; + padding-left: 0.125rem; +} +.px-\.25 { + padding-right: 0.25rem; + padding-left: 0.25rem; +} +.px-\.5 { + padding-right: 0.5rem; + padding-left: 0.5rem; +} +.px-\.75 { + padding-right: 0.75rem; + padding-left: 0.75rem; +} +.px-1 { + padding-right: 1rem; + padding-left: 1rem; +} +.px-1\.25 { + padding-right: 1.25rem; + padding-left: 1.25rem; +} +.px-1\.5 { + padding-right: 1.5rem; + padding-left: 1.5rem; +} +.px-1\.75 { + padding-right: 1.75rem; + padding-left: 1.75rem; +} +.px-2 { + padding-right: 2rem; + padding-left: 2rem; +} +.px-3 { + padding-right: 3rem; + padding-left: 3rem; +} +.px-4 { + padding-right: 4rem; + padding-left: 4rem; +} +.py-0 { + padding-top: 0; + padding-bottom: 0; +} +.py-\.125 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} +.py-\.25 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} +.py-\.5 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.py-\.75 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} +.py-1 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.py-1\.25 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} +.py-1\.5 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} +.py-1\.75 { + padding-top: 1.75rem; + padding-bottom: 1.75rem; +} +.py-2 { + padding-top: 2rem; + padding-bottom: 2rem; +} +.py-3 { + padding-top: 3rem; + padding-bottom: 3rem; +} +.py-4 { + padding-top: 4rem; + padding-bottom: 4rem; +} +.pt-0 { + padding-top: 0; +} +.pt-\.125 { + padding-top: 0.125rem; +} +.pt-\.25 { + padding-top: 0.25rem; +} +.pt-\.5 { + padding-top: 0.5rem; +} +.pt-\.75 { + padding-top: 0.75rem; +} +.pt-1 { + padding-top: 1rem; +} +.pt-1\.25 { + padding-top: 1.25rem; +} +.pt-1\.5 { + padding-top: 1.5rem; +} +.pt-1\.75 { + padding-top: 1.75rem; +} +.pt-2 { + padding-top: 2rem; +} +.pt-3 { + padding-top: 3rem; +} +.pt-4 { + padding-top: 4rem; +} +.pr-0 { + padding-right: 0; +} +.pr-\.125 { + padding-right: 0.125rem; +} +.pr-\.25 { + padding-right: 0.25rem; +} +.pr-\.5 { + padding-right: 0.5rem; +} +.pr-\.75 { + padding-right: 0.75rem; +} +.pr-1 { + padding-right: 1rem; +} +.pr-1\.25 { + padding-right: 1.25rem; +} +.pr-1\.5 { + padding-right: 1.5rem; +} +.pr-1\.75 { + padding-right: 1.75rem; +} +.pr-2 { + padding-right: 2rem; +} +.pr-3 { + padding-right: 3rem; +} +.pr-4 { + padding-right: 4rem; +} +.pb-0 { + padding-bottom: 0; +} +.pb-\.125 { + padding-bottom: 0.125rem; +} +.pb-\.25 { + padding-bottom: 0.25rem; +} +.pb-\.5 { + padding-bottom: 0.5rem; +} +.pb-\.75 { + padding-bottom: 0.75rem; +} +.pb-1 { + padding-bottom: 1rem; +} +.pb-1\.25 { + padding-bottom: 1.25rem; +} +.pb-1\.5 { + padding-bottom: 1.5rem; +} +.pb-1\.75 { + padding-bottom: 1.75rem; +} +.pb-2 { + padding-bottom: 2rem; +} +.pb-3 { + padding-bottom: 3rem; +} +.pb-4 { + padding-bottom: 4rem; +} +.pl-0 { + padding-left: 0; +} +.pl-\.125 { + padding-left: 0.125rem; +} +.pl-\.25 { + padding-left: 0.25rem; +} +.pl-\.5 { + padding-left: 0.5rem; +} +.pl-\.75 { + padding-left: 0.75rem; +} +.pl-1 { + padding-left: 1rem; +} +.pl-1\.25 { + padding-left: 1.25rem; +} +.pl-1\.5 { + padding-left: 1.5rem; +} +.pl-1\.75 { + padding-left: 1.75rem; +} +.pl-2 { + padding-left: 2rem; +} +.pl-3 { + padding-left: 3rem; +} +.pl-4 { + padding-left: 4rem; +} +.spacing-x-0 > * + * { + margin-left: 0; +} +.spacing-x-\.125 > * + * { + margin-left: 0.125rem; +} +.spacing-x-\.25 > * + * { + margin-left: 0.25rem; +} +.spacing-x-\.5 > * + * { + margin-left: 0.5rem; +} +.spacing-x-\.75 > * + * { + margin-left: 0.75rem; +} +.spacing-x-1 > * + * { + margin-left: 1rem; +} +.spacing-x-1\.25 > * + * { + margin-left: 1.25rem; +} +.spacing-x-1\.5 > * + * { + margin-left: 1.5rem; +} +.spacing-x-1\.75 > * + * { + margin-left: 1.75rem; +} +.spacing-x-2 > * + * { + margin-left: 2rem; +} +.spacing-x-3 > * + * { + margin-left: 3rem; +} +.spacing-x-4 > * + * { + margin-left: 4rem; +} +.spacing-y-0 > * + * { + margin-top: 0; +} +.spacing-y-\.125 > * + * { + margin-top: 0.125rem; +} +.spacing-y-\.25 > * + * { + margin-top: 0.25rem; +} +.spacing-y-\.5 > * + * { + margin-top: 0.5rem; +} +.spacing-y-\.75 > * + * { + margin-top: 0.75rem; +} +.spacing-y-1 > * + * { + margin-top: 1rem; +} +.spacing-y-1\.25 > * + * { + margin-top: 1.25rem; +} +.spacing-y-1\.5 > * + * { + margin-top: 1.5rem; +} +.spacing-y-1\.75 > * + * { + margin-top: 1.75rem; +} +.spacing-y-2 > * + * { + margin-top: 2rem; +} +.spacing-y-3 > * + * { + margin-top: 3rem; +} +.spacing-y-4 > * + * { + margin-top: 4rem; +} diff --git a/public/styles.css b/public/styles.css index 6873022..f826306 100644 --- a/public/styles.css +++ b/public/styles.css @@ -4,117 +4,36 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -* { - --background: #e6e6e5; - --text: #292929; - --disabled-text: gray; - --link: #1616ad; - - box-sizing: border-box; -} - -@media (prefers-color-scheme: dark) { - * { - --background: #292929; - --text: #e6e6e5; - --disabled-text: rgba(211, 211, 211, 0.5); - --link: skyblue; - } -} - -body { - font-family: Helvetica, Arial, sans-serif; - background-color: var(--background); - color: var(--text); -} - -a:link, -a:visited { - color: var(--link); -} - -*:disabled { - color: var(--disabled-text); -} - -h1, -h2 { - margin-top: 0; -} - -body, -.wrapper, -#bookbinder { - display: flex; - flex-direction: column; - align-items: center; -} - -button { - border: none; - border-radius: 2px; - padding: 4px; - text-align: center; - display: inline-block; - font-size: 16px; -} - -.large_btn { - height: 48px; - font-size: 24px; -} - -.medium_btn { - width: 90px; - height: 36px; - font-size: 12px; -} - -.wrapper { - max-width: 500px; +input.inline, +textarea.inline, +select.inline { + width: auto; } -.section { - border: 1px solid var(--text); - padding: 0.5em; - margin: 0.5em auto; - width: 100%; +input.inline[type='number'] { + width: 4em; } -.row { +.layout_margin_user_input label { + text-align: right; display: block; } -.hidden { - display: none; +section label { + margin: 0; + line-height: 2.25rem; } -.instruction-indent { - margin-left: 25px; -} - -.layout_margin_user_input { - width: 225px; - margin-top: 15px; - margin-bottom: 15px; - text-align: right; -} -.layout_margin_user_input_field { - width: 4em; - margin-left: 10px; -} -.layout_margin_description { - width: 225px; - position: absolute; - margin-left: 250px; - font-size: smaller; +#sig_format img { + width: 100%; + height: 100%; + object-fit: contain; } #show_layout_info { display: none; - margin-left: 10px; - margin-bottom: 20px; } + .layout_spine_label { transform: rotate(-90deg); position: absolute; @@ -126,30 +45,23 @@ button { font-family: monospace; letter-spacing: 14px; } -.grid_layout_page { +#grid_layout_preview { border: 1px solid purple; width: 250px; height: 250px; margin-left: 0px; - background: #80008063; pointer-events: none; } -.pdf_layout_page { +#pdf_on_page_layout_preview { border: 1px solid orange; width: 150px; height: 24px; position: absolute; margin: 0px; padding: 0px; - background: #ffa50042; pointer-events: none; } -.layout_margin_info { - position: absolute; - padding-left: 255px; - width: 480px; - font-size: small; -} + .stripes_paper { background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); } @@ -163,22 +75,12 @@ button { ); } .stripes_sample_box { - width: 20px; - height: 20px; + width: 1rem; + height: 1rem; display: inline-block; } -.pdf_offset_dimensions_box { - padding-left: 10px; +#pdf_offset_dimensions { + padding-left: 0.5rem; display: inline-block; vertical-align: top; } - -.float_left { - float: left; -} - -.space_out { - display: flex; - width: 100%; - justify-content: space-between; -} diff --git a/src/html/buttons.html b/src/html/buttons.html index 90bcb8d..c7f2b64 100644 --- a/src/html/buttons.html +++ b/src/html/buttons.html @@ -1,27 +1,27 @@ -
+
- diff --git a/src/html/crop_box.html b/src/html/crop_box.html index d99ae60..6b488af 100644 --- a/src/html/crop_box.html +++ b/src/html/crop_box.html @@ -1,99 +1,94 @@ -
+

PDF Markup

- (does not currently work with Wacky Small Layouts -- soon!)
- - - +

(does not currently work with Wacky Small Layouts -- soon!)

+ + + + + - +
+ Detailed settings for sewing - - -
+ sewing image - use tape width of 0pt to make a single dot (overlapping marks) + + diff --git a/src/html/file.html b/src/html/file.html index d6fe792..0153a4d 100644 --- a/src/html/file.html +++ b/src/html/file.html @@ -1,21 +1,21 @@ -
-

File Info

- +
+

File Info

+ - While some PDF viewers display the first two pages as a spread, be aware the first page, which +

+ While some PDF viewers display the first two pages as a spread, be aware the first page, which is odd, will be on the right when printed. The first printed spread are pages 2 & 3 of your PDF - document. Evens always on the left, odds always on the right. - - - -

+ + diff --git a/src/html/flyleaf.html b/src/html/flyleaf.html index 9d20074..38032a6 100644 --- a/src/html/flyleaf.html +++ b/src/html/flyleaf.html @@ -1,12 +1,12 @@ -
-

Flyleafs

- - +
+

Flyleafs

+
+ > + diff --git a/src/html/page_layout.html b/src/html/page_layout.html index dd510eb..fed3094 100644 --- a/src/html/page_layout.html +++ b/src/html/page_layout.html @@ -1,120 +1,129 @@ -
-

Page Layout

- - - -
- Folding instructions for quarto/octavo -

- Folding these two layouts is slightly more complex than the simple single-fold folio. Both - of these have been designed so that the first fold is parallel to the short edge of the - paper - eg, if you hold the page in portrait orientation, you will be folding the top edge - to the bottom. One side of the page will have consecutive numbers across this fold (ie, 3 - and 30 on the top row, 2 and 31). Fold inward across this line (so that 3 has been folded to - lay against 2, and 30 against 31). The next fold is along the other paper axis (parallel to - the original long edge). For quarto, you want to find the side with the numbers closest - together, and fold inwards to match them (this will be consecutive on the innermost sheet). - For octavo, look at the bottom-most row and find the consecutive pair, then fold inward. - Octavo has one last fold, for which you want to find the pair remaning that are closest, and - fold them together. -

-

- Or, if you want to just memorize the order, once you find the first fold side, the order - is:
- quarto - top to bottom, fold points away from you, left to right, fold points towards - you.
- octavo - top to bottom, fold points away from you, left to right, fold points away - from you, top to bottom, fold points towards you. -

-
+
+

Page Layout

+ +
+ Folding instructions for quarto/octavo +

+ Folding these two layouts is slightly more complex than the simple single-fold folio. Both of + these have been designed so that the first fold is parallel to the short edge of the paper - + eg, if you hold the page in portrait orientation, you will be folding the top edge to the + bottom. One side of the page will have consecutive numbers across this fold (ie, 3 and 30 on + the top row, 2 and 31). Fold inward across this line (so that 3 has been folded to lay against + 2, and 30 against 31). The next fold is along the other paper axis (parallel to the original + long edge). For quarto, you want to find the side with the numbers closest together, and fold + inwards to match them (this will be consecutive on the innermost sheet). For octavo, look at + the bottom-most row and find the consecutive pair, then fold inward. Octavo has one last fold, + for which you want to find the pair remaning that are closest, and fold them together. +

+

+ Or, if you want to just memorize the order, once you find the first fold side, the order + is:
+ quarto - top to bottom, fold points away from you, left to right, fold points towards + you.
+ octavo - top to bottom, fold points away from you, left to right, fold points away from + you, top to bottom, fold points towards you. +

+
- - - - + - - - - - -
+ + + +
+ + + + +
+
White Space Manipulation. All values are in points, relative to original document.

1 point = 1/72 inch
-
- Fore-Edge Margin: - pt
- Binding Margin: - pt
- Top Margin: - pt
- Bottom Margin: - pt
-
- -
spine
-
+ +
+
spine
+
+
+
+
+
Paper/Layout Dimensions - layout:
- max page size: + Layout:
+ Max page size:

PDF Dimensions
- source:
- on page:
- scaling:
- offset: -
-
+ Source:
+ On page:
+ Scaling:
+ Offset: +
+

- rotated:
+ Rotated:

- (all dimensions are in Points) -
- -
-
+ (All dimensions are in Points)
-
+
diff --git a/src/html/preview.html b/src/html/preview.html index 023a158..56da1c4 100644 --- a/src/html/preview.html +++ b/src/html/preview.html @@ -1,5 +1,5 @@ -
-

Signature Info

+
+

Signature Info

@@ -16,4 +16,4 @@

Signature Info

Signature Arrangement:
-
+ diff --git a/src/html/printer.html b/src/html/printer.html index c4434c0..4b36c89 100644 --- a/src/html/printer.html +++ b/src/html/printer.html @@ -1,44 +1,46 @@ -
-

Printer

- - - - - - - - - - x - - (in Points) - ℹ️ - +
+

Printer

+ +
+ + +
- - @@ -47,28 +49,24 @@

Printer

aria-label="Duplex will alternate front and backs of sheets in a single file; Single-sided will split fronts and backs into seperate files." data-balloon-pos="up" >ℹ️ - - - + > + - - - - NOTE: Not currently working for folios, sorry! Use the - old version - for now. -
+ + +

+ NOTE: Not currently working for folios, sorry! Use the + old version + for now. +

+ diff --git a/src/html/sig_format.html b/src/html/sig_format.html index f6cefdf..eed85f4 100644 --- a/src/html/sig_format.html +++ b/src/html/sig_format.html @@ -1,32 +1,30 @@ -
-

Signature Format

+
+

Signature Format

- + - + + - - - - length + + - - - - + + - -
- A note on calculating signature lengths -

- In this code, the length of a signature is the number of full-sized sheets of paper per - signature. For a folio book, this means that the number of folds you punch through when - sewing together a signature is the same as the number of sheets in the signature, as each - sheet has one fold. For quarto, this will be two folds for each sheet - octavo, four; - sextodecimo, eight. Calculate your signature lengths accordingly (in particular, you almost - certainly don't want more than one sheet for sextodecimo). -

-
+
+ A note on calculating signature lengths +

+ In this code, the length of a signature is the number of full-sized sheets of paper per + signature. For a folio book, this means that the number of folds you punch through when sewing + together a signature is the same as the number of sheets in the signature, as each sheet has + one fold. For quarto, this will be two folds for each sheet - octavo, four; sextodecimo, + eight. Calculate your signature lengths accordingly (in particular, you almost certainly don't + want more than one sheet for sextodecimo). +

+
+

Wacky Small Layouts

+

+ These layouts contain one or more signature per printed page. They use only the "File Info" and + "Printer" settings. The names are arbitrary and hold no standardized meaning. +

+
+ +
+ + +
+
+ + -

Wacky Small Layouts

- These layouts contain one or more signature per printed page. They use only the "File Info" - and "Printer" settings. The names are arbitrary and hold no standardized meaning. + Instructions +

+ Cut along the lines or cut just extra bit off the top (along exposed "top" of page) and + then fold up along the dotted lines (if trimming, you can just trim off the cruft at the + bottom-- tops need to be even for leveling purposes however). Outer margins intentionally + under-marked so you can trim wherever feels right after folding & assembly. +

+

+ Not the most paper efficient of layouts, but it's optimized for organization (if a signature + is just one page, harder to botch the ordering) and many, smaller signatures make for rounder + backs and large swell in my [six's] opinion (which helps w/ nice shoulders, if you're into + that sort of thing) +

+ + + - Fore-Edge Padding:
- pt + Instructions +

+

+ +
+ Cut the vertical center line. You can also cut the horizontal lines if you like, or just fold + it up as detailed above. +

+ + + - - - -
- - - - - - - - -
- Instructions -

- Cut along the lines or cut just extra bit off the top (along exposed "top" of page) - and then fold up along the dotted lines (if trimming, you can just trim off the cruft at the - bottom-- tops need to be even for leveling purposes however). Outer margins intentionally - under-marked so you can trim wherever feels right after folding & assembly. -

-

- Not the most paper efficient of layouts, but it's optimized for organization (if a signature - is just one page, harder to botch the ordering) and many, smaller signatures make for - rounder backs and large swell in my [six's] opinion (which helps w/ nice shoulders, if - you're into that sort of thing) -

-
- - - - - - -
- Instructions -

-

- -
- Cut the vertical center line. You can also cut the horizontal lines if you like, or just - fold it up as detailed above. -

-
- - - - - - -
- Instructions -

- The classic no-cut, single page zine! Just fold it up right and you've got yourself a mutant - non-standard folio making an 8 page little fellow-- all extra pages beyond 8 are discarded. - For better folding instructions than I could possibly write, see: - https://www.quarantinepubliclibrary.com/tutorial -

-
- - - - - - -
- Instructions -

- - THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the - non-typical flipping) -
- Remember to do a single-sheet test print if it's your first time to make sure - duplex/mirroring is correct! -

-

- Cut out the rows. Fold up the folios like a zig-zag (two per face). Then fold the center of - the text (smoosh the two matching page numbers together). -

-

- Note that when folding, it's important for the - center of the folios to line up. That's what I measure against (less so fretting - about folding exactly at the edge). Remember! Printer skew is a real thing! -

-
- - - - - - -
- Instructions -

-

- -
- Cut along the cut lines. Fold up the 3 folio signatures, then the 4 folio. -

-
+ Instructions +

+ The classic no-cut, single page zine! Just fold it up right and you've got yourself a mutant + non-standard folio making an 8 page little fellow-- all extra pages beyond 8 are discarded. + For better folding instructions than I could possibly write, see: + https://www.quarantinepubliclibrary.com/tutorial +

+ + - - - - - -
- Instructions -

- - THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the - non-typical flipping) -
- Remember to do a single-sheet test print if it's your first time to make sure - duplex/mirroring is correct! -

-

- Cut out the rows. Fold up the folios like a zig-zag (two per face). Then fold the center of - the text (smoosh the two matching page numbers together). -

-

- Note that when folding, it's important for the - center of the folios to line up. That's what I measure against (less so fretting - about folding exactly at the edge). Remember! Printer skew is a real thing! -

-
- - - - + Instructions +

+ THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the + non-typical flipping) +

+ +

+ Remember to do a single-sheet test print if it's your first time to make sure duplex/mirroring + is correct! +

+

+ Cut out the rows. Fold up the folios like a zig-zag (two per face). Then fold the center of + the text (smoosh the two matching page numbers together). +

+

+ Note that when folding, it's important for the + center of the folios to line up. That's what I measure against (less so fretting about + folding exactly at the edge). Remember! Printer skew is a real thing! +

+ + + - -
- Instructions -

- - THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the - non-typical flipping) -
- Thankfully most small layouts fit on one page-- easy enough to do a test print and make sure - you're duplexing correctly (if that's your route) -

-

-

- -
- Cut out the rows. Fold up the folios like a big zig-zag (two per face). Then fold the first - 2 folios into a signature and the last 3 folios into a signature. I often cut them apart - only when I'm stitching things together. -

-

- Note that when folding, it's important for the - center of the folios to line up. That's what I measure against (less so fretting - about folding exactly at the edge). Remember! Printer skew is a real thing! -

-
+ Instructions +

+

+ +
+ Cut along the cut lines. Fold up the 3 folio signatures, then the 4 folio. +

+ + + + +
+ Instructions +

+ THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the + non-typical flipping) +

+

+ Remember to do a single-sheet test print if it's your first time to make sure duplex/mirroring + is correct! +

+

+ Cut out the rows. Fold up the folios like a zig-zag (two per face). Then fold the center of + the text (smoosh the two matching page numbers together). +

+

+ Note that when folding, it's important for the + center of the folios to line up. That's what I measure against (less so fretting about + folding exactly at the edge). Remember! Printer skew is a real thing! +

+
+ + -
+
+ Instructions +

+ THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the + non-typical flipping) +

+

+ Thankfully most small layouts fit on one page-- easy enough to do a test print and make sure + you're duplexing correctly (if that's your route) +

+

+

+ +
+ Cut out the rows. Fold up the folios like a big zig-zag (two per face). Then fold the first 2 + folios into a signature and the last 3 folios into a signature. I often cut them apart only + when I'm stitching things together. +

+

+ Note that when folding, it's important for the + center of the folios to line up. That's what I measure against (less so fretting about + folding exactly at the edge). Remember! Printer skew is a real thing! +

+
+ diff --git a/src/html/source_manip.html b/src/html/source_manip.html index c84783a..2f08de8 100644 --- a/src/html/source_manip.html +++ b/src/html/source_manip.html @@ -1,57 +1,64 @@ -
-

Source Manipulation

- - -
-
- -

-
- For books that read like a standard novel
- no rotation of pages applied -

-
- - - - +
+

Source Manipulation

+ + +
+ +

+
+ For books that read like a standard novel
+ no rotation of pages applied +

-
+ + + + + diff --git a/src/main.js b/src/main.js index 0a97b9a..5ff7fc0 100644 --- a/src/main.js +++ b/src/main.js @@ -52,7 +52,7 @@ window.addEventListener('DOMContentLoaded', () => { sourceRotation.addEventListener('change', (e) => { const selectedValue = `${e.target.value}_example`; sourceRotationExamples.forEach((example) => { - example.style.display = example.id === selectedValue ? 'block' : 'none'; + example.style.display = example.id === selectedValue ? 'flex' : 'none'; }); }); sewingMarks.addEventListener('change', (e) => { diff --git a/src/utils/renderUtils.js b/src/utils/renderUtils.js index 101d378..29ab2cd 100644 --- a/src/utils/renderUtils.js +++ b/src/utils/renderUtils.js @@ -34,7 +34,7 @@ export function renderInfoBox(book) { * */ export function updatePageLayoutInfo(info) { - document.getElementById('show_layout_info').style.display = 'block'; + document.getElementById('show_layout_info').style.display = 'flex'; console.log('So much info from updatePageLayoutInfo: ', info); const needsRotation = info.dimensions.layout.rotations[0] == -90 || @@ -266,7 +266,7 @@ export function renderFormFromSettings(configuration) { ); const selectedValue = `${configuration.sourceRotation}_example`; sourceRotationExamples.forEach((example) => { - example.style.display = example.id === selectedValue ? 'block' : 'none'; + example.style.display = example.id === selectedValue ? 'flex' : 'none'; }); }