notes smaller
This commit is contained in:
Julie Blanc
parent
8823395d75
commit
cc75afe344
5 changed files with 126 additions and 270 deletions
|
|
@ -2,30 +2,44 @@
|
||||||
|
|
||||||
@page {
|
@page {
|
||||||
size: 165mm 240mm;
|
size: 165mm 240mm;
|
||||||
margin-top: 16mm;
|
margin-top: 25mm;
|
||||||
margin-bottom: 20mm;
|
margin-bottom: 14mm;
|
||||||
bleed: 6mm;
|
bleed: 6mm;
|
||||||
marks: crop;
|
marks: crop;
|
||||||
|
|
||||||
margin-left: 28mm;
|
margin-left: 33mm;
|
||||||
margin-right: 16mm;
|
margin-right: 11mm;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@page:left {
|
@page:left {
|
||||||
|
|
||||||
|
|
||||||
@top-left{
|
@top-left {
|
||||||
content: element(navDecor);
|
content: element(decor);
|
||||||
|
width: 0px;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-top: 8mm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@bottom-center {
|
@top-right {
|
||||||
|
content: element(author);
|
||||||
|
vertical-align: top;
|
||||||
|
padding-top: 8mm;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 8mm;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@top-left-corner {
|
||||||
content: counter(page);
|
content: counter(page);
|
||||||
font-family: var(--font-title);
|
vertical-align: top;
|
||||||
font-size: 20px;
|
padding-top: 8mm;
|
||||||
vertical-align: bottom;
|
text-align: left;
|
||||||
padding-bottom: 8mm;
|
margin-left: 11mm;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -36,20 +50,35 @@
|
||||||
/* margin-left: 18mm;
|
/* margin-left: 18mm;
|
||||||
margin-right: 26mm; */
|
margin-right: 26mm; */
|
||||||
|
|
||||||
@top-left{
|
|
||||||
content: element(nav);
|
@top-left {
|
||||||
|
content: element(type);
|
||||||
|
width: 0px;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-top: 8mm;
|
||||||
}
|
}
|
||||||
|
|
||||||
@bottom-center {
|
@top-right {
|
||||||
|
content: element(title);
|
||||||
|
vertical-align: top;
|
||||||
|
padding-top: calc(8mm + 20px);
|
||||||
|
/* padding-right: 11mm; */
|
||||||
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
|
left: -11mm;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@top-right-corner {
|
||||||
content: counter(page);
|
content: counter(page);
|
||||||
font-family: var(--font-title);
|
width: 40px;
|
||||||
font-size: 20px;
|
position: relative;
|
||||||
vertical-align: bottom;
|
left: -40px;
|
||||||
padding-bottom: 8mm;
|
text-align: right;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-top: 8mm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -61,17 +90,27 @@
|
||||||
|
|
||||||
|
|
||||||
@page chapter:first {
|
@page chapter:first {
|
||||||
@top-left {
|
@top-right {
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@page:blank {
|
@page:blank {
|
||||||
@top-left {
|
@top-left {
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
@bottom-center {
|
@top-left-corner {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
@top-right {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
@top-center {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@bottom-center {
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -81,111 +120,18 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.chapter-header h2 {
|
.nav-title {
|
||||||
string-set: title content(text);
|
position: running(title);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-header .author {
|
.nav-author {
|
||||||
string-set: author content(text);
|
position: running(author);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-header .type {
|
.nav-type {
|
||||||
string-set: type content(text);
|
position: running(type);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-decor {
|
||||||
.running-nav{
|
position: running(decor);
|
||||||
position: running(nav);
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.running-nav-decor{
|
|
||||||
position: running(navDecor);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.running-nav-decor ul,
|
|
||||||
.running-nav ul{
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
gap: calc(var(--unit)*4);
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.running-nav-decor li,
|
|
||||||
.running-nav li{
|
|
||||||
font-family: var(--font-nav);
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 10px;
|
|
||||||
padding-left: 6ch;
|
|
||||||
max-width: 24ch;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
/* color: var(--blue); */
|
|
||||||
/* text-transform: lowercase;
|
|
||||||
border: var(--border-grey);
|
|
||||||
line-height: 1;
|
|
||||||
padding: 4px 1ch;
|
|
||||||
min-height: var(--unit);
|
|
||||||
font-weight: normal;
|
|
||||||
max-width: 24ch; */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.running-nav-decor li::before,
|
|
||||||
.running-nav li::before{
|
|
||||||
content: ">";
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .running-nav-decor ul li.nav-title,
|
|
||||||
.running-nav ul li.nav-title{
|
|
||||||
flex-grow: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.running-nav ul li.nav-author{
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.running-nav ul li.nav-title{
|
|
||||||
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.running-nav ul li.nav-title{
|
|
||||||
flex: 1 1 auto;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.running-nav ul li.nav-author{
|
|
||||||
flex: 0 0 auto; /* taille fixe */
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
.running-nav-decor ul li.nav-chevron{
|
|
||||||
padding: 0;
|
|
||||||
width: var(--unit);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .pagedjs_left_page .pagedjs_pagebox{
|
|
||||||
|
|
||||||
background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
|
|
||||||
|
|
||||||
} */
|
|
||||||
|
|
||||||
/* .pagedjs_right_page .pagedjs_pagebox{
|
|
||||||
|
|
||||||
background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
|
|
||||||
|
|
||||||
} */
|
|
||||||
|
|
@ -1,30 +1,6 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.chapter-nav ul{
|
|
||||||
display: flex;
|
|
||||||
font-family: var(--mono);
|
|
||||||
list-style: none;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
||||||
grid-gap: var(--gap);
|
|
||||||
margin-bottom: var(--gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-nav ul li{
|
|
||||||
background-color: var(--grey);
|
|
||||||
font-size: var(--fs-nav);
|
|
||||||
line-height: 1;
|
|
||||||
padding: 4px 1ch;
|
|
||||||
}
|
|
||||||
.chapter-nav ul li.selected{
|
|
||||||
border: var(--border-grey);
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.chapter-header {
|
.chapter-header {
|
||||||
/* break-after: page; */
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -34,87 +10,46 @@
|
||||||
text-indent: 0px !important;
|
text-indent: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chapter-header .type,
|
||||||
.chapter-header .h2-pattern {
|
.chapter-header .h2-pattern {
|
||||||
display: none;
|
display: none;
|
||||||
/* font-size: 58px;
|
|
||||||
line-height: 0.8;
|
|
||||||
|
|
||||||
color: var(--blue);
|
|
||||||
margin-bottom: calc(var(--baseline)*1);
|
|
||||||
text-align: left;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
color: var(--color);
|
|
||||||
text-align: center;
|
|
||||||
font-family: var(--font-decor);
|
|
||||||
|
|
||||||
transform: scale(2);
|
|
||||||
z-index: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0; */
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.chapter-header .type {
|
|
||||||
font-family: var(--mono);
|
|
||||||
font-size: var(--fs-nav);
|
|
||||||
background-color: var(--grey);
|
|
||||||
font-size: var(--fs-nav);
|
|
||||||
line-height: 1;
|
|
||||||
padding: 4px 1ch;
|
|
||||||
height: var(--unit);
|
|
||||||
margin-left: calc(var(--unit) + var(--gap));
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-header .type::before{
|
|
||||||
content: ">";
|
|
||||||
display: block;
|
|
||||||
width: var(--unit);
|
|
||||||
height: var(--unit);
|
|
||||||
background-color: var(--grey);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: calc((var(--unit) + var(--gap))*-1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.chapter-header .hgroup{
|
.chapter-header .hgroup{
|
||||||
margin-top: var(--gap);
|
/* margin-top: var(--gap);
|
||||||
border-left: var(--unit) solid var(--grey);
|
border-left: var(--unit) solid var(--grey);
|
||||||
border-left: var(--unit) solid var(--grey);
|
border-left: var(--unit) solid var(--grey);
|
||||||
padding-left: var(--gap);
|
padding-left: var(--gap);
|
||||||
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column; */
|
||||||
|
margin-left: 15%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-header h2 {
|
.chapter-header h2 {
|
||||||
font-family: 'Routed Gothic Wide';
|
font-family: 'Routed Gothic Wide';
|
||||||
line-height: 1.2;
|
line-height: 1.1;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
|
||||||
padding-top: calc(var(--baseline)*1);
|
|
||||||
padding-bottom: calc(var(--baseline)*1);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.chapter-header .author {
|
.chapter-header .author {
|
||||||
|
font-family: 'Routed Gothic Wide';
|
||||||
|
font-size: 36px;
|
||||||
|
margin-top: calc(var(--baseline)*6);
|
||||||
|
margin-bottom: calc(var(--baseline)*2);
|
||||||
|
|
||||||
background-color: black;
|
/* background-color: black;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
|
|
@ -127,7 +62,7 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
height: var(--unit);
|
height: var(--unit);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0; */
|
||||||
|
|
||||||
/* display: inline-block;
|
/* display: inline-block;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.following-note {
|
.following-note {
|
||||||
font-family: var(--font-notes);
|
/* font-family: var(--font-notes); */
|
||||||
font-size: var(--fs-notes);
|
font-size: var(--fs-notes);
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -32,15 +32,15 @@
|
||||||
content: "}"
|
content: "}"
|
||||||
}
|
}
|
||||||
|
|
||||||
font-family: var(--font-notes);
|
/* font-family: var(--font-notes);
|
||||||
font-weight: 500;
|
font-weight: 500; */
|
||||||
font-size: 12px;
|
font-size: var(--fs-notes);
|
||||||
}
|
}
|
||||||
|
|
||||||
.following-note_call {
|
.following-note_call {
|
||||||
padding-left: 0.25ch;
|
padding-left: 0.25ch;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -4px;
|
top: -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -44,8 +44,8 @@ h3, h4{
|
||||||
}
|
}
|
||||||
h3, h4{
|
h3, h4{
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 14px;
|
/* font-size: 14px; */
|
||||||
font-family: var(--font-notes);
|
font-family: var(--font-subtitle);
|
||||||
/* font-family: var(--font-subtitle);
|
/* font-family: var(--font-subtitle);
|
||||||
font-size: var(--fs-subtitle);
|
font-size: var(--fs-subtitle);
|
||||||
background-color: var(--grey);
|
background-color: var(--grey);
|
||||||
|
|
@ -56,19 +56,19 @@ h3, h4{
|
||||||
margin-top: calc(var(--baseline)*1.5);
|
margin-top: calc(var(--baseline)*1.5);
|
||||||
margin-bottom: calc(var(--baseline)*0.5);
|
margin-bottom: calc(var(--baseline)*0.5);
|
||||||
font-weight: normal; */
|
font-weight: normal; */
|
||||||
padding-left: 1.5ch;
|
/* padding-left: 1.5ch; */
|
||||||
margin-top: calc(var(--baseline)*0.5);
|
margin-top: calc(var(--baseline)*1.5);
|
||||||
margin-bottom: calc(var(--baseline)*0.5);
|
margin-bottom: calc(var(--baseline)*0.5);
|
||||||
|
padding-left: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3::before,
|
h3::before,
|
||||||
h3::after{
|
h3::after{
|
||||||
content: "+--------------------------------------------------------+";
|
/* content: "+------------------------------------------------+";
|
||||||
display: block;
|
display: block;
|
||||||
/* font-family: monospace; */
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -1.5ch;
|
left: -1.5ch;
|
||||||
width: calc(100% + 1.5ch);
|
width: calc(100% + 1.5ch); */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -37,34 +37,28 @@
|
||||||
<h1>Décor 6 - Numérique</h1>
|
<h1>Décor 6 - Numérique</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<span class="nav-decor">D6cor</span>
|
||||||
|
<span class="nav-type">Essai</span>
|
||||||
|
<span class="nav-author">Olivain Porry</span>
|
||||||
|
<span class="nav-title">Un robot-poète ne nous fait toujours pas peur</span>
|
||||||
|
|
||||||
|
|
||||||
<div class="running-nav-decor">
|
|
||||||
|
|
||||||
|
<!-- <div class="running-nav-decor">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="nav-chevron">></li>
|
<li class="nav-chevron">></li>
|
||||||
<li class="nav-title">D6cor</li>
|
<li class="nav-title">D6cor</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="chapter" id="olivain-porry">
|
<section class="chapter" id="olivain-porry">
|
||||||
<div class="chapter-nav">
|
|
||||||
<ul>
|
|
||||||
<li>D6cor</li>
|
|
||||||
<li class="selected">Essais</li>
|
|
||||||
<li>Portfolio</li>
|
|
||||||
<li>Entretiens</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="running-nav">
|
|
||||||
<ul>
|
|
||||||
<li class="nav-author">Olivain Porry</li>
|
|
||||||
<li class="nav-title">Un robot-poète ne nous fait toujours pas peur</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="chapter-header">
|
<div class="chapter-header">
|
||||||
<p class="type">Essai</p>
|
<p class="type">Essai</p>
|
||||||
<div class="hgroup">
|
<div class="hgroup">
|
||||||
|
|
@ -554,21 +548,12 @@
|
||||||
|
|
||||||
<section class="chapter" id="outdoor-computer-club">
|
<section class="chapter" id="outdoor-computer-club">
|
||||||
|
|
||||||
<div class="running-nav">
|
|
||||||
<ul>
|
|
||||||
<li class="nav-author">Outdoor computer club</li>
|
|
||||||
<li class="nav-title">E l’aria diventa più respirabile per tutti</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chapter-nav">
|
<span class="nav-decor">D6cor</span>
|
||||||
<ul>
|
<span class="nav-type">Essai</span>
|
||||||
<li>D6cor</li>
|
<span class="nav-author">Outdoor computer club</span>
|
||||||
<li class="selected">Essais</li>
|
<span class="nav-title">U l’aria diventa più respirabile per tutti</span>
|
||||||
<li>Portfolio</li>
|
|
||||||
<li>Entretiens</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chapter-header">
|
<div class="chapter-header">
|
||||||
<p class="type">Essai</p>
|
<p class="type">Essai</p>
|
||||||
|
|
@ -1015,32 +1000,22 @@
|
||||||
|
|
||||||
<section class="chapter" id="jean-noel-lafague">
|
<section class="chapter" id="jean-noel-lafague">
|
||||||
|
|
||||||
<div class="running-nav">
|
<span class="nav-decor">D6cor</span>
|
||||||
<ul>
|
<span class="nav-type">Essai</span>
|
||||||
<li class="nav-author">Jean-Noël Lafargue</li>
|
<span class="nav-author">Jean-Noël Lafargue</span>
|
||||||
<li class="nav-title">Code créatif</li>
|
<span class="nav-title">Code créatif</span>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chapter-nav">
|
|
||||||
<ul>
|
|
||||||
<li>D6cor</li>
|
|
||||||
<li class="selected">Essais</li>
|
|
||||||
<li>Portfolio</li>
|
|
||||||
<li>Entretiens</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chapter-header">
|
<div class="chapter-header">
|
||||||
<p class="type">Essai</p>
|
<p class="type">Essai</p>
|
||||||
<div class="hgroup">
|
<div class="hgroup">
|
||||||
|
|
||||||
|
<h2><span>Code créatif</span></h2>
|
||||||
|
<p class="author">Jean-Noël Lafargue</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2><span>Code créatif</span></h2>
|
|
||||||
<p class="author">Jean-Noël Lafargue</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue