diff --git a/README.md b/README.md index 76f4c1e4..824fbefc 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Tale +[![Build Status](https://travis-ci.com/EmielH/tale-hugo.svg?branch=master)](https://travis-ci.com/EmielH/tale-hugo) + This is a port of the [Tale theme for Jekyll](https://github.com/chesterhow/tale) to Hugo. Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here](https://chesterhow.github.io/tale/). I did not design this theme; I only ported it from Jekyll to Hugo. ![Tale screenshot](https://raw.githubusercontent.com/EmielH/tale-hugo/master/images/screenshot.png) @@ -36,7 +38,7 @@ hugo server -t tale ### Additional information -For more information, read the official [setup guide]( https://gohugo.io/overview/installing/) of Hugo. +For more information, read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo. ### Update the theme @@ -48,13 +50,138 @@ git submodule update --remote --rebase If you have cloned the theme, you can run `git pull` inside the theme folder. +## Configuration + +### Menu + +The top menu uses [Hugo Menus](https://gohugo.io/content-management/menus/), with the name of the menu being `main`. To turn on the menu, follow the steps there - you can either add something like this to the front-matter of your pages: + +``` +--- +menu: "main" +--- +``` + +... or you can add a menu section to your `config` file: + +``` +sectionPagesMenu = "main" +``` + +Or if you want more control, add a specific entry for each item in your menu: + +``` +[menu] + [[menu.main]] + identifier = "about" + name = "About" + title = "About" + url = "/about/" + weight = 0 + [[menu.main]] + identifier = "posts" + name = "Posts" + title = "Posts" + url = "/posts/" + weight = 0 +``` + +For menu internationalization/translation, see [Multilingual Mode: Menus](https://gohugo.io/content-management/multilingual/#menus). + +### Internationalisation (i18n) + +Tale supports using other languages than English. Language files for the texts Tale uses are provided in the `i18n` directory. The default language is English. To switch languages, add the key `defaultContentLanguage` to your `config.toml` file. For example: + +``` +defaultContentLanguage = "nl" +``` + +To translate texts your site uses, add an `i18n` folder to your site. + +Feel free to submit pull requests for other translations of Tale's texts. + +[Hugo documentation for multilingual sites](//gohugo.io/content-management/multilingual/) + +### Disqus + +Tale supports Disqus integration, a comment system that empowers dynamic features to static websites. To install it, just add it to your config as described in [the Hugo Documentation](https://gohugo.io/content-management/comments/#configure-disqus). + +```toml +disqusShortname = "disqus-example" +``` + +Add the parameter `comments` in the front-matter of the pages where you want to allow comments + +``` +--- +comments: true +--- +``` + +### Google Analytics + +Tale supports Google Analytics (UA and GA4) integration using Hugo's provided `google_analytics` template. + +To enable it, add the `googleAnalytics` tag to your `config.toml`. It will be added on all pages. + +```toml +googleAnalytics = "UA-133700000-0" # or G-1337000000 for GA4 +``` + +### Custom summaries + +Tale allows for writing the summary of your posts manually by setting the `summary` variable in the page frontmatter. If this variable is not set, the summary that Hugo automatically generates will be used. + +### Taxonomies + +Tale has basic support for taxonomies. Taxonomy and terms pages will be generated when you have defined taxonomies, but you need to include links to these pages yourself. For example, you can add a link to a taxonomy page in `header-menu.html`. + +### Placeholder partials + +The theme contains placeholder partials to make the theme more flexible and easier to adapt to your site without having to change the theme itself. These are: + +- `single/header.html` +- `single/footer.html` + +These are included in the template for a single post, at the top of the post (below the title) and at the bottom of the post, respectively. These can be used, for example, to include additional information about the post author or for related posts. Create a file `/layouts/partials/single/header.html` or `footer.html` on your own site to have it included. + +- `index/introduction.html` + +This partial is included at the top of the list of posts on the index page, allowing you to add an introduction to your site. + +### Copyright message + +The copyright message in the footer uses the name of the author of the site, as defined in `config.toml`. For example: + +``` +[Author] + name = "Emiel" +``` + +### Additional CSS files + +The theme can load additional CSS files for you, e.g. to override some of the styles, or the CSS that goes with a component that you're using. To add additional CSS files, put these files in the `static` folder of your site and add the `css` parameter to `config.toml`, like so: + +``` +[Params] +css = ["custom.css"] +``` + +To load multiple CSS files, use the parameter like this: + +``` +[Params] +css = ["custom.css", "custom2.css"] +``` + ## Acknowledgments -Thanks +Thanks - to [Chester How](//github.com/chesterhow) for creating the original [Tale theme for Jekyll](https://chesterhow.github.io/tale/), - to [onedrawingperday](//github.com/onedrawingperday), [bep](//github.com/bep) and [digitalcraftsman](//github.com/digitalcraftsman) for their help in getting the theme working correctly with Hugo, - to [lucperkins](https://github.com/lucperkins) for the [Fresh theme](https://github.com/lucperkins/hugo-fresh) from which I used some useful snippets of code. ## License -See [LICENSE](https://github.com/EmielH/tale-hugo/blob/master/LICENSE). \ No newline at end of file + +See [LICENSE](https://github.com/EmielH/tale-hugo/blob/master/LICENSE). diff --git a/assets/scss/tale.scss b/assets/scss/tale.scss index 3cdfa991..53f9decb 100644 --- a/assets/scss/tale.scss +++ b/assets/scss/tale.scss @@ -4,5 +4,7 @@ @import 'tale/post'; @import 'tale/syntax'; @import 'tale/layout'; +@import 'tale/toc'; @import 'tale/pagination'; @import 'tale/catalogue'; +@import 'tale/disqus'; diff --git a/assets/scss/tale/_base.scss b/assets/scss/tale/_base.scss index a5135795..c096ebbb 100644 --- a/assets/scss/tale/_base.scss +++ b/assets/scss/tale/_base.scss @@ -5,7 +5,8 @@ html, body { - color: $default-color; + color: var(--default-color); + background-color: var(--background-color); margin: 0; padding: 0; } @@ -30,19 +31,19 @@ h3, h4, h5, h6 { - color: $default-shade; + color: var(--default-shade); font-family: $sans-serif; line-height: normal; } a { - color: $blue; + color: var(--blue); text-decoration: none; } blockquote { - border-left: .25rem solid $grey-2; - color: $grey-1; + border-left: .25rem solid var(--grey-2); + color: var(--grey-1); margin: .8rem 0; padding: .5rem 1rem; diff --git a/assets/scss/tale/_catalogue.scss b/assets/scss/tale/_catalogue.scss index 33310169..ec065a16 100644 --- a/assets/scss/tale/_catalogue.scss +++ b/assets/scss/tale/_catalogue.scss @@ -1,8 +1,8 @@ .catalogue { &-item { - border-bottom: 1px solid $grey-2; - color: $default-color; - display: inline-block; + border-bottom: 1px solid var(--grey-2); + color: var(--default-color); + display: block; padding: 2rem 0; &:hover .catalogue-line, @@ -16,13 +16,13 @@ } &-time { - color: $default-tint; + color: var(--default-tint); font-family: $serif-secondary; letter-spacing: .5px; } &-title { - color: $default-shade; + color: var(--default-shade); display: block; font-family: $sans-serif; font-size: 2rem; @@ -31,8 +31,8 @@ } &-line { - @include transition(all .3s ease-out); - border-top: .2rem solid $default-shade; + @include transition($color-transition, width .3s ease-out); + border-top: .2rem solid var(--default-shade); display: block; width: 2rem; } diff --git a/assets/scss/tale/_code.scss b/assets/scss/tale/_code.scss index 1597e13f..6d97161d 100644 --- a/assets/scss/tale/_code.scss +++ b/assets/scss/tale/_code.scss @@ -4,11 +4,12 @@ code { } code { - background-color: $grey-3; + background-color: var(--grey-4); border-radius: 3px; - color: $code-color; + color: var(--code-color); font-size: 85%; padding: .25em .5em; + white-space: pre-wrap; } pre { @@ -22,8 +23,14 @@ pre code { padding: 0; } +pre code > span { + // This isn't very pretty, but the precise RGB values are generated + // server-side, the usual trick of putting the colors in CSS variables does + // not quite work and this is the best I could come up with. + filter: var(--code-filter); +} .highlight { - background-color: $grey-3; + background-color: var(--grey-4); border-radius: 3px; line-height: 1.4; margin: 0 0 1rem; @@ -35,7 +42,7 @@ pre code { } .lineno { - color: $default-tint; + color: var(--default-tint); display: inline-block; // Ensures the null space also isn't selectable padding: 0 .75rem 0 .25rem; // Make sure numbers aren't selectable diff --git a/assets/scss/tale/_disqus.scss b/assets/scss/tale/_disqus.scss new file mode 100644 index 00000000..7474acfb --- /dev/null +++ b/assets/scss/tale/_disqus.scss @@ -0,0 +1,3 @@ +.article-discussion { + margin: 0; +} diff --git a/assets/scss/tale/_layout.scss b/assets/scss/tale/_layout.scss index ba4a7b0f..c459510e 100644 --- a/assets/scss/tale/_layout.scss +++ b/assets/scss/tale/_layout.scss @@ -1,10 +1,18 @@ +* { + @include transition($color-transition); +} + .container { margin: 0 auto; max-width: 800px; width: 80%; } -main, +// Carve out an exception from the 80% narrowing of the viewport for the table +// of contents. This is ugly, but there isn't a better way, since the table of +// contents must be a child of the "main" element so that it its scrolling +// behavior is intuitive. +main > *, footer, .nav-container { display: block; @@ -13,8 +21,19 @@ footer, width: 80%; } +#darkModeToggle { + float: right; + position: sticky; + top: 2rem; + margin-right: 2rem; + margin-top: 2rem; + font-size: 2rem; + + cursor: pointer; +} + .nav { - box-shadow: 0 2px 2px -2px $shadow-color; + box-shadow: 0 2px 2px -2px var(--shadow-color); overflow: auto; &-container { @@ -24,8 +43,8 @@ footer, } &-title { - @include transition(all .2s ease-out); - color: $default-color; + @include transition($color-transition, opacity .2s ease-out); + color: var(--default-color); display: inline-block; margin: 0; padding-right: .2rem; @@ -44,8 +63,8 @@ footer, } li { - @include transition(all .2s ease-out); - color: $default-color; + @include transition($color-transition, opacity .2s ease-out); + color: var(--default-color); display: inline-block; opacity: .6; padding: 0 2rem 0 0; @@ -61,7 +80,7 @@ footer, } a { - color: $default-color; + color: var(--default-color); font-family: $sans-serif; } } @@ -86,7 +105,7 @@ footer { text-align: center; span { - color: $default-color; + color: var(--default-color); font-size: .8rem; } } diff --git a/assets/scss/tale/_pagination.scss b/assets/scss/tale/_pagination.scss index 3700e152..8b391b5d 100644 --- a/assets/scss/tale/_pagination.scss +++ b/assets/scss/tale/_pagination.scss @@ -1,18 +1,18 @@ .pagination { - border-top: .5px solid $grey-2; + border-top: .5px solid var(--grey-2); font-family: $serif-secondary; padding-top: 2rem; position: relative; text-align: center; span { - color: $default-shade; + color: var(--default-shade); font-size: 1.1rem; } .top { - @include transition(all .3s ease-out); - color: $default-color; + @include transition($color-transition, opacity .3s ease-out); + color: var(--default-color); font-family: $sans-serif; font-size: 1.1rem; opacity: .6; @@ -23,8 +23,8 @@ } .arrow { - @include transition(all .3s ease-out); - color: $default-color; + @include transition($color-transition, opacity .3s ease-out); + color: var(--default-color); position: absolute; &:hover, diff --git a/assets/scss/tale/_post.scss b/assets/scss/tale/_post.scss index 3680d80b..61cff18e 100644 --- a/assets/scss/tale/_post.scss +++ b/assets/scss/tale/_post.scss @@ -2,7 +2,7 @@ padding: 3rem 0; &-info { - color: $default-tint; + color: var(--default-tint); font-family: $serif-secondary; letter-spacing: 0.5px; text-align: center; @@ -13,7 +13,7 @@ } &-title { - color: $default-shade; + color: var(--default-shade); font-family: $sans-serif; font-size: 4rem; margin: 1rem 0; @@ -21,7 +21,7 @@ } &-line { - border-top: 0.4rem solid $default-shade; + border-top: 0.4rem solid var(--default-shade); display: block; margin: 0 auto 3rem; width: 4rem; @@ -41,7 +41,7 @@ } img + em { - color: $default-tint; + color: var(--default-tint); display: block; font-family: $sans-serif; font-size: 0.9rem; diff --git a/assets/scss/tale/_toc.scss b/assets/scss/tale/_toc.scss new file mode 100644 index 00000000..08ccd475 --- /dev/null +++ b/assets/scss/tale/_toc.scss @@ -0,0 +1,96 @@ +aside.toc { + position: sticky; + top: 0; + max-width: 30%; + + // We want the table of contents to be on the left (horizontally), to be + // positioned at a specific point (vertically), stick to the top on scroll + // and it should not affect the layout of other elements. + // "float: left" accomplishes the horizontal positioning, position in the + // element tree the vertical positioning and "position: sticky" does the + // stickiness. "height: 0" makes sure that the flow of other elements is not + // affected. + // + // There does not seem to be a better way to do this unless one is willing + // to implement scrolling in JS: "position" must be set to sticky so neither + // fixed, nor absolute, nor relative positioning can be used. + float: left; + height: 0; + overflow: display; + + // This is apparenty necessary so that the table of contents covers elements + // with the "filter:" property set. + z-index: 1; +} + +#tocTitle { + // This is so that we can measure it in JS + width: fit-content; +} + +#tocContainer:hover { + width: calc(2rem + var(--measured-expanded-width)); +} + +#tocContainer:hover div#tocCollapsible { + height: var(--measured-height); + width: var(--measured-expanded-width); +} + +#tocContainer { + background-color: var(--grey-3); + border-radius: 1rem; + margin: 2rem; + padding: 1rem; + + // This makes the gap between the two contained divs vanish. Why that gap + // exists, no clue. + display: flex; + flex-direction: column; + + // We want to hide the table of contents before revealing it on hover + overflow: hidden; + + // In addition to the measured width of the title, we need to add the two + // rems for the border (we are using box-sizing: border-box). Also add a + // reasonable default value to minimize visual changes while the page is + // loading. + width: calc(2rem + var(--measured-title-width)); + --measured-title-width: 2.4rem; + +@include transition( + $color-transition, + width .1s ease-out, + height .1s ease-out); +} + +#tocContainer > div { + border-left: 0.4rem solid var(--default-shade); + padding-left: 1rem; +} + +#tocContainer div#tocCollapsible { + // Collapsed by default + height: 0; + + // If we did not force this element to a given width, it would keep + // re-wrapping during the opening/closing transition. + width: var(--measured-expanded-width); + + // No transition on width so that there is no re-wrapping during the + // opening/closing transition + @include transition($color-transition, height .1s ease-out); +} + +nav#TableOfContents ul { + list-style-type: none; + padding-inline-start: 1rem; +} + +nav#TableOfContents > ul { + padding-inline-start: 0; +} + +nav#TableOfContents li { + margin-top: 0.4rem; +} diff --git a/assets/scss/tale/_variables.scss b/assets/scss/tale/_variables.scss index 8a064f32..43914baf 100644 --- a/assets/scss/tale/_variables.scss +++ b/assets/scss/tale/_variables.scss @@ -1,14 +1,47 @@ // Colors -$default-color: #555; -$default-shade: #353535; -$default-tint: #aaa; -$grey-1: #979797; -$grey-2: #e5e5e5; -$grey-3: #f9f9f9; -$white: #fff; -$blue: #4a9ae1; -$shadow-color: rgba(0, 0, 0, .2); -$code-color: #bf616a; +// This is necessary because some elements want to set transitions themselves, +// which would result in deleting the color transitions specified in less +// specific selectors. +$color-transition: + background-color .4s ease-out, + color .4s ease-out, + border-color .4s ease-out, + box-shadow .4s ease-out; + + +// Make the default be dark mode. That way, the more complicated case is the +// default and thus bugs are discovered earlier. +:root.light { + --default-color: #555; + --background-color: #fff; + --default-shade: #353535; + --default-tint: #aaa; + --grey-1: #979797; + --grey-2: #e5e5e5; + --grey-3: #f0f0f0; + --grey-4: #f9f9f9; + --white: #fff; + --blue: #4a9ae1; + --shadow-color: rgba(0, 0, 0, .2); + --code-color: #bf616a; + --code-filter: ; +} + +:root:not(.light) { + --default-color: #888; + --background-color: #000; + --default-shade: #989898; + --default-tint: #555; + --grey-1: #606060; + --grey-2: #404040; + --grey-3: #202020; + --grey-4: #181818; + --white: #fff; + --blue: #1d6baf; + --shadow-color: rgba(0, 0, 0, .2); + --code-color: #a3434c; + --code-filter: contrast(0.4) brightness(0.9); +} // Fonts $serif-primary: 'Libre Baskerville', 'Times New Roman', Times, serif; diff --git a/data/months_de.yaml b/data/months_de.yaml new file mode 100644 index 00000000..f18a1e37 --- /dev/null +++ b/data/months_de.yaml @@ -0,0 +1,12 @@ +1: "Januar" +2: "Februar" +3: "März" +4: "April" +5: "Mai" +6: "Juni" +7: "Juli" +8: "August" +9: "September" +10: "Oktober" +11: "November" +12: "Dezember" diff --git a/data/months_es.yaml b/data/months_es.yaml new file mode 100644 index 00000000..e2fc147e --- /dev/null +++ b/data/months_es.yaml @@ -0,0 +1,12 @@ +1: "enero" +2: "febrero" +3: "marzo" +4: "abril" +5: "mayo" +6: "junio" +7: "julio" +8: "agosto" +9: "septiembre" +10: "octubre" +11: "noviembre" +12: "diciembre" diff --git a/data/months_fr.yaml b/data/months_fr.yaml new file mode 100644 index 00000000..21c9088f --- /dev/null +++ b/data/months_fr.yaml @@ -0,0 +1,12 @@ +1: "janvier" +2: "février" +3: "mars" +4: "avril" +5: "mai" +6: "juin" +7: "juillet" +8: "août" +9: "septembre" +10: "octobre" +11: "novembre" +12: "décembre" diff --git a/data/months_it.yaml b/data/months_it.yaml new file mode 100644 index 00000000..9f584cdf --- /dev/null +++ b/data/months_it.yaml @@ -0,0 +1,12 @@ +1: "gennaio" +2: "febbraio" +3: "marzo" +4: "aprile" +5: "maggio" +6: "giugno" +7: "luglio" +8: "agosto" +9: "settembre" +10: "ottobre" +11: "novembre" +12: "dicembre" diff --git a/data/months_ku.yaml b/data/months_ku.yaml new file mode 100644 index 00000000..414251dc --- /dev/null +++ b/data/months_ku.yaml @@ -0,0 +1,12 @@ +1: "Adar" +2: "Avrêl" +3: "Gulan" +4: "Pûşper" +5: "Tîrmeh" +6: "Gelawêj" +7: "Rezber" +8: "Kewçêr" +9: "Sermawez" +10: "Berfanbar" +11: "Rêbendan" +12: "Reşemî" diff --git a/data/months_nl.yaml b/data/months_nl.yaml new file mode 100644 index 00000000..c9798928 --- /dev/null +++ b/data/months_nl.yaml @@ -0,0 +1,12 @@ +1: "januari" +2: "februari" +3: "maart" +4: "april" +5: "mei" +6: "juni" +7: "juli" +8: "augustus" +9: "september" +10: "oktober" +11: "november" +12: "december" \ No newline at end of file diff --git a/data/months_pl.yaml b/data/months_pl.yaml new file mode 100644 index 00000000..d5f3756d --- /dev/null +++ b/data/months_pl.yaml @@ -0,0 +1,12 @@ +1: "stycznia" +2: "lutego" +3: "marca" +4: "kwietnia" +5: "maja" +6: "czerwca" +7: "lipca" +8: "sierpnia" +9: "września" +10: "października" +11: "listopada" +12: "grudnia" diff --git a/i18n/de.toml b/i18n/de.toml new file mode 100644 index 00000000..c587b3f7 --- /dev/null +++ b/i18n/de.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Von" + +[on] +other = "am" + +[generator] +other = "Made with Hugo using the Tale theme." + +[publishdate] +other = "{{ .PublishDate.Day }}. {{ index $.Site.Data.months_de (printf \"%d\" .PublishDate.Month) }} {{ .PublishDate.Year }}" diff --git a/i18n/en.toml b/i18n/en.toml new file mode 100644 index 00000000..fc9961f6 --- /dev/null +++ b/i18n/en.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Written by" + +[on] +other = "on" + +[generator] +other = "Made with Hugo using the Tale theme." + +[publishdate] +other = "{{ .PublishDate.Format \"January 2, 2006\" }}" \ No newline at end of file diff --git a/i18n/es.toml b/i18n/es.toml new file mode 100644 index 00000000..25f657e8 --- /dev/null +++ b/i18n/es.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Escrito por" + +[on] +other = "el" + +[generator] +other = "Hecho con Hugo usando el tema Tale." + +[publishdate] +other = "{{ .PublishDate.Day }} de {{ index $.Site.Data.months_es (printf \"%d\" .PublishDate.Month) }} de {{ .PublishDate.Year }}" diff --git a/i18n/fr.toml b/i18n/fr.toml new file mode 100644 index 00000000..a13b9935 --- /dev/null +++ b/i18n/fr.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Écrit par" + +[on] +other = "le" + +[generator] +other = "Fait avec Hugo, à partir du thème Tale." + +[publishdate] +other = "{{ .PublishDate.Day }} {{ index $.Site.Data.months_fr (printf \"%d\" .PublishDate.Month) }} {{ .PublishDate.Year }}" diff --git a/i18n/it.toml b/i18n/it.toml new file mode 100644 index 00000000..a0765a68 --- /dev/null +++ b/i18n/it.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Scritto da" + +[on] +other = "il" + +[generator] +other = "Creato con Hugo usando il tema Tale." + +[publishdate] +other = "{{ .PublishDate.Day }} {{ index $.Site.Data.months_it (printf \"%d\" .PublishDate.Month) }} {{ .PublishDate.Year }}" diff --git a/i18n/ku.toml b/i18n/ku.toml new file mode 100644 index 00000000..43bdc5f4 --- /dev/null +++ b/i18n/ku.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Nivîskar:" + +[on] +other = "li" + +[generator] +other = "Bi Hugo û Tale-ê hatiye çêkirin." + +[publishdate] +other = "{{ .PublishDate.Day }} {{ index $.Site.Data.months_ku (printf \"%d\" .PublishDate.Month) }} {{ .PublishDate.Year }}" diff --git a/i18n/nl.toml b/i18n/nl.toml new file mode 100644 index 00000000..8357c08d --- /dev/null +++ b/i18n/nl.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Geschreven door" + +[on] +other = "op" + +[generator] +other = "Gemaakt met Hugo en thema Tale." + +[publishdate] +other = "{{ .PublishDate.Day }} {{ index $.Site.Data.months_nl (printf \"%d\" .PublishDate.Month) }} {{ .PublishDate.Year }}" diff --git a/i18n/pl.toml b/i18n/pl.toml new file mode 100644 index 00000000..44b5ffaa --- /dev/null +++ b/i18n/pl.toml @@ -0,0 +1,11 @@ +[writtenBy] +other = "Autor" + +[on] +other = "opublikowano" + +[generator] +other = "Made with Hugo using the Tale theme." + +[publishdate] +other = "{{ .PublishDate.Day }}. {{ index $.Site.Data.months_pl (printf \"%d\" .PublishDate.Month) }} {{ .PublishDate.Year }}" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5f8e2ec0..4bf1dc87 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,11 +1,10 @@ - - {{- partial "head.html" . -}} + + {{ partial "head.html" . }} - {{- partial "header.html" . -}} -
- {{- block "main" . }}{{- end }} -
- {{- partial "footer.html" . -}} + {{ partial "header.html" . }} + {{ partial "darkmode.html" . }} + {{ block "main" . }}{{ end }} + {{ partial "footer.html" . }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e69de29b..59183676 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -0,0 +1,22 @@ +{{ define "main" }} + +
+
+ {{ range (.Paginate .Pages).Pages }} + {{ .Render "summary" }} + {{ end }} +
+ + +
+ +{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 2e05fc56..dfc3d1e9 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,38 +1,29 @@ -{{- partial "header.html" . }} +{{ define "main" }}
-
-
- Written by - {{- if .Params.Author }} - {{ .Params.Author }} - {{- else }} - {{ .Site.Params.Author }} - {{- end }} + {{ partial "toc.html" . }} - {{- if .PublishDate }} -
- on  - {{- end }} -
+
+ {{ partial "single/post-info.html" . }} + {{ partial "single/title.html" . }} -

{{ .Title }}

-
+ {{ partial "single/header.html" . }} {{ .Content }} + {{ partial "single/footer.html" . }}
-{{- partial "footer.html" . }} \ No newline at end of file +{{ end }} diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html new file mode 100644 index 00000000..a673fe7b --- /dev/null +++ b/layouts/_default/summary.html @@ -0,0 +1,11 @@ + +
+ +

{{ .Title }}

+
+ +

+ {{ if isset .Params "summary" }}{{ .Params.Summary | markdownify }}{{ else }}{{ .Summary }}{{ end }} +

+
+ diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html new file mode 100644 index 00000000..c87822e7 --- /dev/null +++ b/layouts/_default/taxonomy.html @@ -0,0 +1,23 @@ +{{ define "main" }} + +
+

{{ strings.FirstUpper .Data.Singular }} {{ .Title }}

+
+ {{ range (.Paginate .Pages).Pages }} + {{ .Render "summary" }} + {{ end }} +
+ + +
+ +{{ end }} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html new file mode 100644 index 00000000..4d2f9d2c --- /dev/null +++ b/layouts/_default/terms.html @@ -0,0 +1,24 @@ +{{ define "main" }} +
+

{{ .Title }}

+
+ +
+ + +
+ +{{ end }} \ No newline at end of file diff --git a/layouts/about/list.html b/layouts/about/list.html index 278b4dd0..30dd8506 100644 --- a/layouts/about/list.html +++ b/layouts/about/list.html @@ -1,4 +1,4 @@ -{{ partial "header.html" . }} +{{ define "main" }}
@@ -9,17 +9,6 @@

{{ .Title }}

{{ .Content }}
- -
-{{ partial "footer.html" . }} \ No newline at end of file +{{ end }} diff --git a/layouts/archives/single.html b/layouts/archives/single.html new file mode 100644 index 00000000..4ba0a794 --- /dev/null +++ b/layouts/archives/single.html @@ -0,0 +1,27 @@ +{{ define "main" }} + +
+
+ {{ partial "single/title.html" . }} + {{ partial "single/header.html" . }} + +
+ {{ range (where (where .Site.Pages "IsPage" "=" true) "Params.hidden" "!=" true ).GroupByDate "2006" }} +

{{ .Key }}

+
    + {{ range .Pages }} +
  • + {{ .Date.Format "01/02" }} + {{ .Title }} +
    • + {{ end }} +
+ {{ end }} + +
+ + {{ partial "single/footer.html" . }} +
+
+ +{{ end }} \ No newline at end of file diff --git a/layouts/disqus.html b/layouts/disqus.html new file mode 100644 index 00000000..883dd316 --- /dev/null +++ b/layouts/disqus.html @@ -0,0 +1,22 @@ +
+ + + diff --git a/layouts/index.html b/layouts/index.html index 94c114a4..2bb71f8e 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,23 +1,14 @@ -{{ partial "header.html" . }} +{{ define "main" }}
+ {{ partial "index/introduction.html" . }} +
- {{ range (.Paginate .Pages).Pages }} - -
- -

{{ .Title }}

-
- -

- {{ .Summary }} -

- -
- + {{ range (.Paginate .Site.RegularPages).Pages }} + {{ .Render "summary" }} {{ end }}
- +
-{{ partial "footer.html" . }} \ No newline at end of file +{{ end }} diff --git a/layouts/partials/darkmode.html b/layouts/partials/darkmode.html new file mode 100644 index 00000000..1016b536 --- /dev/null +++ b/layouts/partials/darkmode.html @@ -0,0 +1,3 @@ +
+ ◐ +
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0d57b9f3..1a078a5b 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,10 @@ - - \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index ef91b1dc..833cf30b 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,34 +1,35 @@ + + {{ template "_internal/google_analytics.html" . }} - {{- if eq .URL "/" }} + {{- if .IsHome }} {{- else if .Description }} {{- end }} - - - {{- if eq .URL "/" }} - {{ .Site.Title }} - {{- else }} - {{ .Title }} · {{ .Site.Title }} - {{- end }} - - + + {{- if .IsHome }}{{ .Site.Title }}{{- else }}{{ .Title }} · {{ .Site.Title }}{{- end }} + - {{- $inServerMode := .Site.IsServer }} + {{- $inServerMode := hugo.IsServer }} {{- $cssTarget := "css/style.css" }} - {{- $cssOptions := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }} + {{- $cssOptions := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }} {{- $style := resources.Get "scss/tale.scss" | toCSS $cssOptions }} - - - + + + {{ range .Site.Params.css -}} + + {{ end -}} + - - - - + + + + + - + + + - \ No newline at end of file diff --git a/layouts/partials/header-menu.html b/layouts/partials/header-menu.html new file mode 100644 index 00000000..52e69922 --- /dev/null +++ b/layouts/partials/header-menu.html @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index ea0bd000..4c61fad0 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,17 +1,12 @@ - - - - {{ partial "head.html" . }} - - \ No newline at end of file + diff --git a/layouts/partials/index/introduction.html b/layouts/partials/index/introduction.html new file mode 100644 index 00000000..5b636b8d --- /dev/null +++ b/layouts/partials/index/introduction.html @@ -0,0 +1,5 @@ + diff --git a/layouts/partials/single/footer.html b/layouts/partials/single/footer.html new file mode 100644 index 00000000..8a115ba2 --- /dev/null +++ b/layouts/partials/single/footer.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/layouts/partials/single/header.html b/layouts/partials/single/header.html new file mode 100644 index 00000000..6724ec9c --- /dev/null +++ b/layouts/partials/single/header.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/layouts/partials/single/post-info.html b/layouts/partials/single/post-info.html new file mode 100644 index 00000000..b5c8aa3e --- /dev/null +++ b/layouts/partials/single/post-info.html @@ -0,0 +1,13 @@ +
+ {{ i18n "writtenBy" }} + {{- if .Params.Author }} + {{ .Params.Author }} + {{- else }} + {{ .Site.Author.name }} + {{- end }} + + {{- if .PublishDate }} +
+ {{ i18n "on" }}  + {{- end }} +
diff --git a/layouts/partials/single/title.html b/layouts/partials/single/title.html new file mode 100644 index 00000000..bbd93aa4 --- /dev/null +++ b/layouts/partials/single/title.html @@ -0,0 +1,2 @@ +

{{ .Title }}

+
\ No newline at end of file diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html new file mode 100644 index 00000000..81d524a8 --- /dev/null +++ b/layouts/partials/toc.html @@ -0,0 +1,13 @@ +{{ if .Params.toc }} + +{{ end }} diff --git a/resources/_gen/assets/scss/scss/tale.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content b/resources/_gen/assets/scss/scss/tale.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content index 478e61ef..cf4abcae 100644 --- a/resources/_gen/assets/scss/scss/tale.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content +++ b/resources/_gen/assets/scss/scss/tale.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content @@ -1 +1 @@ -*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;line-height:1.5}html,body{color:#555;margin:0;padding:0}html{font-family:"Libre Baskerville","Times New Roman",Times,serif;font-size:14px;overflow-y:scroll}@media (min-width: 600px){html{font-size:16px}}body{-webkit-text-size-adjust:100%}h1,h2,h3,h4,h5,h6{color:#353535;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;line-height:normal}a{color:#4a9ae1;text-decoration:none}blockquote{border-left:0.25rem solid #e5e5e5;color:#979797;margin:.8rem 0;padding:.5rem 1rem}blockquote p:last-child{margin-bottom:0}@media (min-width: 600px){blockquote{padding:0 5rem 0 1.25rem}}img{display:block;margin:0 0 1rem;max-width:100%}td{vertical-align:top}pre,code{font-family:Menlo,Monaco,monospace}code{background-color:#f9f9f9;border-radius:3px;color:#bf616a;font-size:85%;padding:.25em .5em}pre{margin:0 0 1rem}pre code{background-color:transparent;color:inherit;font-size:100%;padding:0}.highlight{background-color:#f9f9f9;border-radius:3px;line-height:1.4;margin:0 0 1rem;padding:1rem}.highlight pre{margin-bottom:0;overflow-x:auto}.highlight .lineno{color:#aaa;display:inline-block;padding:0 .75rem 0 .25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.post{padding:3rem 0}.post-info{color:#aaa;font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;letter-spacing:0.5px;text-align:center}.post-info span{font-style:italic}.post-title{color:#353535;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:4rem;margin:1rem 0;text-align:center}.post-line{border-top:0.4rem solid #353535;display:block;margin:0 auto 3rem;width:4rem}.post p{margin:0 0 1rem;text-align:justify}.post a:hover{text-decoration:underline}.post img{margin:0 auto 0.5rem}.post img+em{color:#aaa;display:block;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:0.9rem;font-style:normal;text-align:center}.post img.emoji{display:inline-block;left:0;transform:none;width:1rem;height:1rem;vertical-align:text-top;padding:0;margin:0}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:#f00}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}.container{margin:0 auto;max-width:800px;width:80%}main,footer,.nav-container{display:block;margin:0 auto;max-width:800px;width:80%}.nav{box-shadow:0 2px 2px -2px rgba(0,0,0,0.2);overflow:auto}.nav-container{margin:1rem auto;position:relative;text-align:center}.nav-title{-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;transition:all 0.2s ease-out;color:#555;display:inline-block;margin:0;padding-right:.2rem}.nav-title:hover,.nav-title:focus{opacity:.6}.nav ul{list-style-type:none;margin:1rem 0 0;padding:0;text-align:center}.nav li{-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;transition:all 0.2s ease-out;color:#555;display:inline-block;opacity:.6;padding:0 2rem 0 0}.nav li:last-child{padding-right:0}.nav li:hover,.nav li:focus{opacity:1}.nav a{color:#555;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif}@media (min-width: 600px){.nav-container{text-align:left}.nav ul{bottom:0;position:absolute;right:0}}footer{font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;padding:2rem 0;text-align:center}footer span{color:#555;font-size:.8rem}.pagination{border-top:0.5px solid #e5e5e5;font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;padding-top:2rem;position:relative;text-align:center}.pagination span{color:#353535;font-size:1.1rem}.pagination .top{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#555;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:1.1rem;opacity:.6}.pagination .top:hover{opacity:1}.pagination .arrow{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#555;position:absolute}.pagination .arrow:hover,.pagination .arrow:focus{opacity:.6;text-decoration:none}.pagination .left{left:0}.pagination .right{right:0}.catalogue-item{border-bottom:1px solid #e5e5e5;color:#555;display:inline-block;padding:2rem 0}.catalogue-item:hover .catalogue-line,.catalogue-item:focus .catalogue-line{width:5rem}.catalogue-item:last-child{border:0}.catalogue-time{color:#aaa;font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;letter-spacing:.5px}.catalogue-title{color:#353535;display:block;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:2rem;font-weight:700;margin:.5rem 0}.catalogue-line{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;border-top:0.2rem solid #353535;display:block;width:2rem} +*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;line-height:1.5}html,body{color:#555;background-color:#fff;margin:0;padding:0}html{font-family:"Libre Baskerville","Times New Roman",Times,serif;font-size:14px;overflow-y:scroll}@media (min-width: 600px){html{font-size:16px}}body{-webkit-text-size-adjust:100%}h1,h2,h3,h4,h5,h6{color:#353535;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;line-height:normal}a{color:#4a9ae1;text-decoration:none}blockquote{border-left:0.25rem solid #e5e5e5;color:#979797;margin:.8rem 0;padding:.5rem 1rem}blockquote p:last-child{margin-bottom:0}@media (min-width: 600px){blockquote{padding:0 5rem 0 1.25rem}}img{display:block;margin:0 0 1rem;max-width:100%}td{vertical-align:top}pre,code{font-family:Menlo,Monaco,monospace}code{background-color:#f9f9f9;border-radius:3px;color:#bf616a;font-size:85%;padding:.25em .5em;white-space:pre-wrap}pre{margin:0 0 1rem}pre code{background-color:transparent;color:inherit;font-size:100%;padding:0}.highlight{background-color:#f9f9f9;border-radius:3px;line-height:1.4;margin:0 0 1rem;padding:1rem}.highlight pre{margin-bottom:0;overflow-x:auto}.highlight .lineno{color:#aaa;display:inline-block;padding:0 .75rem 0 .25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.post{padding:3rem 0}.post-info{color:#aaa;font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;letter-spacing:0.5px;text-align:center}.post-info span{font-style:italic}.post-title{color:#353535;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:4rem;margin:1rem 0;text-align:center}.post-line{border-top:0.4rem solid #353535;display:block;margin:0 auto 3rem;width:4rem}.post p{margin:0 0 1rem;text-align:justify}.post a:hover{text-decoration:underline}.post img{margin:0 auto 0.5rem}.post img+em{color:#aaa;display:block;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:0.9rem;font-style:normal;text-align:center}.post img.emoji{display:inline-block;left:0;transform:none;width:1rem;height:1rem;vertical-align:text-top;padding:0;margin:0}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:#f00}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}.container{margin:0 auto;max-width:800px;width:80%}main,footer,.nav-container{display:block;margin:0 auto;max-width:800px;width:80%}.nav{box-shadow:0 2px 2px -2px rgba(0,0,0,0.2);overflow:auto}.nav-container{margin:1rem auto;position:relative;text-align:center}.nav-title{-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;transition:all 0.2s ease-out;color:#555;display:inline-block;margin:0;padding-right:.2rem}.nav-title:hover,.nav-title:focus{opacity:.6}.nav ul{list-style-type:none;margin:1rem 0 0;padding:0;text-align:center}.nav li{-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;transition:all 0.2s ease-out;color:#555;display:inline-block;opacity:.6;padding:0 2rem 0 0}.nav li:last-child{padding-right:0}.nav li:hover,.nav li:focus{opacity:1}.nav a{color:#555;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif}@media (min-width: 600px){.nav-container{text-align:left}.nav ul{bottom:0;position:absolute;right:0}}footer{font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;padding:2rem 0;text-align:center}footer span{color:#555;font-size:.8rem}.pagination{border-top:0.5px solid #e5e5e5;font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;padding-top:2rem;position:relative;text-align:center}.pagination span{color:#353535;font-size:1.1rem}.pagination .top{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#555;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:1.1rem;opacity:.6}.pagination .top:hover{opacity:1}.pagination .arrow{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;color:#555;position:absolute}.pagination .arrow:hover,.pagination .arrow:focus{opacity:.6;text-decoration:none}.pagination .left{left:0}.pagination .right{right:0}.catalogue-item{border-bottom:1px solid #e5e5e5;color:#555;display:block;padding:2rem 0}.catalogue-item:hover .catalogue-line,.catalogue-item:focus .catalogue-line{width:5rem}.catalogue-item:last-child{border:0}.catalogue-time{color:#aaa;font-family:Palatino,"Palatino LT STD","Palatino Linotype","Book Antiqua","Georgia",serif;letter-spacing:.5px}.catalogue-title{color:#353535;display:block;font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:2rem;font-weight:700;margin:.5rem 0}.catalogue-line{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;border-top:0.2rem solid #353535;display:block;width:2rem} diff --git a/resources/_gen/assets/scss/scss/tale.scss_5ad6f408b0e3e473c748aac88af0ea18.content b/resources/_gen/assets/scss/scss/tale.scss_5ad6f408b0e3e473c748aac88af0ea18.content new file mode 100644 index 00000000..9c643f66 --- /dev/null +++ b/resources/_gen/assets/scss/scss/tale.scss_5ad6f408b0e3e473c748aac88af0ea18.content @@ -0,0 +1,522 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + line-height: 1.5; } + +html, +body { + color: #555; + background-color: #fff; + margin: 0; + padding: 0; } + +html { + font-family: "Libre Baskerville", "Times New Roman", Times, serif; + font-size: 14px; + overflow-y: scroll; } + @media (min-width: 600px) { + html { + font-size: 16px; } } + +body { + -webkit-text-size-adjust: 100%; } + +h1, +h2, +h3, +h4, +h5, +h6 { + color: #353535; + font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + line-height: normal; } + +a { + color: #4a9ae1; + text-decoration: none; } + +blockquote { + border-left: 0.25rem solid #e5e5e5; + color: #979797; + margin: .8rem 0; + padding: .5rem 1rem; } + blockquote p:last-child { + margin-bottom: 0; } + @media (min-width: 600px) { + blockquote { + padding: 0 5rem 0 1.25rem; } } + +img { + display: block; + margin: 0 0 1rem; + max-width: 100%; } + +td { + vertical-align: top; } + +pre, +code { + font-family: Menlo, Monaco, monospace; } + +code { + background-color: #f9f9f9; + border-radius: 3px; + color: #bf616a; + font-size: 85%; + padding: .25em .5em; + white-space: pre-wrap; } + +pre { + margin: 0 0 1rem; } + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; } + +.highlight { + background-color: #f9f9f9; + border-radius: 3px; + line-height: 1.4; + margin: 0 0 1rem; + padding: 1rem; } + .highlight pre { + margin-bottom: 0; + overflow-x: auto; } + .highlight .lineno { + color: #aaa; + display: inline-block; + padding: 0 .75rem 0 .25rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } + +.post { + padding: 3rem 0; } + .post-info { + color: #aaa; + font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", "Georgia", serif; + letter-spacing: 0.5px; + text-align: center; } + .post-info span { + font-style: italic; } + .post-title { + color: #353535; + font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 4rem; + margin: 1rem 0; + text-align: center; } + .post-line { + border-top: 0.4rem solid #353535; + display: block; + margin: 0 auto 3rem; + width: 4rem; } + .post p { + margin: 0 0 1rem; + text-align: justify; } + .post a:hover { + text-decoration: underline; } + .post img { + margin: 0 auto 0.5rem; } + .post img + em { + color: #aaa; + display: block; + font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 0.9rem; + font-style: normal; + text-align: center; } + .post img.emoji { + display: inline-block; + left: 0; + transform: none; + width: 1rem; + height: 1rem; + vertical-align: text-top; + padding: 0; + margin: 0; } + +.highlight .hll { + background-color: #ffc; } + +.highlight .c { + color: #999; } + +/* Comment */ +.highlight .err { + color: #a00; + background-color: #faa; } + +/* Error */ +.highlight .k { + color: #069; } + +/* Keyword */ +.highlight .o { + color: #555; } + +/* Operator */ +.highlight .cm { + color: #09f; + font-style: italic; } + +/* Comment.Multiline */ +.highlight .cp { + color: #099; } + +/* Comment.Preproc */ +.highlight .c1 { + color: #999; } + +/* Comment.Single */ +.highlight .cs { + color: #999; } + +/* Comment.Special */ +.highlight .gd { + background-color: #fcc; + border: 1px solid #c00; } + +/* Generic.Deleted */ +.highlight .ge { + font-style: italic; } + +/* Generic.Emph */ +.highlight .gr { + color: #f00; } + +/* Generic.Error */ +.highlight .gh { + color: #030; } + +/* Generic.Heading */ +.highlight .gi { + background-color: #cfc; + border: 1px solid #0c0; } + +/* Generic.Inserted */ +.highlight .go { + color: #aaa; } + +/* Generic.Output */ +.highlight .gp { + color: #009; } + +/* Generic.Prompt */ +/* Generic.Strong */ +.highlight .gu { + color: #030; } + +/* Generic.Subheading */ +.highlight .gt { + color: #9c6; } + +/* Generic.Traceback */ +.highlight .kc { + color: #069; } + +/* Keyword.Constant */ +.highlight .kd { + color: #069; } + +/* Keyword.Declaration */ +.highlight .kn { + color: #069; } + +/* Keyword.Namespace */ +.highlight .kp { + color: #069; } + +/* Keyword.Pseudo */ +.highlight .kr { + color: #069; } + +/* Keyword.Reserved */ +.highlight .kt { + color: #078; } + +/* Keyword.Type */ +.highlight .m { + color: #f60; } + +/* Literal.Number */ +.highlight .s { + color: #d44950; } + +/* Literal.String */ +.highlight .na { + color: #4f9fcf; } + +/* Name.Attribute */ +.highlight .nb { + color: #366; } + +/* Name.Builtin */ +.highlight .nc { + color: #0a8; } + +/* Name.Class */ +.highlight .no { + color: #360; } + +/* Name.Constant */ +.highlight .nd { + color: #99f; } + +/* Name.Decorator */ +.highlight .ni { + color: #999; } + +/* Name.Entity */ +.highlight .ne { + color: #c00; } + +/* Name.Exception */ +.highlight .nf { + color: #c0f; } + +/* Name.Function */ +.highlight .nl { + color: #99f; } + +/* Name.Label */ +.highlight .nn { + color: #0cf; } + +/* Name.Namespace */ +.highlight .nt { + color: #2f6f9f; } + +/* Name.Tag */ +.highlight .nv { + color: #033; } + +/* Name.Variable */ +.highlight .ow { + color: #000; } + +/* Operator.Word */ +.highlight .w { + color: #bbb; } + +/* Text.Whitespace */ +.highlight .mf { + color: #f60; } + +/* Literal.Number.Float */ +.highlight .mh { + color: #f60; } + +/* Literal.Number.Hex */ +.highlight .mi { + color: #f60; } + +/* Literal.Number.Integer */ +.highlight .mo { + color: #f60; } + +/* Literal.Number.Oct */ +.highlight .sb { + color: #c30; } + +/* Literal.String.Backtick */ +.highlight .sc { + color: #c30; } + +/* Literal.String.Char */ +.highlight .sd { + color: #c30; + font-style: italic; } + +/* Literal.String.Doc */ +.highlight .s2 { + color: #c30; } + +/* Literal.String.Double */ +.highlight .se { + color: #c30; } + +/* Literal.String.Escape */ +.highlight .sh { + color: #c30; } + +/* Literal.String.Heredoc */ +.highlight .si { + color: #a00; } + +/* Literal.String.Interpol */ +.highlight .sx { + color: #c30; } + +/* Literal.String.Other */ +.highlight .sr { + color: #3aa; } + +/* Literal.String.Regex */ +.highlight .s1 { + color: #c30; } + +/* Literal.String.Single */ +.highlight .ss { + color: #fc3; } + +/* Literal.String.Symbol */ +.highlight .bp { + color: #366; } + +/* Name.Builtin.Pseudo */ +.highlight .vc { + color: #033; } + +/* Name.Variable.Class */ +.highlight .vg { + color: #033; } + +/* Name.Variable.Global */ +.highlight .vi { + color: #033; } + +/* Name.Variable.Instance */ +.highlight .il { + color: #f60; } + +/* Literal.Number.Integer.Long */ +.css .o, +.css .o + .nt, +.css .nt + .nt { + color: #999; } + +.container { + margin: 0 auto; + max-width: 800px; + width: 80%; } + +main, +footer, +.nav-container { + display: block; + margin: 0 auto; + max-width: 800px; + width: 80%; } + +.nav { + box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2); + overflow: auto; } + .nav-container { + margin: 1rem auto; + position: relative; + text-align: center; } + .nav-title { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + color: #555; + display: inline-block; + margin: 0; + padding-right: .2rem; } + .nav-title:hover, .nav-title:focus { + opacity: .6; } + .nav ul { + list-style-type: none; + margin: 1rem 0 0; + padding: 0; + text-align: center; } + .nav li { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + color: #555; + display: inline-block; + opacity: .6; + padding: 0 2rem 0 0; } + .nav li:last-child { + padding-right: 0; } + .nav li:hover, .nav li:focus { + opacity: 1; } + .nav a { + color: #555; + font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; } + +@media (min-width: 600px) { + .nav-container { + text-align: left; } + .nav ul { + bottom: 0; + position: absolute; + right: 0; } } + +footer { + font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", "Georgia", serif; + padding: 2rem 0; + text-align: center; } + footer span { + color: #555; + font-size: .8rem; } + +.pagination { + border-top: 0.5px solid #e5e5e5; + font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", "Georgia", serif; + padding-top: 2rem; + position: relative; + text-align: center; } + .pagination span { + color: #353535; + font-size: 1.1rem; } + .pagination .top { + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + color: #555; + font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 1.1rem; + opacity: .6; } + .pagination .top:hover { + opacity: 1; } + .pagination .arrow { + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + color: #555; + position: absolute; } + .pagination .arrow:hover, .pagination .arrow:focus { + opacity: .6; + text-decoration: none; } + .pagination .left { + left: 0; } + .pagination .right { + right: 0; } + +.catalogue-item { + border-bottom: 1px solid #e5e5e5; + color: #555; + display: block; + padding: 2rem 0; } + .catalogue-item:hover .catalogue-line, + .catalogue-item:focus .catalogue-line { + width: 5rem; } + .catalogue-item:last-child { + border: 0; } + +.catalogue-time { + color: #aaa; + font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", "Georgia", serif; + letter-spacing: .5px; } + +.catalogue-title { + color: #353535; + display: block; + font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 2rem; + font-weight: 700; + margin: .5rem 0; } + +.catalogue-line { + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + border-top: 0.2rem solid #353535; + display: block; + width: 2rem; } + +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/tale.scss_5ad6f408b0e3e473c748aac88af0ea18.json b/resources/_gen/assets/scss/scss/tale.scss_5ad6f408b0e3e473c748aac88af0ea18.json new file mode 100644 index 00000000..28c014b0 --- /dev/null +++ b/resources/_gen/assets/scss/scss/tale.scss_5ad6f408b0e3e473c748aac88af0ea18.json @@ -0,0 +1 @@ +{"Target":"css/style.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/static/css/fonts.css b/static/css/fonts.css new file mode 100644 index 00000000..141d32a7 --- /dev/null +++ b/static/css/fonts.css @@ -0,0 +1,41 @@ +/* libre-baskerville-regular - latin */ +@font-face { + font-family: 'Libre Baskerville'; + font-style: normal; + font-weight: 400; + src: url('../fonts/libre-baskerville-v7-latin-regular.eot'); /* IE9 Compat Modes */ + src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), + url('../fonts/libre-baskerville-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/libre-baskerville-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/libre-baskerville-v7-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../fonts/libre-baskerville-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/libre-baskerville-v7-latin-regular.svg#LibreBaskerville') format('svg'); /* Legacy iOS */ +} + +/* libre-baskerville-700 - latin */ +@font-face { + font-family: 'Libre Baskerville'; + font-style: normal; + font-weight: 700; + src: url('../fonts/libre-baskerville-v7-latin-700.eot'); /* IE9 Compat Modes */ + src: local('Libre Baskerville Bold'), local('LibreBaskerville-Bold'), + url('../fonts/libre-baskerville-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/libre-baskerville-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/libre-baskerville-v7-latin-700.woff') format('woff'), /* Modern Browsers */ + url('../fonts/libre-baskerville-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/libre-baskerville-v7-latin-700.svg#LibreBaskerville') format('svg'); /* Legacy iOS */ +} + +/* libre-baskerville-italic - latin */ +@font-face { + font-family: 'Libre Baskerville'; + font-style: italic; + font-weight: 400; + src: url('../fonts/libre-baskerville-v7-latin-italic.eot'); /* IE9 Compat Modes */ + src: local('Libre Baskerville Italic'), local('LibreBaskerville-Italic'), + url('../fonts/libre-baskerville-v7-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/libre-baskerville-v7-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/libre-baskerville-v7-latin-italic.woff') format('woff'), /* Modern Browsers */ + url('../fonts/libre-baskerville-v7-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/libre-baskerville-v7-latin-italic.svg#LibreBaskerville') format('svg'); /* Legacy iOS */ +} diff --git a/static/fonts/libre-baskerville-v7-latin-700.eot b/static/fonts/libre-baskerville-v7-latin-700.eot new file mode 100644 index 00000000..b99bedcb Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-700.eot differ diff --git a/static/fonts/libre-baskerville-v7-latin-700.svg b/static/fonts/libre-baskerville-v7-latin-700.svg new file mode 100644 index 00000000..2ebde494 --- /dev/null +++ b/static/fonts/libre-baskerville-v7-latin-700.svg @@ -0,0 +1,443 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/fonts/libre-baskerville-v7-latin-700.ttf b/static/fonts/libre-baskerville-v7-latin-700.ttf new file mode 100644 index 00000000..20c68971 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-700.ttf differ diff --git a/static/fonts/libre-baskerville-v7-latin-700.woff b/static/fonts/libre-baskerville-v7-latin-700.woff new file mode 100644 index 00000000..11e39d57 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-700.woff differ diff --git a/static/fonts/libre-baskerville-v7-latin-700.woff2 b/static/fonts/libre-baskerville-v7-latin-700.woff2 new file mode 100644 index 00000000..bcaee8bf Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-700.woff2 differ diff --git a/static/fonts/libre-baskerville-v7-latin-italic.eot b/static/fonts/libre-baskerville-v7-latin-italic.eot new file mode 100644 index 00000000..36fb1b06 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-italic.eot differ diff --git a/static/fonts/libre-baskerville-v7-latin-italic.svg b/static/fonts/libre-baskerville-v7-latin-italic.svg new file mode 100644 index 00000000..638670c5 --- /dev/null +++ b/static/fonts/libre-baskerville-v7-latin-italic.svg @@ -0,0 +1,482 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/fonts/libre-baskerville-v7-latin-italic.ttf b/static/fonts/libre-baskerville-v7-latin-italic.ttf new file mode 100644 index 00000000..64778f33 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-italic.ttf differ diff --git a/static/fonts/libre-baskerville-v7-latin-italic.woff b/static/fonts/libre-baskerville-v7-latin-italic.woff new file mode 100644 index 00000000..98aa98a8 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-italic.woff differ diff --git a/static/fonts/libre-baskerville-v7-latin-italic.woff2 b/static/fonts/libre-baskerville-v7-latin-italic.woff2 new file mode 100644 index 00000000..98818948 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-italic.woff2 differ diff --git a/static/fonts/libre-baskerville-v7-latin-regular.eot b/static/fonts/libre-baskerville-v7-latin-regular.eot new file mode 100644 index 00000000..9cf3f9a1 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-regular.eot differ diff --git a/static/fonts/libre-baskerville-v7-latin-regular.svg b/static/fonts/libre-baskerville-v7-latin-regular.svg new file mode 100644 index 00000000..5e483f25 --- /dev/null +++ b/static/fonts/libre-baskerville-v7-latin-regular.svg @@ -0,0 +1,450 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/fonts/libre-baskerville-v7-latin-regular.ttf b/static/fonts/libre-baskerville-v7-latin-regular.ttf new file mode 100644 index 00000000..71223c61 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-regular.ttf differ diff --git a/static/fonts/libre-baskerville-v7-latin-regular.woff b/static/fonts/libre-baskerville-v7-latin-regular.woff new file mode 100644 index 00000000..e31c31ad Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-regular.woff differ diff --git a/static/fonts/libre-baskerville-v7-latin-regular.woff2 b/static/fonts/libre-baskerville-v7-latin-regular.woff2 new file mode 100644 index 00000000..46063559 Binary files /dev/null and b/static/fonts/libre-baskerville-v7-latin-regular.woff2 differ diff --git a/static/js/darkmode.js b/static/js/darkmode.js new file mode 100644 index 00000000..8161f9a5 --- /dev/null +++ b/static/js/darkmode.js @@ -0,0 +1,65 @@ +"use strict"; + +const LOCALSTORAGE_KEY = "color-scheme"; +const LIGHT_CLASS = "light"; +let mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); + +// true means "dark scheme", false means "light scheme". Ugly, bit simple. +function storedToBool(s) { + if (s === "dark") { + return true; + } else if (s === "light") { + return false; + } else { + return null; + } +} + +function ensureScheme(desiredScheme) { + let osScheme = mediaQuery.matches; + + // Only store the preference if it's not the same as the OS one. + if (desiredScheme === osScheme) { + localStorage.removeItem(LOCALSTORAGE_KEY); + } else { + localStorage.setItem(LOCALSTORAGE_KEY, desiredScheme ? "dark" : "light"); + } + + if (desiredScheme) { + document.documentElement.classList.remove(LIGHT_CLASS); + } else { + document.documentElement.classList.add(LIGHT_CLASS); + } +} + +function initDarkMode() { + let storedScheme = storedToBool(localStorage.getItem(LOCALSTORAGE_KEY)); + let osScheme = mediaQuery.matches; + + // When the class of the document element is changed from a script running in the + // element, no CSS transition defined on the changed properties takes place. + ensureScheme(storedScheme === null ? osScheme : storedScheme); + mediaQuery.addEventListener("change", osDarkModeChanged); +} + +function osDarkModeChanged(query) { + let osScheme = query.matches; + let pageScheme = !document.documentElement.classList.contains(LIGHT_CLASS); + + // If the current preference is the same as that of the OS, we assume that the user also wants + // to change the color scheme of the web page. If not, we assume that they consciously overrode + // the OS and we don't change anything. + if (pageScheme != osScheme) { + ensureScheme(!pageScheme); + } +} + +function toggleDarkMode() { + // The easiest is to decide based on the current color scheme. + let currentScheme = !document.documentElement.classList.contains(LIGHT_CLASS); + ensureScheme(!currentScheme); +} + +// Doing this in an onload handler would let the initial color appear for a +// split second. +initDarkMode(); diff --git a/static/js/toc.js b/static/js/toc.js new file mode 100644 index 00000000..7229c045 --- /dev/null +++ b/static/js/toc.js @@ -0,0 +1,63 @@ +"use strict"; + +let oldWidth = -1, oldHeight = -1; + +function measureToc() { + if (window.innerWidth === oldWidth && window.innerHeight === oldHeight) { + // In addition to being a bit of optimization, this clause somehow prevents triggering a + // bug in Firefox 98.2.0 on Android that makes the stickiness of the table of contents + // wonky after scrolling to the bottom, then scrolling up. + return; + } + + oldWidth = window.innerWidth; + oldHeight = window.innerHeight; + + let tocContainer = document.getElementById("tocContainer"); + let tocTitle = document.getElementById("tocTitle"); + let tocCollapsible = document.getElementById("tocCollapsible"); + + // Set relevant elements to automatic sizing. + tocContainer.style.width = "fit-content"; + tocCollapsible.style.width = "fit-content"; + tocCollapsible.style.height = "fit-content"; + + // Apparently, this call is necessary so that the CSS properties set above take effect. + requestAnimationFrame(() => { + // These properties apparently round to the nearest integer but rounding down would make + // them wrap text differently than when autosizing. Add a pixel because it's better to wrap + // too little than to wrap too much, + let titleWidth = tocTitle.offsetWidth + 1; + let collapsibleWidth = tocCollapsible.offsetWidth + 1; + let collapsibleHeight = tocCollapsible.offsetHeight + 1; + + // Make sure the TOC width cannot shrink under that of the title. Sadly, + // calc() does not have min() / max() operators. + let clampedCollapsibleWidth = Math.max(collapsibleWidth, titleWidth); + + tocContainer.style.setProperty("--measured-title-width", titleWidth + "px"); + tocContainer.style.setProperty("--measured-expanded-width", clampedCollapsibleWidth + "px"); + tocCollapsible.style.setProperty("--measured-expanded-width", clampedCollapsibleWidth + "px"); + tocCollapsible.style.setProperty("--measured-height", collapsibleHeight + "px"); + + tocContainer.style.removeProperty("width"); + tocCollapsible.style.removeProperty("width"); + tocCollapsible.style.removeProperty("height"); + }); +} + +let resizeTimeout = null; + +function measureTocAfterResize() { + // Chrome sometimes does not finish layout when the resize event handler is called, so wait a + // bit before recalculating sizes. This does not usually result in weird visual effects because + // it's really hard to resize a window while hovering over the table of contents so we can + // assume that it's closed when the measurement is running. + if (resizeTimeout != null) { + clearTimeout(resizeTimeout); + } + resizeTimeout = setTimeout(measureToc, 200); +} + +window.addEventListener("load", measureToc); +window.addEventListener("resize", measureTocAfterResize); diff --git a/theme.toml b/theme.toml index 285421c5..5e56938e 100644 --- a/theme.toml +++ b/theme.toml @@ -8,7 +8,7 @@ description = "A port of the Tale theme for Hugo. Tale is a minimal Jekyll theme homepage = "https://github.com/EmielH/tale-hugo" tags = ["minimal", "clean", "responsive", "simple", "personal", "blog", "starter", "light", "typography"] features = ["pagination"] -min_version = "0.43" +min_version = "0.50" [author] name = "Emiel Hollander"