Commit 3c9c2737 authored by julientaq's avatar julientaq
Browse files

removed cookbook, added journal artickes

parent 759f0e16
......@@ -49,9 +49,9 @@ talkyardScriptUrl = "https://c1.ty-cdn.net/-/talkyard-comments.min.js"
url = "/documentation/"
weight= 2
[[menu.main]]
identifier = "cookbook"
name = "Cook book"
url = "/cookbook/"
weight= 3
# [[menu.main]]
# identifier = "cookbook"
# name = "Cook book"
# url = "/cookbook/"
# weight= 3
---
title: "Build An Index With Pagedjs"
date: 2020-02-14T15:40:08+01:00
draft: false
author: "Julie Blanc"
class: cookbook
intro: "Indexing is not an easy task. But what if we could automatize a bit the whole experience, on the export? Here is how you can do it with Paged.js"
tags:
- index
- guide
- paged.js
---
## Preparing your HTML
In the simplest terms, a book index is simply a key to locating information contained in a book. The main idea of the book index is to help the reader find information quickly and easily. It is not a way to locate in the book all the paragraph where the word "music" appears but to locate the places in the book where the word music is "revealing" in relation to the content. In this way, create an index is a semantic work that cannot be done automatically.
When you think your content is revelant and need to be in the index, simply add a span around the content:
```HTML
<p>General definitions of <span class="book-index" data-book-index="music">music</span> include common elements such as pitch, rhythm, dynamics, and the sonic qualities of timbre and texture.</p>
```
Your span must contain at least two elements:
- **a class**: this class is common to all index span elements of your document, you can name it as you wish
- **a data attribut**: this data attribut must be named `data-book-index`, it indicates the word(s) that will appear in the index
- you can also add an id if you want but it's not required
About the data attribute:
- all data attributes containing the same word will be combined in a single line in the index, so you can use the same data attribute several times in your document
- it is possible to use spaces, capital letters and dashes in the data attribute, like this for example: `data-book-index="Wolfgang Amadeus Mozart"`
- it is also possible to format the text with the `<em>` en `<i>` elements (only): `data-book-index="<em>String Quartet in C major</em>"`
Finally, you must add somewhere in your HTML an element in which the book index will be generated. It can be a section or a div but it must be indicated by an id (that you name as you wish):
```HTML
<div id="book-index"></div>
```
## Use the script with paged.js
1. Add the `async` property to the paged.js script:
* if you use paged.js with npm: `<script async src="http://localhost:9090/dist/paged.polyfill.js"></script>`
* if you use the online script of paged.js: `<script async src="http://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>`
2. Add the book index script:
```html
<script src="js/createIndex.js" type="text/javascript"></script>
```
3. Call the book index script:
The book index need to be generated before that paged.js fragmented the content into pages. You need to the hook `before` to call the script.
Add this code in the `head` of you html document:
```html
<script>
window.PagedConfig = {
before: function () {
createIndex({
spanClassIndex: 'book-index',
indexElement: '#book-index',
alphabet: true
});
}
};
</script>
```
4. Use the print CSS properties in your stylesheet file to target the pages where the index elements appears:
```CSS
.link-page a::after{ content: target-counter(attr(href), page); }
.link-page::after{ content: ", "; }
.link-page:last-of-type::after{ content: none; }
.index-value::after{ content: " – "; }
```
## Configuring the script
* `spanClassIndex`: define the id element where the toc list will be create
* `indexElement`: define the id element where the toc list will be create
* `alphabet`: choose if you want the alphabetical elements (`true`) or not (`false`)
## Styling the book index
The script generates a list whith items you can style. Here is an example of a book index generated:
{{< figure src="../img/example-index.png" alt="Exemple of a generated book index">}}
```HTML
<ul id="list-index-generated">
<li class="list-alphabet-element" id="alphabet-element-A">A</li>
<li class="list-index-element" data-list-index="Apple">
<span class="index-value">Apple</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-10"></a></span>
<span class="link-page"><a href="#book-index-23"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Apricot">
<span class="index-value">Apricot</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-15"></a></span>
<span class="link-page"><a href="#book-index-35"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Avocado">
<span class="index-value">Avocado</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-19"></a></span>
</span>
</li>
<li class="list-alphabet-element" id="alphabet-element-B">B</li>
<li class="list-index-element" data-list-index="Banana">
<span class="index-value">Banana</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-2"></a></span>
<span class="link-page"><a href="#book-index-38"></a></span>
<span class="link-page"><a href="#book-index-12"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Blackberry">
<span class="index-value">Blackberry</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-17"></a></span>
<span class="link-page"><a href="#book-index-24"></a></span>
</span>
</li>
<li class="list-alphabet-element" id="alphabet-element-C">C</li>
<li class="list-index-element" data-list-index="Cherry">
<span class="index-value">Cherry</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-32"></a></span>
<span class="link-page"><a href="#book-index-27"></a></span>
</span>
</li>
<li class="list-index-element" data-list-index="Coconut">
<span class="index-value">Coconut</span>
<span class="links-pages">
<span class="link-page"><a href="#book-index-41"></a></span>
<span class="link-page"><a href="#book-index-8"></a></span>
</span>
</li>
</ul>
```
An example of CSS to styling the book index:
{{< figure src="../img/example-index-styled.png" alt="Exemple of a generated and styled book index">}}
```CSS
#list-index-generated{
list-style-type: none;
}
.list-alphabet-element{
font-weight: bold;
padding-top: 18px;
padding-bottom: 9px;
font-family: Arial, Helvetica, sans-serif;
}
.index-value{
display: inline-block;
min-width: 120px;
}
.index-value:first-letter{ text-transform: uppercase; }
.index-value::after{ content: "none"; }
.link-page a{
text-decoration: none;
color: currentColor;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
```
......@@ -4,7 +4,7 @@ date: 2020-02-14T11:19:56+01:00
draft: false
class:
intro: "With the upcoming W3C workshop on CSS print in Prague, we put together this position paper. If you never heard of Paged.js, it’s a pretty good start."
author: "Julie & Julien"
author: "the Paged.js folks"
---
# Paged.js
......
......@@ -7,6 +7,11 @@ date: 2019-12-12T15:56:54+01:00
baseline: "the library that prints the web"
header: "tryout"
intro: "You got some HTML content you want to make a book with, but it would takes too much time to set the ids and hyperlinks? We got you covered!"
tags:
- guide
- pagedjs
- hooks
author: "Julie Blanc"
---
......
......@@ -20,4 +20,4 @@
}}@page:first{background:var(--color-lightest-grey);@bottom-left{content: element(logo);
}@top-left{content: none;
}@top-right{content: none;
}}@media print{body{display:block;margin:0;padding:0}footer{position:running(footer);font-size:.8em;margin:0}.paginator{display:none}#print{display:none}#title{string-set:title content(text)}body{--color-body: black;widows:3;orphans:3}header{break-after:page}header #title,header .intro{text-shadow:none}#print{display:none}#tableOfContents{font-size:10pt}.list .content{grid-column:left/end;font-size:.8em}.list .content li{break-inside:avoid}main{width:unset;height:unset;margin:0;padding:0}article{padding:0;margin:0;display:block;font-size:14px}.menu{display:none}.running-head{border:0 solid transparent}.crop-marks{display:none}header .intro{margin-bottom:0}.running-head{position:running(logo);background:unset;box-shadow:none;display:block}.running-head menu{display:none}.running-head .back-home svg{width:14ch}.running-head .back-home svg path{fill:#fff}}html{scroll-behavior:smooth;background:var(--color-background)}html *{box-sizing:border-box}body{overflow-y:scroll;box-sizing:border-box;display:grid;grid-template-columns:[left] 20% [main] 60% [right] 20% [end];width:80%;grid-gap:0;padding:0;background:var(--color-background);margin:0;max-width:1000px;margin:4em auto;position:relative;z-index:0;padding:3em}article{grid-column:left/end}.crop-marks{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.crop-mark{position:absolute;border:solid var(--color-cropmark)}.crop-mark.vertical{position:absolute;top:-15px;left:20px;right:20px;bottom:-15px;border-width:0 1px}.crop-mark.horizontal{position:absolute;top:20px;left:-15px;right:-15px;bottom:20px;border-width:1px 0}.paper{background:var(--color-paper);top:2px;right:2px;bottom:2px;left:2px;position:absolute;z-index:0}.paginator{margin-top:4em;padding-top:1em;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;grid-column:left/end}.paginator.both{justify-content:space-between}.paginator a{font-style:normal;background:var(--color-paper)}.paginator .previous::before,.paginator .next::before{content:"Previously ";display:block;font-family:var(--font-sans);text-transform:uppercase;font-size:.7em;letter-spacing:.2ch;margin-bottom:1em}.paginator .next::before{content:"Next";text-align:right}.paginator .next{border-right:2px solid #000;padding-right:2ch}.paginator .previous{border-left:2px solid #000;padding-left:2ch}.menu-call{display:none}#breadcrumbs{font-family:var(--font-sans);padding-bottom:.7em;color:var(--color-grey)}#breadcrumbs .delimiter{color:inherit;font-weight:400}#breadcrumbs a{color:inherit;background:var(--color-paper)}#breadcrumbs a::after{content:none}#breadcrumbs a:last-child{color:var(--color-body)}#breadcrumbs a:hover{color:var(--color-accent)}article .note{padding-left:1em;font-size:.8em;margin-left:2em;border-left:2px solid var(--color-primary);font-family:var(--font-sans);float:right;width:30ch}article .note :first-child{padding-top:0}article{display:grid;grid-template-columns:[left] 20% [main] 70% 10%[end]}article .top{grid-column:left/end}article #breadcrumbs{grid-column:left/end}article header{grid-column:left/end}article figure{grid-column:left/end}article p,article ul,article ol,article h1,article h2,article h3,article h4,article h5,article h6,article blockquote{grid-column:main/main}article pre,article table,article .highlight,article .talkyard-comments{grid-column:left/end}article .signature{max-width:50ch;grid-column:main/end;font-family:var(--font-sans);margin-top:2em;font-size:.8em;line-height:1.6em;color:var(--color-primary)}article .signature .name{margin-left:-3em;padding-left:3em;max-width:max-content;padding-right:.3ch}article .signature img{border:2px solid var(--color-lightest-grey);float:left;display:block;width:73px;margin-left:-90px;height:auto;margin-right:1em;border-radius:50%;padding:5px;background:var(--color-paper);margin-top:-6px}.tags{margin-top:1em;font-size:.8em}a.tag{font-family:var(--font-sans);margin-right:2ch;text-decoration:underline;font-style:normal;font-weight:400;margin-top:1em}.talkyard-comments{margin-top:100px!important}.symbol-text{font-family:var(--font-sans);font-size:1em;position:absolute;color:grey;width:20ch;background:var(--color-paper);padding-right:1em;left:-33ch;margin-top:3em;text-align:right}.symbol-text a{text-decoration:underline;white-space:nowrap}.symbol-text::before{content:" ";transform:rotate(-11deg);height:1px;background:grey;display:block;right:-52px;width:11ch;position:absolute;z-index:-1;top:11px}.list{counter-reset:doc;grid-column:main/end}.list a{text-decoration:none;background:0 0;font-style:normal}.list *{max-width:unset}.list ul ul{padding-left:2ch;border-left:1px solid var(--color-lightest-grey);margin-left:2ch}.list nav:not(".menu")>ul{margin-left:5ch}.list ul li{list-style-type:none;font-size:1em}.list ul li>ul{margin-bottom:.5em;padding-left:2ch;margin-left:1ch;border-left:1px solid var(--color-lightest-grey)}.list ul li::before{content:none}.list ul li:hover::before{color:var(--color-accent)}.list p{max-width:45ch;font-size:1em;font-family:var(--font-sans)}.list .article{margin-left:0;margin-top:3em}.list .article .meta{font-family:var(--font-sans);font-size:.7em;margin-bottom:0}.list .article .intro{font-family:var(--font-sans);font-size:1.4em;line-height:1.5;max-width:50ch;margin-top:.3em;color:var(--color-primary);padding-left:1em;border-left:2px solid;max-width:51ch;display:block;font-family:var(--font-serif);margin-left:4ch}.list .article h2{width:100%;font-size:1.5em;font-weight:400;margin-top:0;position:relative;border-color:transparent;margin-bottom:0;line-height:1.1}.list .article h2::before{content:".................................................................................................................................................";text-align:right;color:#ccc;font-size:.8em;bottom:2px;position:absolute;width:98%;padding-left:5px;letter-spacing:2px;overflow:hidden}.list .article h2 a{counter-increment:doc;position:relative;z-index:100;padding-right:.5ch;font-style:italic;line-height:1.1}.list .article h2 a span{background:var(--color-paper);display:inline;padding-right:1ch}.list .article h2 a::after{padding-left:1ch;content:counter(doc);float:right;background:var(--color-paper);font-style:normal;font-size:.8em;bottom:0;position:relative;top:.2em}.list .article .toc-emoji{float:right;position:relative;background:var(--color-paper);padding-left:1ch}.homepage{}.homepage main{}.homepage{min-height:80vh}.homepage .running-head{height:50px;display:flex;justify-content:flex-end}.homepage .running-head .menu{height:auto}.homepage .back-home{background:0 0;border:none;box-shadow:none}.homepage article{display:flex;align-content:center;justify-content:center;grid-template-columns:[left] 50% [main];grid-column:left/end;grid-gap:8ch;font-size:1em}.homepage article p{margin:0 auto;margin-bottom:0;max-width:40ch;margin-bottom:1em;text-align:center;font-size:1.5em}.homepage article a{background:0 0}.homepage .contents{flex-direction:column;display:flex;flex:1 2;justify-items:space-around}.homepage .intro-logo{width:41%;margin:0 auto 2em;display:block}.homepage article ul{list-style-type:none;text-transform:uppercase;font-size:.8em;display:flex;justify-content:center;justify-self:flex-end;margin-top:auto}.homepage article ul li::before{content:none}.homepage article ul li{letter-spacing:.2ch;display:flex;padding:0;margin:0;flex-direction:row;display:inline-block;font-family:var(--font-sans);padding:1em;text-align:center}.about .meta{display:none}.posts article{}.posts .article h2{}.documentation{counter-reset:doc}.documentation .list .content .article{}.cookbook{}@media screen and (max-width:570px){body{width:100%;padding:0}body .article{grid-template-columns:[left] 2% [main] 96% 2%[end]}body .crop-marks{}}@media screen and (max-width:1540px){.symbol-text{display:none}body{padding:1.5em;width:90%}}@media screen and (max-width:1000px){body{padding:1.5em;margin:1em;width:auto}.running-head{flex-direction:column;align-items:center;justify-content:center;height:auto;padding-top:0;width:100%;background:#fff}article{grid-template-columns:[left] 10% [main] 80% 10% [end]}.menu{width:100%}.menu ul{justify-content:space-around;padding:0}.menu ul li{margin:0 1ch}}@media screen and (max-width:767px){:root{--font-size: 16px}.homepage #paged-logo{display:block}.homepage{min-height:80vh;height:90vh;margin:5%;padding-bottom:5vh}.homepage .running-head{height:auto;border-bottom:0 solid transparent;margin-bottom:3em;justify-content:flex-start;padding-top:4em}.homepage .menu{align-items:flex-start}article{grid-template-columns:[left] 10% [main] 80% 10%[end]}body{padding:0;margin:1em;width:auto;grid-template-columns:5% [left] 5% [main] 80% [right] 5% [end] 5%}.running-head{flex-direction:column;align-items:center;justify-content:center;height:auto;padding-top:0;width:100%;background:#fff}.running-head .back-home{position:unset;background:0 0;padding-top:1em;width:100%;background:#fff;padding:1.5em 73% .5em 0}.running-head .menu-call{display:block;z-index:3000}.running-head .menu{margin-top:0;transition:all .6s;opacity:1;padding-top:0;display:flex;flex-direction:column}.running-head .menu.hide{display:none}.running-head .menu ul{padding:0;text-align:center;flex-direction:column}.running-head .menu ul li{margin:0;border-bottom:1px solid grey;padding:1em}.running-head .menu ul li:last-of-type{border-bottom:none}header{grid-column:main/main;margin-top:4em}header #title{font-size:3.25em}.symbol-text{display:none}.paginator{grid-column:main;flex-direction:column;align-items:center;font-size:1.7em}.paginator .next{width:100%;text-align:center;border:none;padding:0;margin-top:2em}.paginator .next::before{font-size:.3em;text-align:center}.paginator .previous{text-align:center;width:100%;border:none;padding:0}.paginator .previous::before{font-size:.3em;text-align:center}.paginator .alone{}footer{padding:0 5em 3em;text-align:center}footer a{white-space:pre}body .article{grid-template-columns:[left] 2% [main] 96% 2%[end]}.list{grid-column:main/main}.list ul{padding-left:0}#print{display:none}}.hide{display:none}
\ No newline at end of file
}}@media print{body{display:block;margin:0;padding:0}footer{position:running(footer);font-size:.8em;margin:0}.paginator{display:none}#print{display:none}#title{string-set:title content(text)}body{--color-body: black;widows:3;orphans:3}header{break-after:page}header #title,header .intro{text-shadow:none}#print{display:none}#tableOfContents{font-size:10pt}.list .content{grid-column:left/end;font-size:.8em}.list .content li{break-inside:avoid}main{width:unset;height:unset;margin:0;padding:0}article{padding:0;margin:0;display:block;font-size:14px}.menu{display:none}.running-head{border:0 solid transparent}.crop-marks{display:none}header .intro{margin-bottom:0}.running-head{position:running(logo);background:unset;box-shadow:none;display:block}.running-head menu{display:none}.running-head .back-home svg{width:14ch}.running-head .back-home svg path{fill:#fff}}html{scroll-behavior:smooth;background:var(--color-background)}html *{box-sizing:border-box}body{overflow-y:scroll;box-sizing:border-box;display:grid;grid-template-columns:[left] 20% [main] 60% [right] 20% [end];width:80%;grid-gap:0;padding:0;background:var(--color-background);margin:0;max-width:1000px;margin:4em auto;position:relative;z-index:0;padding:3em}article{grid-column:left/end}.crop-marks{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.crop-mark{position:absolute;border:solid var(--color-cropmark)}.crop-mark.vertical{position:absolute;top:-15px;left:20px;right:20px;bottom:-15px;border-width:0 1px}.crop-mark.horizontal{position:absolute;top:20px;left:-15px;right:-15px;bottom:20px;border-width:1px 0}.paper{background:var(--color-paper);top:2px;right:2px;bottom:2px;left:2px;position:absolute;z-index:0}.paginator{margin-top:4em;padding-top:1em;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;grid-column:left/end}.paginator.both{justify-content:space-between}.paginator a{font-style:normal;background:var(--color-paper)}.paginator .previous::before,.paginator .next::before{content:"Previously ";display:block;font-family:var(--font-sans);text-transform:uppercase;font-size:.7em;letter-spacing:.2ch;margin-bottom:1em}.paginator .next::before{content:"Next";text-align:right}.paginator .next{border-right:2px solid #000;padding-right:2ch}.paginator .previous{border-left:2px solid #000;padding-left:2ch}.menu-call{display:none}#breadcrumbs{font-family:var(--font-sans);padding-bottom:.7em;color:var(--color-grey)}#breadcrumbs .delimiter{color:inherit;font-weight:400}#breadcrumbs a{color:inherit;background:var(--color-paper)}#breadcrumbs a::after{content:none}#breadcrumbs a:last-child{color:var(--color-body)}#breadcrumbs a:hover{color:var(--color-accent)}article .note{padding-left:1em;font-size:.8em;margin-left:2em;border-left:2px solid var(--color-primary);font-family:var(--font-sans);float:right;width:30ch}article .note :first-child{padding-top:0}article{display:grid;grid-template-columns:[left] 20% [main] 70% 10%[end]}article .top{grid-column:left/end}article #breadcrumbs{grid-column:left/end}article header{grid-column:left/end}article figure{grid-column:left/end}article p,article ul,article ol,article h1,article h2,article h3,article h4,article h5,article h6,article blockquote{grid-column:main/main}article pre,article table,article .highlight,article .talkyard-comments{grid-column:left/end}article .signature{max-width:50ch;grid-column:main/end;font-family:var(--font-sans);margin-top:2em;font-size:.8em;line-height:1.6em;color:var(--color-primary)}article .signature .name{margin-left:-3em;padding-left:3em;max-width:max-content;padding-right:.3ch}article .signature img{border:2px solid var(--color-lightest-grey);float:left;display:block;width:73px;margin-left:-90px;height:auto;margin-right:1em;border-radius:50%;padding:5px;background:var(--color-paper);margin-top:-6px}.tags-wrap{margin-top:1em;font-size:.8em}a.tag{font-family:var(--font-sans);margin-right:2ch;text-decoration:underline;font-style:normal;font-weight:400;margin-top:1em}.talkyard-comments{margin-top:100px!important}.symbol-text{font-family:var(--font-sans);font-size:1em;position:absolute;color:grey;width:20ch;background:var(--color-paper);padding-right:1em;left:-33ch;margin-top:3em;text-align:right}.symbol-text a{text-decoration:underline;white-space:nowrap}.symbol-text::before{content:" ";transform:rotate(-11deg);height:1px;background:grey;display:block;right:-52px;width:11ch;position:absolute;z-index:-1;top:11px}.list{counter-reset:doc;grid-column:main/end}.list a{text-decoration:none;background:0 0;font-style:normal}.list *{max-width:unset}.list ul ul{padding-left:2ch;border-left:1px solid var(--color-lightest-grey);margin-left:2ch}.list nav:not(".menu")>ul{margin-left:5ch}.list ul li{list-style-type:none;font-size:1em}.list ul li>ul{margin-bottom:.5em;padding-left:2ch;margin-left:1ch;border-left:1px solid var(--color-lightest-grey)}.list ul li::before{content:none}.list ul li:hover::before{color:var(--color-accent)}.list p{max-width:45ch;font-size:1em;font-family:var(--font-sans)}.list .article{margin-left:0;margin-top:3em}.list .article .meta{font-family:var(--font-sans);font-size:.7em;margin-bottom:0}.list .article .intro{font-family:var(--font-sans);font-size:1.4em;line-height:1.5;max-width:50ch;margin-top:.3em;color:var(--color-primary);padding-left:1em;border-left:2px solid;max-width:51ch;display:block;font-family:var(--font-serif);margin-left:4ch}.list .article h2{width:100%;font-size:1.5em;font-weight:400;margin-top:0;position:relative;border-color:transparent;margin-bottom:0;line-height:1.1}.list .article h2::before{content:".................................................................................................................................................";text-align:right;color:#ccc;font-size:.8em;bottom:2px;position:absolute;width:98%;padding-left:5px;letter-spacing:2px;overflow:hidden}.list .article h2 a{counter-increment:doc;position:relative;z-index:100;padding-right:.5ch;font-style:italic;line-height:1.1}.list .article h2 a span{background:var(--color-paper);display:inline;padding-right:1ch}.list .article h2 a::after{padding-left:1ch;content:counter(doc);float:right;background:var(--color-paper);font-style:normal;font-size:.8em;bottom:0;position:relative;top:.2em}.list .article .toc-emoji{float:right;position:relative;background:var(--color-paper);padding-left:1ch}.homepage{}.homepage main{}.homepage{min-height:80vh}.homepage .running-head{height:50px;display:flex;justify-content:flex-end}.homepage .running-head .menu{height:auto}.homepage .back-home{background:0 0;border:none;box-shadow:none}.homepage article{display:flex;align-content:center;justify-content:center;grid-template-columns:[left] 50% [main];grid-column:left/end;grid-gap:8ch;font-size:1em}.homepage article p{margin:0 auto;margin-bottom:0;max-width:40ch;margin-bottom:1em;text-align:center;font-size:1.5em}.homepage article a{background:0 0}.homepage .contents{flex-direction:column;display:flex;flex:1 2;justify-items:space-around}.homepage .intro-logo{width:41%;margin:0 auto 2em;display:block}.homepage article ul{list-style-type:none;text-transform:uppercase;font-size:.8em;display:flex;justify-content:center;justify-self:flex-end;margin-top:auto}.homepage article ul li::before{content:none}.homepage article ul li{letter-spacing:.2ch;display:flex;padding:0;margin:0;flex-direction:row;display:inline-block;font-family:var(--font-sans);padding:1em;text-align:center}.about .meta{display:none}.posts article{}.posts .article h2{}.documentation{counter-reset:doc}.documentation .list .content .article{}.cookbook{}@media screen and (max-width:570px){body{width:100%;padding:0}body .article{grid-template-columns:[left] 2% [main] 96% 2%[end]}body .crop-marks{}}@media screen and (max-width:1540px){.symbol-text{display:none}body{padding:1.5em;width:90%}}@media screen and (max-width:1000px){body{padding:1.5em;margin:1em;width:auto}.running-head{flex-direction:column;align-items:center;justify-content:center;height:auto;padding-top:0;width:100%;background:#fff}article{grid-template-columns:[left] 10% [main] 80% 10% [end]}.menu{width:100%}.menu ul{justify-content:space-around;padding:0}.menu ul li{margin:0 1ch}}@media screen and (max-width:767px){:root{--font-size: 16px}.homepage #paged-logo{display:block}.homepage{min-height:80vh;height:90vh;margin:5%;padding-bottom:5vh}.homepage .running-head{height:auto;border-bottom:0 solid transparent;margin-bottom:3em;justify-content:flex-start;padding-top:4em}.homepage .menu{align-items:flex-start}article{grid-template-columns:[left] 10% [main] 80% 10%[end]}body{padding:0;margin:1em;width:auto;grid-template-columns:5% [left] 5% [main] 80% [right] 5% [end] 5%}.running-head{flex-direction:column;align-items:center;justify-content:center;height:auto;padding-top:0;width:100%;background:#fff}.running-head .back-home{position:unset;background:0 0;padding-top:1em;width:100%;background:#fff;padding:1.5em 73% .5em 0}.running-head .menu-call{display:block;z-index:3000}.running-head .menu{margin-top:0;transition:all .6s;opacity:1;padding-top:0;display:flex;flex-direction:column}.running-head .menu.hide{display:none}.running-head .menu ul{padding:0;text-align:center;flex-direction:column}.running-head .menu ul li{margin:0;border-bottom:1px solid grey;padding:1em}.running-head .menu ul li:last-of-type{border-bottom:none}header{grid-column:main/main;margin-top:4em}header #title{font-size:3.25em}.symbol-text{display:none}.paginator{grid-column:main;flex-direction:column;align-items:center;font-size:1.7em}.paginator .next{width:100%;text-align:center;border:none;padding:0;margin-top:2em}.paginator .next::before{font-size:.3em;text-align:center}.paginator .previous{text-align:center;width:100%;border:none;padding:0}.paginator .previous::before{font-size:.3em;text-align:center}.paginator .alone{}footer{padding:0 5em 3em;text-align:center}footer a{white-space:pre}body .article{grid-template-columns:[left] 2% [main] 96% 2%[end]}.list{grid-column:main/main}.list ul{padding-left:0}#print{display:none}}.hide{display:none}
\ No newline at end of file
{"Target":"css/main.min.78fcda30746bc23177d443bc4a646773.css","MediaType":"text/css","Data":{"Integrity":"md5-ePzaMHRrwjF31EO8SmRncw=="}}
\ No newline at end of file
{"Target":"css/main.min.e6229e0ca1616b27ea08f2b6bf4ba6d1.css","MediaType":"text/css","Data":{"Integrity":"md5-5iKeDKFhayfqCPK2v0um0Q=="}}
\ No newline at end of file
......@@ -124,7 +124,7 @@ article {
}
}
.tags {
.tags-wrap {
margin-top: 1em;
font-size: 0.8em;
}
......
......@@ -10,9 +10,9 @@
{{ if .Params.intro }}
<div class="meta">
{{ if .Params.author }}Written by <span class="author"> {{ .Params.author }} </span> {{ end }}
{{ if and .Params.author .Date }} / {{ end }}
{{ if .Params.date }} the <span class="date"> {{ dateFormat "January 2, 2006" .Date }} </span> {{ end }}
{{ if .Params.author }}Written by <span class="author"> {{ .Params.author }}</span>, {{ end }}
{{ if and .Params.author .Date }} {{ end }}
{{ if .Params.date }} the <span class="date"> {{ dateFormat "2 of january 2006" .Date }} </span> {{ end }}
<span class="intro"> {{ .Params.intro }} </span> {{ end }}
{{end}}
</a>
......
......@@ -7,7 +7,7 @@
<h1 id="title">{{ .Title }}</h1>
<p class="meta">
written by <span class="author">{{ .Params.author }}</span> on
<span class="date">{{ dateFormat "January 2, 2006" .Date }}</span>
<span class="date">{{ dateFormat "2 of January 2006" .Date }}</span>
</p>
{{ end }}
......
......@@ -10,7 +10,7 @@
</p>
*/}}
{{- if .Params.tags -}}
<p class="tags">
<p class="tags-wrap">
{{- range .Params.tags -}}
{{- $url := print "/tags/" ( . | urlize) "/" -}}
<a class="tag" href="{{- $url | relLangURL -}}">{{- . -}}</a>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment