notes smaller
This commit is contained in:
Julie Blanc
parent
8823395d75
commit
cc75afe344
5 changed files with 126 additions and 270 deletions
|
|
@ -2,54 +2,83 @@
|
|||
|
||||
@page {
|
||||
size: 165mm 240mm;
|
||||
margin-top: 16mm;
|
||||
margin-bottom: 20mm;
|
||||
margin-top: 25mm;
|
||||
margin-bottom: 14mm;
|
||||
bleed: 6mm;
|
||||
marks: crop;
|
||||
|
||||
margin-left: 28mm;
|
||||
margin-right: 16mm;
|
||||
margin-left: 33mm;
|
||||
margin-right: 11mm;
|
||||
|
||||
}
|
||||
|
||||
@page:left {
|
||||
|
||||
|
||||
@top-left{
|
||||
content: element(navDecor);
|
||||
@top-left {
|
||||
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);
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
vertical-align: bottom;
|
||||
padding-bottom: 8mm;
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
text-align: left;
|
||||
margin-left: 11mm;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@page:right {
|
||||
/* margin-left: 18mm;
|
||||
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);
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
vertical-align: bottom;
|
||||
padding-bottom: 8mm;
|
||||
|
||||
width: 40px;
|
||||
position: relative;
|
||||
left: -40px;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -61,131 +90,48 @@
|
|||
|
||||
|
||||
@page chapter:first {
|
||||
@top-left {
|
||||
@top-right {
|
||||
content: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@page:blank {
|
||||
@page:blank {
|
||||
@top-left {
|
||||
content: none;
|
||||
}
|
||||
@bottom-center {
|
||||
@top-left-corner {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-right {
|
||||
content: none;
|
||||
}
|
||||
@top-center {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@bottom-center {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chapter-header h2 {
|
||||
string-set: title content(text);
|
||||
.nav-title {
|
||||
position: running(title);
|
||||
}
|
||||
|
||||
.chapter-header .author {
|
||||
string-set: author content(text);
|
||||
.nav-author {
|
||||
position: running(author);
|
||||
}
|
||||
|
||||
.chapter-header .type {
|
||||
string-set: type content(text);
|
||||
.nav-type {
|
||||
position: running(type);
|
||||
}
|
||||
|
||||
|
||||
.running-nav{
|
||||
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;
|
||||
|
||||
} */
|
||||
.nav-decor {
|
||||
position: running(decor);
|
||||
}
|
||||
|
|
@ -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 {
|
||||
/* break-after: page; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -34,87 +10,46 @@
|
|||
text-indent: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .type,
|
||||
.chapter-header .h2-pattern {
|
||||
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{
|
||||
margin-top: var(--gap);
|
||||
/* margin-top: var(--gap);
|
||||
border-left: var(--unit) solid var(--grey);
|
||||
border-left: var(--unit) solid var(--grey);
|
||||
padding-left: var(--gap);
|
||||
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: column; */
|
||||
margin-left: 15%;
|
||||
|
||||
}
|
||||
|
||||
.chapter-header h2 {
|
||||
font-family: 'Routed Gothic Wide';
|
||||
line-height: 1.2;
|
||||
line-height: 1.1;
|
||||
font-size: 36px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
padding-top: calc(var(--baseline)*1);
|
||||
padding-bottom: calc(var(--baseline)*1);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
|
||||
font-family: var(--mono);
|
||||
|
|
@ -127,7 +62,7 @@
|
|||
font-weight: normal;
|
||||
|
||||
height: var(--unit);
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0; */
|
||||
|
||||
/* display: inline-block;
|
||||
margin-inline: auto;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.following-note {
|
||||
font-family: var(--font-notes);
|
||||
/* font-family: var(--font-notes); */
|
||||
font-size: var(--fs-notes);
|
||||
line-height: 14px;
|
||||
font-weight: 500;
|
||||
|
|
@ -32,15 +32,15 @@
|
|||
content: "}"
|
||||
}
|
||||
|
||||
font-family: var(--font-notes);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
/* font-family: var(--font-notes);
|
||||
font-weight: 500; */
|
||||
font-size: var(--fs-notes);
|
||||
}
|
||||
|
||||
.following-note_call {
|
||||
padding-left: 0.25ch;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ h3, h4{
|
|||
}
|
||||
h3, h4{
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-notes);
|
||||
/* font-size: 14px; */
|
||||
font-family: var(--font-subtitle);
|
||||
/* font-family: var(--font-subtitle);
|
||||
font-size: var(--fs-subtitle);
|
||||
background-color: var(--grey);
|
||||
|
|
@ -56,19 +56,19 @@ h3, h4{
|
|||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
font-weight: normal; */
|
||||
padding-left: 1.5ch;
|
||||
margin-top: calc(var(--baseline)*0.5);
|
||||
/* padding-left: 1.5ch; */
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
padding-left: 30%;
|
||||
}
|
||||
|
||||
h3::before,
|
||||
h3::after{
|
||||
content: "+--------------------------------------------------------+";
|
||||
/* content: "+------------------------------------------------+";
|
||||
display: block;
|
||||
/* font-family: monospace; */
|
||||
position: relative;
|
||||
left: -1.5ch;
|
||||
width: calc(100% + 1.5ch);
|
||||
width: calc(100% + 1.5ch); */
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -37,34 +37,28 @@
|
|||
<h1>Décor 6 - Numérique</h1>
|
||||
</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>
|
||||
<li class="nav-chevron">></li>
|
||||
<li class="nav-title">D6cor</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
<p class="type">Essai</p>
|
||||
<div class="hgroup">
|
||||
|
|
@ -554,21 +548,12 @@
|
|||
|
||||
<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">
|
||||
<ul>
|
||||
<li>D6cor</li>
|
||||
<li class="selected">Essais</li>
|
||||
<li>Portfolio</li>
|
||||
<li>Entretiens</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span class="nav-decor">D6cor</span>
|
||||
<span class="nav-type">Essai</span>
|
||||
<span class="nav-author">Outdoor computer club</span>
|
||||
<span class="nav-title">U l’aria diventa più respirabile per tutti</span>
|
||||
|
||||
|
||||
<div class="chapter-header">
|
||||
<p class="type">Essai</p>
|
||||
|
|
@ -1015,31 +1000,21 @@
|
|||
|
||||
<section class="chapter" id="jean-noel-lafague">
|
||||
|
||||
<div class="running-nav">
|
||||
<ul>
|
||||
<li class="nav-author">Jean-Noël Lafargue</li>
|
||||
<li class="nav-title">Code créatif</li>
|
||||
</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">
|
||||
<p class="type">Essai</p>
|
||||
<div class="hgroup">
|
||||
|
||||
<h2><span>Code créatif</span></h2>
|
||||
<p class="author">Jean-Noël Lafargue</p>
|
||||
</div>
|
||||
<span class="nav-decor">D6cor</span>
|
||||
<span class="nav-type">Essai</span>
|
||||
<span class="nav-author">Jean-Noël Lafargue</span>
|
||||
<span class="nav-title">Code créatif</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="chapter-header">
|
||||
<p class="type">Essai</p>
|
||||
<div class="hgroup">
|
||||
|
||||
<h2><span>Code créatif</span></h2>
|
||||
<p class="author">Jean-Noël Lafargue</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue