From 4f24fdf03e02bc5aee855aa78e48878ef0dc5be4 Mon Sep 17 00:00:00 2001 From: Adam Coster Date: Tue, 1 Oct 2024 16:13:07 -0500 Subject: [PATCH] fix: Improved styling on the new BBCode generator page --- packages/site/src/app.html | 667 +++++++++--------- packages/site/src/lib/Footer.svelte | 3 + .../routes/steam-tools/bbcode/+page.svelte | 14 +- .../site/src/routes/yt-captions/+page.svelte | 2 +- 4 files changed, 342 insertions(+), 344 deletions(-) diff --git a/packages/site/src/app.html b/packages/site/src/app.html index 76cefb3e..34f900d3 100644 --- a/packages/site/src/app.html +++ b/packages/site/src/app.html @@ -1,347 +1,334 @@ - + - - - - - - - - - Stitch | Butterscotch Shenanigans - - - - - %sveltekit.head% - - - -
- %sveltekit.body% -
- - - \ No newline at end of file + *, + *::before, + *::after { + box-sizing: border-box; + } + + * { + margin: 0; + } + + html, + body { + line-height: 1.5; + background-color: var(--color-background); + } + + img, + picture, + video, + canvas { + display: block; + max-width: 100%; + } + + svg { + display: inline-block; + } + + input, + button, + textarea, + select { + font: inherit; + } + + p, + h1, + h2, + h3, + h4, + h5, + h6 { + overflow-wrap: break-word; + } + + #root, + #__next { + isolation: isolate; + } + } + + @layer global { + /* Essential global styles */ + + body { + display: flex; + flex-direction: column; + align-items: center; + max-width: var(--content-max-width); + font-family: var(--font-family); + overflow-wrap: break-word; + color: var(--color-text); + padding-inline: 1rem; + padding-block: 0.8rem; + min-height: 100vh; + } + + p { + font-size: 1.1rem; + } + } + + @layer basic { + /* Some sensible defaults for easy overriding in specific components */ + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: bold; + } + + a { + color: var(--color-link); + text-decoration: none; + } + + a:hover, + a:focus { + color: var(--color-link-hover); + } + + a, + a:hover, + a:focus { + text-decoration: underline; + cursor: pointer; + text-decoration-color: var(--color-link-underline); + text-decoration-thickness: 0.1rem; + text-underline-offset: 0.25rem; + } + + a:hover { + text-decoration-thickness: 0.2rem; + } + + pre, + code { + font-family: var(--font-family-mono); + } + + [role='button'] { + cursor: pointer; + user-select: none; + } + + /* Add some default margin between common semantic flow items */ + :where(p, img, h1, h2, h3, h4, h5, h6, ul, ol, header, table, nav, section) + + :where(p, img, h1, h2, h3, h4, h5, h6, ul, ol, table, nav, section) { + margin-top: 0.5em; + } + } + + /* UTILITY CLASSES */ + .reset:where(ul, ol, menu) { + list-style: none; + padding: 0; + margin: 0; + } + + .reset:where(a) { + text-decoration: none; + } + + :where(button) { + font-size: 1em; + font-style: bold; + color: var(--color, inherit); + text-align: center; + border-style: solid; + border-radius: 0.5em; + border-color: currentColor; + border-width: 0; + margin: 0; + padding: 0; + background: none; + user-select: none; + cursor: pointer; + } + + :where(button):hover { + color: var(--color-highlight, var(--color-text-highlight, var(--color-link-hover))); + } + + .pad-tight { + padding: 0.1em 0.7em 0.2em 0.7em; + } + + .select-none { + user-select: none; + } + + .select-all { + user-select: all; + } + + .select-this { + user-select: contain; + } + + .monospace { + font-family: var(--font-family-mono); + } + + .sr-only:not(:focus):not(:active) { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; + } + + .no-scroll { + overflow: hidden; + } + + .scroller { + overflow-y: auto; + --scrollbar-width: 0.4em; + --scrollbar-radius: calc(var(--scrollbar-width) * 0.5); + } + + /* Scrolling */ + .scroller::-webkit-scrollbar { + width: var(--scrollbar-width); + height: var(--scrollbar-width); + } + + .scroller::-webkit-scrollbar-thumb { + /* foreground color */ + background: var(--color-text-subtle); + border-radius: var(--scrollbar-radius); + } + + .scroller::-webkit-scrollbar-track { + /* background color */ + background: var(--color-background); + border-radius: var(--scrollbar-radius); + } + + .scroller.boxed { + --color-border: var(--color-border, var(--color-text-subtle)); + border-radius: 0.75em var(--scrollbar-radius) var(--scrollbar-radius) + var(--scrollbar-radius); + border: 0.1em solid var(--color-border); + box-shadow: inset 0 0 0.2em var(--color-border); + padding-top: 0.3em; + } + + .append-animated-ellipsis:after { + overflow: hidden; + display: inline-block; + vertical-align: bottom; + animation: ellipsis steps(1, end) 2s infinite; + content: ''; + width: 1em; + } + + .warning { + color: var(--color-text-danger); + } + + @keyframes ellipsis { + 0% { + content: ''; + } + + 25% { + content: '.'; + } + + 50% { + content: '..'; + } + + 75% { + content: '...'; + } + + 100% { + content: ''; + } + } + + %sveltekit.head% + + + +
%sveltekit.body%
+ + diff --git a/packages/site/src/lib/Footer.svelte b/packages/site/src/lib/Footer.svelte index 1bf7fc97..cc415e6b 100644 --- a/packages/site/src/lib/Footer.svelte +++ b/packages/site/src/lib/Footer.svelte @@ -1,4 +1,7 @@