Commit f6a6d5eb authored by julientaq's avatar julientaq
Browse files

adding tags to list pages

parent 3630be00
......@@ -7,6 +7,22 @@ theme = "pagedjs"
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
[markup.highlight]
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
# lineNos = true
lineNumbersInTable = false
noClasses = true
style = "pastie"
tabWidth = 4
[taxonomies]
# category = "categories"
tag = "tags"
[menu]
......@@ -32,14 +48,14 @@ theme = "pagedjs"
identifier = "cookbook"
name = "Cook book"
url = "/cookbook/"
weight= 2
[[menu.main]]
identifier = "codeofconduct"
name = "Code of Conduct"
url = "/code-of-conduct.html"
weight= 3
# [[menu.main]]
# identifier = "codeofconduct"
# name = "Code of Conduct"
# url = "/code-of-conduct.html"
# weight= 3
[[menu.main]]
identifier = "colophon"
name = "Colophon"
......
......@@ -2,6 +2,22 @@
title: "About"
date: 2019-11-02T00:08:22+01:00
draft: true
class: "about"
---
Paged.js logo was designed by [Anton Moglia](http://moglia.fr/) and [Julie Blanc](http://julie-blanc.fr) in a train back from [Les Rencontres de Lure](http://delure.org). Minipax, the extraordinary font used on the website was designed by Raphaël Ronot and is exclusively offered through [Velvetyne](https://www.velvetyne.fr/) type foundry. Paged.js website was designed and built by Julien Taquet thanks to the amazing [Hugo](https://gohugo.io/) static website generator. Paged.js is maintained by the nice folks of the [Cabbage Tree Labs](https://www.cabbagetreelabs.org)
\ No newline at end of file
# About Paged.js
After years of trying a lot of solutions to make books out of HTML, and frustrated by the issues we found with each one of them, we ended up by building one of our own, following some mandatory principles.
1. We’ll follow the standards of the W3C. Standards is in the DNA of what we’re doing. If we want to add some feature, we'll write down the specifications and discuss with all the members of the W3C to see how it would make sense for them and we are open to anyone who want to share their thoughs.
2. We’ll always put the community needs first: we have a [mattermost](https://mattermost.pagedmedia.org) that we use to discuss. The whole development is available through our [gitlab](https://gitlab.pagedmedia.org) and the issues are all read and answered as fast as possible.
3. Paged.js comes either as a paginated preview or as a command line interface (<small>CLI</small>) to produce the pdf.
4. Paged.js being a community driven project, we’ll make sure that the anyone feels just like at home, newcomers and old friends alike. To be sure that everyone is on the same page here, we’ll refer to the Contributor Convenant’s [Code of conduct]({{< ref "/code-of-conduct.md" >}}).
That said, we’re happy that you found us, and Welcome around :)
Paged.js was founded by [Adam Hyde](https://www.adamhyde.net) and is currently developed by [Julie Blanc](http://julie-blanc.fr), [Fred Chasen](http://fchasen.com/) and Julien Taquet at the [Cabbage Tree Labs](https://www.cabbagetreelabs.org). This project will end when the browsers will be done with the implementation of the W3C specification for print.
Paged.js logo was designed by the lovely [Anton Moglia](http://moglia.fr/) and our own awesome [Julie Blanc](http://julie-blanc.fr) in a train back from this 60 years old type design event called [Les Rencontres de Lure](http://delure.org).
Minipax, the extraordinary font used on the website was designed by Raphaël Ronot and is exclusively offered through the open and independant [Velvetyne](https://www.velvetyne.fr/) type foundry.
Paged.js website was designed and built by Julien Taquet thanks to the great static website generator [Hugo](https://gohugo.io/) .
---
title: "Generated Content in Margin Boxes"
title: "Generated Content in Margin Boxes"
date: 2019-09-03T18:23:22+02:00
draft: true
part: 6
weight: 6
colorPrimary: "#aaa"
colorHeading: "white"
intro: "CSS modules for paged media add the possibility to use the `content` property in special area of the pages: the margin boxes. In addition, combinations of syntaxes and properties create elements needed to design a book: page number and running headers and footers."
---
CSS modules for paged media add the possibility to use the `content` property in special area of the pages: the margin boxes. In addition, combinations of syntaxes and properties create elements needed to design a book: page number and running headers and footers.
......@@ -32,13 +32,13 @@ You can select this margins boxes in the `@page` rules with rules such as `@top
The code below put your title in the `@top-right` margin box of all right pages:
```CSS
{{< highlight css "linenos=table, linenostart=1" >}}
@page:right {
@top-right {
content: "My title";
}
}
```
{{< / highlight >}}
List of the margin boxes:
......
......@@ -3,6 +3,9 @@ title: "First"
date: 2019-10-23T17:07:52+02:00
draft: true
intro: "Here we talk about stuff pretty interresting we’ll need to define something at some point"
tags:
- variable fonts
- baseline
---
# This is the first article
......
......@@ -2,9 +2,13 @@
title: "Humming the baseline"
date: 2019-10-25T17:07:52+02:00
draft: true
# intro: "Here we talk about stuff pretty interresting we’ll need to define something at some point"
intro: "Here we talk about stuff pretty interresting we’ll need to define something at some point"
colorPrimary: "red"
colorHeading: "yellow"
tags:
- baseline
- print
- colors
---
# This is the second article
......
footer {
display: grid;
grid-template-columns: [logo] 20% [foot] 75% [end];
grid-column-gap: 5%;
font-size: 1.2em;
grid-row-gap: 30px;
margin-top: 10em;
z-index: -1;
position: relative;
left: -40%;
font-family: var(--font-sans);
grid-column-start: start;
max-height: unset;
transform: rotate(10deg);
z-index: 3;
transition: left 0.5s;
&.show {
left: 10%;
}
p {
width: 100%;
line-height: 1.4;
}
a {
color: var(--color-primary);
margin-left: .6em;
}
.foot-content {
grid-column-start: foot;
color:darkblue;
font-family: cursive;
}
figure {
float: left;
margin-top: 0;
display: inline-block;
margin-top: 10mm;
svg {
/* --color-primary: rgba(200, 120, 84, 0.2); */
/* background: rgba(200,200,200,0.2); */
opacity: 0.8;
padding: 1em;
transform: rotate(-2deg);
/* z-index: 3; */
margin-top: -1.2em;
width: 60%;
/* box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2); */
path {
fill: darkblue;
}
&:hover {
background: rgba(200, 120, 84, 0.2);
path {
/* fill: white; */
}
}
}
figure svg {
width: 100%;
.postit {
/* padding-bottom: 3em; */
border-left-width: 0;
max-height: unset;
position: relative;
}
}
\ No newline at end of file
html {
/* background: url(http://www.emoisetbois.com/wp-content/uploads/2015/02/aratika-Parquet-EmoisetBois_V.jpg);
background-repeat: no-repeat;
background-attachment: fixed; */
* {
box-sizing: border-box;
}
}
body {
* {
box-sizing: border-box;
}
box-sizing: border-box;
display: grid;
width: calc(100vh - 4em);
grid-template-columns: [sidebar] 27vw [start] 65vw [end];
grid-gap: 3vw;
padding: 2em;
background: var(--color-background);
margin: 0;
}
.sidebar {
position: fixed;
grid-column-start: sidebar;
height: calc(100vh - 4em);
width: 15vw;
max-width: 190px;
display: flex;
flex-direction: column;
margin-bottom: 3em;
justify-content: space-between;
button {
justify-self: flex-start;
}
}
main {
&::before {
position: absolute;
top: -2em;
left: -2em;
right: -2em;
bottom: -2em;
background: var(--color-paper, white);
box-shadow: var(--shadow-main);
content: " ";
z-index: -2;
}
transform: rotate(-0.2deg);
grid-column-start: start;
grid-column-end: end;
width: 80%;
margin-top: auto;
margin-top: 5em;
position: relative;
header {
padding-bottom: 1.5em;
margin-top: -4em;
padding-top: 4em;
margin-left: -4em;
margin-right: -4em;
padding-left: 4em;
padding-right: 4em;
h1#title {
text-align: left;
max-width: 100%;
font-size: 4em;
line-height: 1.1;
text-transform: none;
}
.intro {
font-size: 1.2em;
}
}
}
article {
background: var(--color-paper);
border: 10px solid var(--color-paper);
margin: 0;
position: relative;
padding: 1em;
}
.crop-marks {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
/* cropmarks
----------------------------------------*/
.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;
}
/* footer
--------------------------------------------- */
footer {
max-width: 100%;
margin: 0 auto;
margin-top: 4em;
margin-right: 0;
font-size: 0.9em;
}
main article aside {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 3em;
a {
font-family: var(--font-sans);
color: red;
}
.previous {
&::before {
content: "← ";
}
}
.next::after {
content: " →";
}
}
html {
margin: 0;
padding: 0;
/* background: url(http://www.emoisetbois.com/wp-content/uploads/2015/02/aratika-Parquet-EmoisetBois_V.jpg);
background-repeat: no-repeat;
background-attachment: fixed; */
* {
box-sizing: border-box;
}
}
* {
body {
* {
box-sizing: border-box;
}
box-sizing: border-box;
display: grid;
grid-template-columns: [sidebar] 27vw [start] 65vw [end];
grid-gap: 3vw;
padding: 2em;
background: var(--color-background);
margin: 0;
}
body {
padding: 0;
.sidebar {
position: fixed;
grid-column-start: sidebar;
height: calc(100vh - 4em);
width: 15vw;
max-width: 190px;
display: flex;
flex-direction: column;
margin-bottom: 3em;
justify-content: space-between;
button {
justify-self: flex-start;
}
z-index: 4;
}
main {
&::before {
position: absolute;
top: -2em;
left: -2em;
right: -2em;
bottom: -2em;
background: var(--color-paper, white);
box-shadow: var(--shadow-main);
content: " ";
z-index: -2;
}
transform: rotate(0deg);
grid-column-start: start;
grid-column-end: end;
width: 80%;
margin-top: auto;
margin-top: 5em;
position: relative;
header {
padding-bottom: 1.5em;
margin-top: -4em;
padding-top: 4em;
margin-left: -4em;
margin-right: -4em;
padding-left: 4em;
padding-right: 4em;
}
}
article {
background: var(--color-paper);
border: 10px solid var(--color-paper);
margin: 0;
/* background: var(--color-background); */
position: relative;
padding: 1em;
padding-bottom: 2em;
.layout{
display: grid;
width: 100% ;
grid-template-columns: minmax(400px, 30%) 1fr;
width: calc(100vw - 3em * 2);
/* height: calc(100vh - 3em * 2); */
margin: 3em;
column-gap: 3em;
background: var(--color-background);
&::after {
background: white;
content: ' ';
display: block;
position: absolute;
height: 3em;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
}
.crop-marks {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
header {
background: var(--color-background);
align-items: center;
display: grid;
grid-template-columns: 2px repeat(4, 1fr);
grid-template-rows: 2px repeat(3, 1fr);
grid-gap: 20px;
grid-template-areas:
". . . . ."
". a a . ."
". . b b b"
". . b b b";
max-height: calc(100vh - 6em);
align-items: end;
background: var(--color-background);
z-index: 5;
/* cropmarks
----------------------------------------*/
.crop-mark {
position: absolute;
border: solid var(--color-cropmark);
}
main {
grid-column: 2;
padding-bottom: 4em;
min-height: 200vh;
background: white;
margin: 3em;
/* padding: 2em 3em ; */
position:relative;
z-index: 6;
.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;
}
.listintro {
columns: 3;
}
\ No newline at end of file
/* footer
--------------------------------------------- */
footer {
max-width: 100%;
margin: 0 auto;
margin-top: 4em;
margin-right: 0;
font-size: 0.9em;
}
main article aside {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 3em;
a {
font-family: var(--font-sans);
color: red;
}
.previous {
&::before {
content: "← ";
}
}
.next::after {
content: " →";
}
}
body {
background: var(--color-lightest-grey);
margin: 0;
padding: 0;
}
.layout {
/* width: 100% ;
grid-template-columns: minmax(400px, 30%) 1fr;
column-gap: 3em;
background: var(--color-background); */
}
.layout > header {
position: fixed;
width: 30%;
top: 3em;
left: 3em;
background: var(--color-background);
align-items: center;
display: grid;
grid-template-columns: 2px repeat(4, 1fr);
grid-template-rows: 2px repeat(3, 1fr);
grid-gap: 20px;
grid-template-areas:
". . . . ."
". a a . ."
". . b b b"
". . b b b";
max-height: calc(100vh - 6em);
align-items: end;
background: var(--color-background);
z-index: 5;
}
main {
margin-left: 35%;
min-height: 150vh;
margin: 0em 3em 3em 35%;
padding: 2em 3em;
}
article {
background: white;
padding: 2em 3em;
}
/* for the navigation between pages of the navigation */
.nav {