Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
workshop-template
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Julie Blanc
workshop-template
Commits
9564a5de
Commit
9564a5de
authored
Mar 04, 2020
by
Julie Blanc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
initial
parents
Pipeline
#419
failed with stages
in 8 seconds
Changes
15
Pipelines
1
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
911 additions
and
0 deletions
+911
-0
.gitignore
.gitignore
+2
-0
README.md
README.md
+22
-0
baseline.css
css/pagedjs/interface/baseline.css
+17
-0
header.css
css/pagedjs/interface/header.css
+83
-0
interface.css
css/pagedjs/interface/interface.css
+69
-0
recto-verso.css
css/pagedjs/interface/recto-verso.css
+18
-0
pagedjs.css
css/pagedjs/pagedjs.css
+17
-0
reset.css
css/pagedjs/reset.css
+449
-0
style-print.css
css/style-print.css
+92
-0
style-screen.css
css/style-screen.css
+12
-0
typesetting.png
images/typesetting.png
+0
-0
index.html
index.html
+0
-0
handlers.js
js/handlers.js
+9
-0
paged.esm.js
js/paged.esm.js
+0
-0
script.js
js/script.js
+121
-0
No files found.
.gitignore
0 → 100644
View file @
9564a5de
.DS_Store
\ No newline at end of file
README.md
0 → 100644
View file @
9564a5de
# Paged.js workshop template
Paged.js template for multi-media publishing.
-
CSS for screen and print
-
Paged.js 0.1.38 included
-
Script for register your handlers
-
Waits for the page to be returned before printing
## Instructions
-
Use any local server.
-
Write your content in
`index.html`
-
Write your CSS for the screen in
`css/style-screen.css`
and your CSS for the print in
`css/style-print.css`
-
If you need to register handlers, you can do it in
`js/handlers.js`
/
## Version
This template was made by Julie Blanc for workshops. It's in constant improvement.
-
v 1.0: Grand Atelier ESAD Orléans, January 27-31, 2020
\ No newline at end of file
css/pagedjs/interface/baseline.css
0 → 100644
View file @
9564a5de
@media
screen
{
.pagedjs_page
{
--pagedjs-baseline
:
11px
;
--pagedjs-baseline-position
:
-4px
;
--pagedjs-baseline-color
:
cyan
;
background
:
linear-gradient
(
var
(
--color-paper
)
0%
,
var
(
--color-paper
)
calc
(
var
(
--pagedjs-baseline
)
-
1px
),
var
(
--pagedjs-baseline-color
)
calc
(
var
(
--pagedjs-baseline
)
-
1px
),
var
(
--pagedjs-baseline-color
)
var
(
--pagedjs-baseline
)),
transparent
;
background-size
:
100%
var
(
--pagedjs-baseline
);
background-repeat
:
repeat-y
;
background-position-y
:
var
(
--pagedjs-baseline-position
);
}
}
\ No newline at end of file
css/pagedjs/interface/header.css
0 → 100644
View file @
9564a5de
body
{
--header-w-close
:
78px
;
--header-w-open
:
220px
;
--color-icon-select
:
rgb
(
8
,
38
,
92
);
--color-icon
:
rgb
(
85
,
109
,
175
);
}
#header-pagedjs
{
display
:
none
;
}
#header-pagedjs
{
font-family
:
Arial
,
Helvetica
,
sans-serif
;
position
:
fixed
;
box-sizing
:
border-box
;
top
:
10px
;
right
:
40px
;
z-index
:
999
;
}
#header-pagedjs
button
{
display
:
flex
;
width
:
48px
;
height
:
48px
;
background-color
:
transparent
;
border
:
none
;
align-items
:
center
;
justify-content
:
flex-start
;
margin-top
:
18px
;
margin-bottom
:
18px
;
cursor
:
pointer
;
color
:
var
(
--color-icon
);
background-color
:
rgb
(
225
,
225
,
225
);
border
:
3px
solid
rgb
(
225
,
225
,
225
);
border-radius
:
10px
;
}
#header-pagedjs
button
svg
{
width
:
100%
;
fill
:
var
(
--color-icon
);
}
#header-pagedjs
button
::before
{
content
:
attr
(
data-text
);
color
:
var
(
--color-icon-select
)
!important
;
position
:
absolute
;
width
:
200px
;
left
:
-216px
;
text-align
:
right
;
font-size
:
18px
;
display
:
none
;
font-weight
:
bold
;
/* background-color: rgba(225, 225, 225, 0.3);
padding: 3px 8px; */
}
/* checked */
#input-screen
:checked
~
#button-screen
,
#input-print
:checked
~
#button-print-preview
{
border
:
3px
solid
var
(
--color-icon
);
}
/* disabled */
button
:disabled
{
cursor
:
none
;
}
#button-print
:disabled
svg
{
cursor
:
none
;
fill
:
#bbb
!important
;
}
/* hover */
#header-pagedjs
button
:hover
svg
{
fill
:
var
(
--color-icon-select
);
}
#header-pagedjs
button
:hover
{
border
:
3px
solid
var
(
--color-icon-select
)
!important
;
}
#header-pagedjs
button
:hover::before
{
display
:
block
!important
;
}
@media
screen
{
#header-pagedjs
{
display
:
block
;
}
}
css/pagedjs/interface/interface.css
0 → 100644
View file @
9564a5de
/* Change the look */
:root
{
--color-background
:
whitesmoke
;
--color-pageBox
:
#666
;
--color-paper
:
white
;
--color-marginBox
:
transparent
;
}
/* To define how the book look on the screen: */
@media
screen
{
body
{
background-color
:
var
(
--color-background
);
}
.pagedjs_pages
{
display
:
flex
;
width
:
calc
(
var
(
--pagedjs-width
)
*
2
);
flex
:
0
;
flex-wrap
:
wrap
;
margin
:
0
auto
;
}
.pagedjs_page
{
background-color
:
var
(
--color-paper
);
box-shadow
:
0
0
0
1px
var
(
--color-pageBox
);
margin
:
0
;
flex-shrink
:
0
;
flex-grow
:
0
;
margin-top
:
10mm
;
}
.pagedjs_first_page
{
margin-left
:
var
(
--pagedjs-width
);
}
.pagedjs_page
:last-of-type
{
margin-bottom
:
10mm
;
}
/* show the margin-box */
.pagedjs_margin-top-left-corner-holder
,
.pagedjs_margin-top
,
.pagedjs_margin-top-left
,
.pagedjs_margin-top-center
,
.pagedjs_margin-top-right
,
.pagedjs_margin-top-right-corner-holder
,
.pagedjs_margin-bottom-left-corner-holder
,
.pagedjs_margin-bottom
,
.pagedjs_margin-bottom-left
,
.pagedjs_margin-bottom-center
,
.pagedjs_margin-bottom-right
,
.pagedjs_margin-bottom-right-corner-holder
,
.pagedjs_margin-right
,
.pagedjs_margin-right-top
,
.pagedjs_margin-right-middle
,
.pagedjs_margin-right-bottom
,
.pagedjs_margin-left
,
.pagedjs_margin-left-top
,
.pagedjs_margin-left-middle
,
.pagedjs_margin-left-bottom
{
box-shadow
:
0
0
0
1px
inset
var
(
--color-marginBox
);
}
}
css/pagedjs/interface/recto-verso.css
0 → 100644
View file @
9564a5de
@media
screen
{
.pagedjs_pages
{
flex-direction
:
column
;
width
:
100%
;
}
.pagedjs_first_page
{
margin-left
:
0
;
}
.pagedjs_page
{
margin
:
0
auto
;
margin-top
:
10mm
;
}
}
\ No newline at end of file
css/pagedjs/pagedjs.css
0 → 100644
View file @
9564a5de
/* INTERFACE ------------------------------------------------------------------- */
/* paged js interface and screen view css */
@import
"interface/interface.css"
;
/* uncomment for recto/verso book : */
/* @import "interface/recto-verso.css"; */
/* uncomment to see the baseline : */
/* @import "interface/baseline.css"; */
@import
"interface/header.css"
;
css/pagedjs/reset.css
0 → 100755
View file @
9564a5de
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html
{
//
line-height
:
1.15
;
/* 1 */
-ms-text-size-adjust
:
100%
;
/* 2 */
-webkit-text-size-adjust
:
100%
;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body
{
margin
:
0
;
}
/**
* Add the correct display in IE 9-.
*/
article
,
aside
,
footer
,
header
,
nav
,
section
{
display
:
block
;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1
{
font-size
:
2em
;
margin
:
0.67em
0
;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption
,
figure
,
main
{
/* 1 */
display
:
block
;
}
/**
* Add the correct margin in IE 8.
*/
figure
{
margin
:
1em
40px
;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr
{
box-sizing
:
content-box
;
/* 1 */
height
:
0
;
/* 1 */
overflow
:
visible
;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre
{
font-family
:
monospace
,
monospace
;
/* 1 */
font-size
:
1em
;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a
{
background-color
:
transparent
;
/* 1 */
-webkit-text-decoration-skip
:
objects
;
/* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr
[
title
]
{
border-bottom
:
none
;
/* 1 */
text-decoration
:
underline
;
/* 2 */
text-decoration
:
underline
dotted
;
/* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b
,
strong
{
font-weight
:
inherit
;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b
,
strong
{
font-weight
:
bolder
;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code
,
kbd
,
samp
{
font-family
:
monospace
,
monospace
;
/* 1 */
font-size
:
1em
;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn
{
font-style
:
italic
;
}
/**
* Add the correct background and color in IE 9-.
*/
mark
{
background-color
:
#ff0
;
color
:
#000
;
}
/**
* Add the correct font size in all browsers.
*/
small
{
font-size
:
80%
;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub
,
sup
{
font-size
:
75%
;
line-height
:
0
;
position
:
relative
;
vertical-align
:
baseline
;
}
sub
{
bottom
:
-0.25em
;
}
sup
{
top
:
-0.5em
;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio
,
video
{
display
:
inline-block
;
}
/**
* Add the correct display in iOS 4-7.
*/
audio
:not
([
controls
])
{
display
:
none
;
height
:
0
;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img
{
border-style
:
none
;
}
/**
* Hide the overflow in IE.
*/
svg
:not
(
:root
)
{
overflow
:
hidden
;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button
,
input
,
optgroup
,
select
,
textarea
{
font-family
:
sans-serif
;
/* 1 */
font-size
:
100%
;
/* 1 */
line-height
:
1.15
;
/* 1 */
margin
:
0
;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button
,
input
{
/* 1 */
overflow
:
visible
;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button
,
select
{
/* 1 */
text-transform
:
none
;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button
,
html
[
type
=
"button"
],
/* 1 */
[
type
=
"reset"
],
[
type
=
"submit"
]
{
-webkit-appearance
:
button
;
/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button
::-moz-focus-inner
,
[
type
=
"button"
]
::-moz-focus-inner
,
[
type
=
"reset"
]
::-moz-focus-inner
,
[
type
=
"submit"
]
::-moz-focus-inner
{
border-style
:
none
;
padding
:
0
;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button
:-moz-focusring
,
[
type
=
"button"
]
:-moz-focusring
,
[
type
=
"reset"
]
:-moz-focusring
,
[
type
=
"submit"
]
:-moz-focusring
{
outline
:
1px
dotted
ButtonText
;
}
/**
* Correct the padding in Firefox.
*/
fieldset
{
padding
:
0.35em
0.75em
0.625em
;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend
{
box-sizing
:
border-box
;
/* 1 */
color
:
inherit
;
/* 2 */
display
:
table
;
/* 1 */
max-width
:
100%
;
/* 1 */
padding
:
0
;
/* 3 */
white-space
:
normal
;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress
{
display
:
inline-block
;
/* 1 */
vertical-align
:
baseline
;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea
{
overflow
:
auto
;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[
type
=
"checkbox"
],
[
type
=
"radio"
]
{
box-sizing
:
border-box
;
/* 1 */
padding
:
0
;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[
type
=
"number"
]
::-webkit-inner-spin-button
,
[
type
=
"number"
]
::-webkit-outer-spin-button
{
height
:
auto
;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[
type
=
"search"
]
{
-webkit-appearance
:
textfield
;
/* 1 */
outline-offset
:
-2px
;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[
type
=
"search"
]
::-webkit-search-cancel-button
,
[
type
=
"search"
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button
{
-webkit-appearance
:
button
;
/* 1 */
font
:
inherit
;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details
,
/* 1 */
menu
{
display
:
block
;
}
/*
* Add the correct display in all browsers.
*/
summary
{
display
:
list-item
;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas
{
display
:
inline-block
;
}
/**
* Add the correct display in IE.
*/
template
{
display
:
none
;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[
hidden
]
{
display
:
none
;
}
css/style-print.css
0 → 100644
View file @
9564a5de
@media
print
{
/* Size and marin for all pages ------------- */
@page
{
size
:
148mm
210mm
;
margin-top
:
20mm
;
margin-bottom
:
20mm
;
}
/* LEFT PAGES -------------------------------- */
@page
:
left
{
margin-left
:
10mm
;
margin-right
:
30mm
;
@bottom-left
{
content
:
counter
(
page
);
width
:
40px
;
}
@bottom-center
{
content
:
"Printing in relation to graphic art"
;
text-align
:
left
;
}
}
/* RIGHT PAGES -------------------------------- */
@page
:
right
{
margin-left
:
30mm
;
margin-right
:
10mm
;
@bottom-right
{
content
:
counter
(
page
);
width
:
40px
;
}
@bottom-center
{
content
:
string
(
chapTitle
);
text-align
:
right
;
}
}
.chapter
h1
{
string-set
:
chapTitle
content
(
text
);
}
/* BLANK PAGES -------------------------------- */
@page
:
blank
{
@bottom-left
{
content
:
none
;
}
@bottom-center
{
content
:
none
;
}
@bottom-right
{
content
:
none
;
}
}
/* COUVERTURE -------------------------------- */
@page
:
first
{
margin
:
10mm
10mm
;
background-color
:
rgb
(
20
,
121
,
253
);
@bottom-right
{
content
:
none
;
}
}
#cover
{
break-after
:
right
;
font-family
:
'Open Sans'
;
}
#cover
img
{
mix-blend-mode
:
lighten
;
}
/* SECTION BREAKS -------------------------------- */
.chapter
{
break-before
:
right
;
}