diff --git a/contrib/readme.md b/contrib/readme.md new file mode 100644 index 00000000..0ef69a0d --- /dev/null +++ b/contrib/readme.md @@ -0,0 +1,3 @@ +# Tridactyl `contrib` + +Not sure what we'll put in this directory, but it won't be as polished as the rest of Tridactyl. diff --git a/contrib/themes/reader/newspaper.css b/contrib/themes/reader/newspaper.css new file mode 100644 index 00000000..418e5fc0 --- /dev/null +++ b/contrib/themes/reader/newspaper.css @@ -0,0 +1,110 @@ +/* + * Sidescrolling newspaper-style layout for :reader + * + * Author: bovine3dom + * + * Usage: `:colourscheme --module=reader --url=[path to raw version of this file] newspaper` + * + */ + +:root { + --serif-font: EconomistSerif, Plantin, Garamond, serif; +} + +html { + height: 100vh; + width: 100vw; + overflow: hidden; + font-family: var(--serif-font); +} + +body { + display: block; + height: 100%; + width: 100%; + padding: 2rem; + column-width: 24rem; + column-gap: 3rem; + column-fill: auto; + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: auto; +} + +body > main { + display: contents; +} + +body > header, +body > footer, +figure, section, article, .notice, +h1, h2, h3, h4, h5, h6, +img, video, table { + break-inside: avoid; + -webkit-column-break-inside: avoid; +} + +h1, h2, h3, h4, h5, h6 { break-after: avoid-column; } +h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { break-before: avoid-column; } + +img, video, table, pre, figure { + display: block; + scrollbar-width: thin; +} + +img, video, table { + max-width: 100%; +} + +table, pre, figure, img { + width: 100%; + max-height: calc(100vh - 6rem); + overflow-y: auto; +} + +body > header { + display: block; + width: 100%; + border-bottom: 2px solid var(--accent); + margin-bottom: 2rem; +} + +body > footer { + display: block; + margin-top: 4rem; + border-top: 2px solid var(--accent); + background-color: var(--accent-bg); +} + +body > header h1, +body > header p { + margin: 0.5rem auto; +} + +body > header h1 { max-width: 100%; } + +h1 { font-size: 2rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.7rem; } + +h2, h3 { margin-top: 0.5rem; } + +@media only screen and (max-width: 600px) { + html, body { + height: auto; + display: block; + overflow-x: hidden; + overflow-y: auto; + columns: 1 auto; + padding: 0; + } + + body > main { + display: block; + padding: 1rem; + } + + body > header { + margin-bottom: 0; + } +} diff --git a/src/excmds.ts b/src/excmds.ts index e38fc809..0d70b932 100644 --- a/src/excmds.ts +++ b/src/excmds.ts @@ -511,7 +511,7 @@ export async function unloadtheme(themename: string) { * * Themes can be loaded from URLs with `:colourscheme --url [url] [themename]`. They are stored internally - if you want to update the theme run the whole command again. You can use `%` as a placeholder for the current URL. * - * Themes can be used for specific sites with `:colourscheme --regex [url regex]`. As a shorthand to style our `:reader` mode, you can use `:colourscheme --module=reader`. + * Themes can be used for specific sites with `:colourscheme --regex [url regex]`. As a shorthand to style our `:reader` mode, you can use `:colourscheme --module=reader`, for example, `:colourscheme --module=reader --url=https://raw.githubusercontent.com/tridactyl/tridactyl/refs/heads/master/contrib/themes/reader/newspaper.css newspaper` * * Note that the theme name should NOT contain any dot. *