diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css
index 1028003..4881696 100644
--- a/maquette-tests/assets/css/03_layout.css
+++ b/maquette-tests/assets/css/03_layout.css
@@ -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;
-
-} */
\ No newline at end of file
+.nav-decor {
+ position: running(decor);
+}
\ No newline at end of file
diff --git a/maquette-tests/assets/css/chapter-header.css b/maquette-tests/assets/css/chapter-header.css
index 270d5b6..bab3579 100644
--- a/maquette-tests/assets/css/chapter-header.css
+++ b/maquette-tests/assets/css/chapter-header.css
@@ -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;
diff --git a/maquette-tests/assets/css/notes.css b/maquette-tests/assets/css/notes.css
index 7b34674..cb2a2ec 100644
--- a/maquette-tests/assets/css/notes.css
+++ b/maquette-tests/assets/css/notes.css
@@ -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;
}
diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css
index aa0b747..1e10cd2 100644
--- a/maquette-tests/assets/css/text.css
+++ b/maquette-tests/assets/css/text.css
@@ -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); */
}
diff --git a/maquette-tests/index.html b/maquette-tests/index.html
index 7e44fc4..93085ee 100644
--- a/maquette-tests/index.html
+++ b/maquette-tests/index.html
@@ -37,34 +37,28 @@
Décor 6 - Numérique
+ D6cor
+ Essai
+ Olivain Porry
+ Un robot-poète ne nous fait toujours pas peur
+
-
+
+
-
-
- - D6cor
- - Essais
- - Portfolio
- - Entretiens
-
-
-
- - Olivain Porry
- - Un robot-poète ne nous fait toujours pas peur
-
-