Commit 25e17e09 authored by julientaq's avatar julientaq
Browse files

update to styles for mobile and update content

parent 5c42f352
......@@ -10,14 +10,13 @@ theme = "pagedjs"
[markup.highlight]
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
# lineNos = true
lineNumbersInTable = false
noClasses = true
style = "pastie"
style = "perldoc"
tabWidth = 4
pygmentsUseClasses=true
[taxonomies]
# category = "categories"
......@@ -50,14 +49,3 @@ theme = "pagedjs"
url = "/cookbook/"
weight= 3
# [[menu.main]]
# identifier = "codeofconduct"
# name = "Code of Conduct"
# url = "/code-of-conduct.html"
# weight= 3
[[menu.main]]
identifier = "colophon"
name = "Colophon"
url = "/colophon/"
weight= 4
......@@ -19,7 +19,7 @@ cover: "img/1139e889a554ab3a295840.jpg" #link to the printing machine we can upd
<!-- {{<img class="print-machine" src="img/1139e889a554ab3a295840.jpg">}} -->
**paged.js** is an open source and free library to paginate content in the browser, to turn webpages in beautiful PDF. If it's your first encounter with the project, you may want to [read a bit about how it came to life](about). You may also want to [test the library in our Codepen](codepen) or [follow the documentation](doc).
**Paged.js** is an open source and free library to paginate content in the browser, to turn webpages in beautiful PDF. If it's your first encounter with the project, you may want to [read a bit about how it came to life](about). You may also want to [test the library in our Codepen](codepen) or [follow the documentation](doc).
Or maybe, you want to read the [latest news](blog/) around paged.js and CSS print.
Or maybe, you want to read the [latest news](blog/) around Paged.js and CSS print.
......@@ -7,15 +7,23 @@ class: "about"
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.
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. This project will be over when we’ll be happy with the browsers’ implementation of the W3C specification for print.
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 :)
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.
## Colophon
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).
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).
Paged.js website was designed and built by Julien Taquet thanks to the great static website generator [Hugo](https://gohugo.io/).
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/) .
The website is mainly using the Jost* font from Indestructible type and Fanwood Text from the league of moveable type, both free and open source fonts.
---
title: "Colophon"
date: 2019-10-23T17:26:17+02:00
draft: true
footer: true
---
# Colophon
Paged.js logo was designed by Anton Moglia and Julie Blanc in a train back from Les Rencontres de Lure.
Minipax, the extraordinary font used on the website was designed by Raphaël Ronot and is exclusively offered trhough [Velvetyne type foundry](http://www.velvetyne.fr)
Paged.js website was designed and built by [Julien Taquet](mailto://julien@lesvoisinsdustudio.ch) thanks to the amazing Hugo static website generator.
Paged.js is maintained by the nice folks at [Cabbage Tree Labs](https://www.cabbagetreelabs.org).
......@@ -11,6 +11,8 @@ class: documentation
---
## What is Paged.js?
Paged.js is a free and open-source library that paginates any HTML content to produce nice and print-ready PDF.
The library fragment the content, read your css print declarations and present a paginated preview in your browser that you can save as PDF.
......@@ -27,7 +29,7 @@ Since the tool is following the W3C specifications, it can adapt to any workflow
<p>Paged.js is based on the CSS standards written by the World Wide Web Consortium (W3C). Paged.js is a <span class="dt">polyfill<span class="dd">A <a href="https://en.wikipedia.org/wiki/Polyfill_(programming))">polyfill</a> is a bit of code that implements a feature on web browsers that do not support the feature</span></span> for some CSS properties made to print HTML from the browser. It can parse CSS stylesheets, and translate the declarations in HTML and CSS that a browser can understand. The print declarations (by updating them with supported styles or replacing them with JavaScript implementations) and present a paginated rendering of the HTML document using the fragmentation provided by CSS columns.</p>
The W3C CSS modules that paged.js aims to implement are the following:
The W3C CSS modules that Paged.js aims to implement are the following:
- [CSS Paged Media Module Level 3](https://www.w3.org/TR/css3-page/)
- [CSS Generated Content for Paged Media Module](https://www.w3.org/TR/css-gcpm-3/)
......@@ -37,7 +39,7 @@ The W3C CSS modules that paged.js aims to implement are the following:
## A community
The code of paged.js is open-source with a MIT license and the development is community-driven. Everyone is invited to join us! You can find the source code of paged.js on the repo of our self-hosted gitlab: https://gitlab.pagedmedia.org/tools/pagedjs
The code of Paged.js is open-source with a MIT license and the development is community-driven. Everyone is invited to join us! You can find the source code of Paged.js on the repo of our self-hosted gitlab: https://gitlab.pagedmedia.org/tools/pagedjs
We’re relying on designers and developers who want to discuss new features, ideas and bug fixes. If you’d like to participate to the conversation, you can add issues to the repo. But the easiest way to talk to us is to go to [our self-hosted chat](https://mattermost.pagedmedia.org/) and join the conversation.
......@@ -4,13 +4,13 @@ date: 2019-09-03T18:23:22+02:00
draft: true
part: 1
weight: 2
intro: "The basics to run paged.js"
intro: "The basics to run Paged.js"
cover: "images/chuncker-1.png"
class: documentation
---
## Starting paged.js
## Starting Paged.js
Paged.js comes in two flavours: a polyfill that will automatically run when you starts the browser and a npm module that you can run. Both can be adapted to your need pretty easily, but feel free to use what’s the more convenient for you, but in this chapter, we’ll focus on the polyfill. You can find more about the esm version [here !! PLEASE ADD A LINK]()
......@@ -41,7 +41,7 @@ You can also download that file and call it from the head of your HTML file:
```
As soon as your browser has loaded everything your HTML needs to be shown on screen (including images, font files, etc.), the script will start paginating the content and pages will appear on your screen. If you need a previous version of paged.js you can check the releases on [unpgk.com](https://unpkg.com/browse/pagedjs/). Please notice the button top right to get to older versions.
As soon as your browser has loaded everything your HTML needs to be shown on screen (including images, font files, etc.), the script will start paginating the content and pages will appear on your screen. If you need a previous version of Paged.js you can check the releases on [unpgk.com](https://unpkg.com/browse/pagedjs/). Please notice the button top right to get to older versions.
### Preview your work
......@@ -55,7 +55,7 @@ Once Paged.js has done its work, you can generate the PDF using the Save as PDF
2. Change the _Destination_ to "Save as a PDF file”.
3. In the avanced settings, as paged.js is not using any of those options, you need to be sure the that the following statements are right:
3. In the avanced settings, as Paged.js is not using any of those options, you need to be sure the that the following statements are right:
- _Margins_ are set to “none”,
- “Headers and footers” is unchecked or set to none,
- “Background graphics” is checked.
......
......@@ -20,7 +20,7 @@ the web page is printed from the browser print dialog to create a PDF.
- [CSS Fragmentation Module Level 3](https://www.w3.org/TR/css-break-3/) defines how and where CSS boxes can be fragmented, including across page breaks. (This module is not specific for print.)
- [ CSS page floats](https://www.w3.org/TR/css-page-floats-3/) defines how an element is to be removed from the normal flow and instead be placed into a different place depends on page. ([see the article “Page Media approaches: page floats”](https://www.pagedmedia.org/page-floats/))
We try to respect the specifications as much as possible, but sometimes, they can be unclear or leave a certain degree of indeterminacy. Thus, paged.js implementation is made of our own interpretation and when the rules will be implemented by the browsers, they may differ from what we would have built.
We try to respect the specifications as much as possible, but sometimes, they can be unclear or leave a certain degree of indeterminacy. Thus, Paged.js implementation is made of our own interpretation and when the rules will be implemented by the browsers, they may differ from what we would have built.
At some point, we’ll need things that are not yet thought of by the W3C. Therefore, we may develop our own rules, based on what the community of users needs. We’ll try to take the most appropriate technically to meet the expectations of typographers and designers. In that case, we’ll write down the specifications and share those with the other W3C members.
......@@ -38,7 +38,7 @@ So when it comes to producing paginated content from the browser, this is where
### Which browser to use?
We really want paged.js to work perfectly with all the browsers around, but as we’re writing those words, some are more suitable than others. It depends on the features you want to have for your documents (CSS flexbox, hyphens…). But you also maybe need a browser that take into account the size property to generate PDFs. Here are some explanations to help you choose.
We really want Paged.js to work perfectly with all the browsers around, but as we’re writing those words, some are more suitable than others. It depends on the features you want to have for your documents (CSS flexbox, hyphens…). But you also maybe need a browser that take into account the size property to generate PDFs. Here are some explanations to help you choose.
#### Support of @page { size }
......@@ -49,7 +49,7 @@ Paged.js acts like a sort of polyfill but there is one thing we can't manage tha
- Brave
- Opera
We know that many of you are attached to Mozilla Firefox (and so are we). It is still possible to use paged.js with it but you will have to manually change the PDF size when you generate it (in the custom sizes). Be careful to calculate bleeds and crop marks if you need to add those.
We know that many of you are attached to Mozilla Firefox (and so are we). It is still possible to use Paged.js with it but you will have to manually change the PDF size when you generate it (in the custom sizes). Be careful to calculate bleeds and crop marks if you need to add those.
#### Support of CSS grid
......
---
title: "How paged.js works"
title: "How Paged.js works"
date: 2019-09-03T18:23:22+02:00
draft: true
part: 2
......@@ -50,7 +50,7 @@ We will see that it is possible to control page breaks and change the size of th
## The Polisher: polyfilling the print declarations
The Polisher is the part of paged.js that translate the CSS rules for each of your page. It builds new boxes to create page layouts and places your content in these pages. We use the CSS tree library to parse the CSS from text and replace `@page` rules with classes. The polisher also replaces calls such as running headers, page counters, or CSS generated content functions with variables from the DOM.
The Polisher is the part of Paged.js that translate the CSS rules for each of your page. It builds new boxes to create page layouts and places your content in these pages. We use the CSS tree library to parse the CSS from text and replace `@page` rules with classes. The polisher also replaces calls such as running headers, page counters, or CSS generated content functions with variables from the DOM.
{{< figure src="https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/div-pages.png" >}}
......@@ -132,10 +132,10 @@ Across this documentation, we will specify the CSS properties we implement and t
## The Previewer: rendering the paginated document
The preview module of paged.js loads the modules, uses the polisher and the chunker to layout the content. It builds the preview of your document in your browser, so you can see exactly how things are going to look and then adjust your content accordingly.
The preview module of Paged.js loads the modules, uses the polisher and the chunker to layout the content. It builds the preview of your document in your browser, so you can see exactly how things are going to look and then adjust your content accordingly.
Behind the curtains, Paged.js modifies the DOM structure by adding some HTML elements to build and render your layout. Those modifications are made during the rendering, there is no modification of your original HTML document.
It also adds references to every node (for example, it adds classes to differentiate right or left pages). This gives us complete control over the page layout without any hacks.
This documentation will specify for each CSS property, the modifications of the DOM needed to build and render your book. You can also access these elements in Javascript directly with their classes if you want to go further with paged.js and add your own functions.
This documentation will specify for each CSS property, the modifications of the DOM needed to build and render your book. You can also access these elements in Javascript directly with their classes if you want to go further with Paged.js and add your own functions.
......@@ -21,7 +21,7 @@ weight: 5
## The `@media print` query
Responsive design is made possible by the use of media queries: a set of CSS properties that you can use to define the styles when your web page is rendered on a tablet terminal, a phone, a TV screen, etc. One of those media queries, the `@media print` was specifically made to print a webpage. For example, you can remove menu, icons, change the way the hyperlinks will appear, etc. As a polyfill, paged.js will use the CSS rules under that media queries to define the styles of your book:
Responsive design is made possible by the use of media queries: a set of CSS properties that you can use to define the styles when your web page is rendered on a tablet terminal, a phone, a TV screen, etc. One of those media queries, the `@media print` was specifically made to print a webpage. For example, you can remove menu, icons, change the way the hyperlinks will appear, etc. As a polyfill, Paged.js will use the CSS rules under that media queries to define the styles of your book:
```css {linenos=table,linenostart=1}
@media print {
......@@ -29,7 +29,7 @@ Responsive design is made possible by the use of media queries: a set of CSS pro
}
```
If you don’t use paged.js, the styles declared in this media query will only be applied when the web page is printed (or saved as PDF) from the browser print dialog. For example, the font-size may vary from the screens to the printer or images might be removed (with `display:none`) to save some ink. If you use Paged.js, you’ll be able to see in your browser a preview of how your styles will appear when printing.
If you don’t use Paged.js, the styles declared in this media query will only be applied when the web page is printed (or saved as PDF) from the browser print dialog. For example, the font-size may vary from the screens to the printer or images might be removed (with `display:none`) to save some ink. If you use Paged.js, you’ll be able to see in your browser a preview of how your styles will appear when printing.
## @page rule
......@@ -37,7 +37,7 @@ The @page rule lets you specify various aspects of your page model such as dimen
### Page size property
The `size` property specifies the size of your page (excluding bleeds). This fixed size can be declared by length units in centimeters (`cm`) millimeters (`mm`) or inches (`in`). The first number is the width of your document and the second number is the height. By default, paged.js uses the letter size (8.5in × 11in).
The `size` property specifies the size of your page (excluding bleeds). This fixed size can be declared by length units in centimeters (`cm`) millimeters (`mm`) or inches (`in`). The first number is the width of your document and the second number is the height. By default, Paged.js uses the letter size (8.5in × 11in).
It's also possible to specify the page size by using keywords that can be combined with page orientation (`portrait` or `landscape`). By default, your page will always be printed as portrait.
......
......@@ -111,8 +111,8 @@ a::after {
## Generated content for paged media
The use of generated content is possible without paged.js; `content` is a CSS property implemented in all browsers.
The use of generated content is possible without Paged.js; `content` is a CSS property implemented in all browsers.
But to design a book (or a paginated content) you need some elements added to help readers navigate between pages: running heads and footers, page numbers, table of content, index, cross-references, etc.
These elements don’t exist in the HTML as a content, you need to create them automatically. To do that you can use a combination of syntaxes and properties that paged.js implements called Generated Content for Paged Media.
These elements don’t exist in the HTML as a content, you need to create them automatically. To do that you can use a combination of syntaxes and properties that Paged.js implements called Generated Content for Paged Media.
......@@ -14,7 +14,7 @@ intro: "Running headers, footnotes, stuff in margins and so on."
A page box consists of two types of area: page area and page margin boxes.
The **page area** is the content area of a page box. It is the space into which all your HTML content will flow. When this content runs out of room, another page will be automatically created. It's what the chuncker part of paged.js do.
The **page area** is the content area of a page box. It is the space into which all your HTML content will flow. When this content runs out of room, another page will be automatically created. It's what the chuncker part of Paged.js do.
The margins of a page are divided into sixteen boxes where you can put generated content like page number and running heads. These boxes are called **margin boxes**.
......@@ -65,7 +65,7 @@ List of the margin boxes:
## Page Counter
To define page numbers, paged.js uses a CSS counter that gets incremented for each new page.
To define page numbers, Paged.js uses a CSS counter that gets incremented for each new page.
To insert a page number on a page or retrieve the total number of pages in a document, the W3C proposes a specific counter named `page`. The counters declaration must be used within a `content` property in the margin-boxes declaration. The following example declares the page number in the bottom-left box:
......@@ -91,7 +91,7 @@ You can also add a bit of text before the page number:
To tally the total number of pages in your document, write this:
To tally the total number of pages in your document, you can write this:
```css {linenos=table,linenostart=1}
@page {
......@@ -107,7 +107,7 @@ To tally the total number of pages in your document, write this:
**Reset the page counter**
Don't work correctly in paged.js for now. [Issue #31](https://gitlab.pagedmedia.org/tools/pagedjs/issues/91)
Right now, reseting the page count to 1 is the only possible options. Check [Issue #31](https://gitlab.pagedmedia.org/tools/pagedjs/issues/91) to keep track of that option.
......@@ -147,7 +147,7 @@ The string property act like a variable. It read your DOM and each time a new ti
### Select content of string-set
This part don't work correctly in paged.js for now. Issues [#45](https://gitlab.pagedmedia.org/tools/pagedjs/issues/45), [#42](https://gitlab.pagedmedia.org/tools/pagedjs/issues/42)
This part don't work correctly in Paged.js for now. Issues [#45](https://gitlab.pagedmedia.org/tools/pagedjs/issues/45), [#42](https://gitlab.pagedmedia.org/tools/pagedjs/issues/42)
The documentation need to be finish.
......@@ -334,7 +334,7 @@ You can see that the paragraph is kept in the margin as well as all its content.
## Select element of the page for running title/headers
This part don't work correctly in paged.js for now. [Issue #38](https://gitlab.pagedmedia.org/tools/pagedjs/issues/38)
This part don't work correctly in Paged.js for now. [Issue #38](https://gitlab.pagedmedia.org/tools/pagedjs/issues/38)
The documentation need to be finish.
......@@ -449,7 +449,7 @@ If you have used `position: running`, the styles applying to the generated conte
**With string-set**
If you have used `string-set`, all styles are declared in the margin box and therefore applied to the margin box. If you want certain rules to apply only to the text and not to the entire margin box, you will have to use the classes created by paged.js to reach the text.
If you have used `string-set`, all styles are declared in the margin box and therefore applied to the margin box. If you want certain rules to apply only to the text and not to the entire margin box, you will have to use the classes created by Paged.js to reach the text.
For example, if you use background-color and padding into the at-rules for page-margin box, the style are applied on the margin box.
......@@ -475,7 +475,7 @@ Result:
If you want to applied this background-color and padding only on the generated content, you need to applied the style on a special div create by paged.js: `pagedjs_margin-content`.
If you want to applied this background-color and padding only on the generated content, you need to applied the style on a special div create by Paged.js: `pagedjs_margin-content`.
......@@ -500,7 +500,7 @@ Result:
### Define width and height of margin boxes
The height and width of the margin boxes are automatically computed by paged.js (see "Rendering of margin boxes" below) but you can easily define the size you want using relative (`%`) or absolute values (`mm`, `in`, `px`).
The height and width of the margin boxes are automatically computed by Paged.js (see "Rendering of margin boxes" below) but you can easily define the size you want using relative (`%`) or absolute values (`mm`, `in`, `px`).
```css {linenos=table,linenostart=1}
@page {
......@@ -547,7 +547,7 @@ Result:
## Rendering of margin boxes with paged.js
## Rendering of margin boxes with Paged.js
Paged.js use CSS grid and flexbox to create the margin boxes of the page. The figures below represent how margin boxes are placed with the div classes used.
......@@ -556,7 +556,7 @@ Paged.js use CSS grid and flexbox to create the margin boxes of the page. The fi
{{< figure src="https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/margin-boxes_grid_01.png" >}}
The page consists of four corner margins and four groups of margins placed on a grid with three columns and three rows. The grid use margin variables created by paged.js based on your margin and page size declarations to set the size of items.
The page consists of four corner margins and four groups of margins placed on a grid with three columns and three rows. The grid use margin variables created by Paged.js based on your margin and page size declarations to set the size of items.
**Template of the grid**
......
---
title: "99 Command Line Interface"
title: "Command Line Interface"
date: 2020-01-24T15:48:36+01:00
draft: true
---
The command line version of paged.js uses a headless browser (that is, one without a graphical interface) to generate a PDF. The browser used is Chromium. This means that you can use paged.js in fully automated workflows. With the command line version, you don't need to call the paged.js script in your document: it will be done automatically.
The command line version of Paged.js uses a headless browser (that is, one without a graphical interface) to generate a PDF. The browser used is Chromium. This means that you can use Paged.js in fully automated workflows. With the command line version, you don't need to call the Paged.js script in your document: it will be done automatically.
First, download and install pagedjs-cli with your terminal (you need to have git and npm installed):
......
......@@ -4,7 +4,7 @@ date: 2020-01-24T15:47:43+01:00
draft: true
---
### Collaborating on paged.js aka accessing the developer branch
### Collaborating on Paged.js aka accessing the developer branch
To get set up with the development version, clone the repository and run the project using npm (you need to have git and npm installed):
......@@ -36,7 +36,7 @@ You can find all the documentation on their respective websites. Broadly, what y
3. Start the local server.
4. In your favorite browser, go to the local address provided by your application (like `http://localhost:8888`).
Note: With some browsers and some operating systems, you may not need a local server for paged.js to work. To find out, simply open your HTML page (linked to the polyfill). If the paginated content appears, you don't need a local server.
Note: With some browsers and some operating systems, you may not need a local server for Paged.js to work. To find out, simply open your HTML page (linked to the polyfill). If the paginated content appears, you don't need a local server.
......@@ -45,7 +45,7 @@ Note: With some browsers and some operating systems, you may not need a local se
Paged.js transforms your content so that it can be viewed in a browser. PDF generation can be done in two ways:
- using the print features of your browser,
- using the [pagedjs-cli](https://gitlab.pagedmedia.org/tools/pagedjs-cli) tool based on paged.js and [Puppeteer](https://github.com/GoogleChrome/puppeteer).
- using the [pagedjs-cli](https://gitlab.pagedmedia.org/tools/pagedjs-cli) tool based on Paged.js and [Puppeteer](https://github.com/GoogleChrome/puppeteer).
......
......@@ -8,4 +8,4 @@ draft: true
With the script `paged.polyfill.js`, the previewer module is launched automatically and immediately (as soon as the page with the script is called). It will by default apply to all your HTML content.
Using es6 modules you can add the previewer to your own scripts. You can also specify the delay before the paged.js script is launched. (We will see this in another part.) It is important to note that paged.js is just a script like other scripts, so you can use it however you want.
\ No newline at end of file
Using es6 modules you can add the previewer to your own scripts. You can also specify the delay before the Paged.js script is launched. (We will see this in another part.) It is important to note that Paged.js is just a script like other scripts, so you can use it however you want.
\ No newline at end of file
......@@ -2,7 +2,7 @@
title: "The Official Documentation"
date: 2019-09-04T15:28:16+02:00
draft: true
intro: "This is the complete and **official** documentation for paged.js, for users and developers alike."
intro: "This is the complete and **official** documentation for Paged.js, for users and developers alike."
---
This is the documentation for paged.js
This is the documentation for Paged.js
......@@ -15,14 +15,16 @@ body {
}
box-sizing: border-box;
display: grid;
grid-template-columns: [sidebar] 22vw [start] 70vw [end];
grid-template-columns: [sidebar] 22vw [start] 65vw [end];
grid-gap: 3vw;
padding: 2em;
background: var(--color-background);
margin: 0;
}
.sidebar {
.menu {
position: fixed;
grid-column-start: sidebar;
height: calc(100vh - 4em);
......@@ -31,7 +33,8 @@ body {
display: flex;
flex-direction: column;
margin-bottom: 3em;
justify-content: space-between;
justify-content: flex-end;
/* top: 0; */
button {
justify-self: flex-start;
}
......@@ -59,7 +62,7 @@ main {
margin-top: auto;
margin-top: 5em;
position: relative;
header {
padding-bottom: 1.5em;
margin-top: -4em;
......@@ -68,8 +71,6 @@ main {
margin-right: -4em;
padding-left: 4em;
padding-right: 4em;
}
}
......@@ -79,9 +80,8 @@ article {
border: 10px solid var(--color-paper);
margin: 0;
position: relative;
padding: 2.5em;
padding: 2.5em;
padding-bottom: 4em;
}
.crop-marks {
......@@ -119,8 +119,6 @@ article {
border-width: 1px 0;
}
main article .menu {
display: flex;
flex-direction: row;
......@@ -132,13 +130,104 @@ main article .menu {
/* color: red; */
}
.previous {
}
/* mobile */
@media screen and (max-width: 780px) {
body {
display: block;
.crop-marks {
display: none;
}
main {
margin: 0 auto;
margin-bottom: 2em;
}
footer {
text-align: center;
margin-top: 8em;
max-width: 40%;
}
.menu {
/* bottom: 0;
left: 10%; */
width: 80%;
}
.menu::before {
content: " ";
width: 80vw;
}
button.menuToggle {
width: 89px;
height: 89px;
left: 8px;
top: 10px;
background: var(--color-paper);
/* box-shadow: 0 0 2px 0 var(--color-primary); */
svg path {
/* fill: white; */
}
position:fixed;
/* box-shadow: -5px 5px 5px 0 rgba(100,100,100,0.5); */
}
.menu {
/* position: absolute; */
/* bottom: 0;
top: 0;
display: flex; */
width: 80%;
transition: left 1s;
}
.menu.leftHide {
left: -100%;
}
}
}
.paginator {
border-top: 1px solid grey;
margin-top: 4em;
padding-top: 1em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
&.both {
justify-content: space-between;
}
a {
font-style: normal;
background: white;
}
.previous, .next {
&::before {
content: "← ";
content: "Previously ";
display: block;
font-family: var(--font-sans);
text-transform: uppercase;
font-size: 0.7em;
letter-spacing: 0.2ch;
margin-bottom: 1em;
}
}
.next::after {
content: " →";
.next::before {
content: "Next";
text-align: right;
}
}
}
\ No newline at end of file
......@@ -14,6 +14,8 @@
}
.menu {
transition: left 2s;
svg {
path {
fill: var(--color-primary);
......@@ -30,17 +32,23 @@
}
button.menuToggle {
padding: 0;
margin: 0;
max-width: 50%;
background: transparent;
border: 0;
box-shadow: none;
position: fixed;
top: 2em;
z-index: 99;
border-radius: 0;
border-bottom-right-radius: 30%;
height: 160px;
width: 160px;
display: flex;
border: 0;
box-shadow: 0;
background: var(--color-background);
svg {
path {
fill: var(--color-primary);
}
/* width: 60%; */
/* margin: 0 auto; */
}
}
......
@media screen and (max-width: 780px) {
body {
}
}
\ No newline at end of file