clean
This commit is contained in:
sarahgarcin1
parent
4f8e4a0f06
commit
23b546163e
11 changed files with 415 additions and 1533 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,3 @@
|
|||
/* MOBILE FIRST */
|
||||
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
@ -49,12 +47,6 @@ h3{
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*h2 + h3{
|
||||
margin-top: 0.5em;
|
||||
opacity: 0.8;
|
||||
font-weight: normal;
|
||||
}*/
|
||||
|
||||
h5, h6{
|
||||
font-size: var(--textSize);
|
||||
margin-top: 1mm;
|
||||
|
|
@ -133,198 +125,9 @@ figure[data-crop="false"] img {
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
.pagedjs_page_content table{
|
||||
column-width: auto!important;
|
||||
}
|
||||
|
||||
.print-image{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.print-image div{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mix-blend-mode: multiply;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.print-image figcaption{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.print-image .print-red{
|
||||
position: relative;
|
||||
background: var(--rouge);
|
||||
}
|
||||
|
||||
.print-image .print-green{
|
||||
background: var(--vert);
|
||||
}
|
||||
|
||||
.print-image .print-blue{
|
||||
background: var(--bleu);
|
||||
}
|
||||
|
||||
.print-image > div > img{
|
||||
mix-blend-mode: screen;
|
||||
-webkit-filter: grayscale(100%) contrast(200%);
|
||||
filter: grayscale(100%) contrast(200%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body[data-template="print"] .print-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body[data-template="print"] .web-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 1px solid grey;
|
||||
font-size: 12px;
|
||||
table-layout: fixed;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--green);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 8px;
|
||||
padding-bottom: 12px !important;
|
||||
border-right: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
tr{
|
||||
border-bottom: 1px solid lightgrey;
|
||||
}
|
||||
|
||||
tr:last-child{
|
||||
border: none;
|
||||
}
|
||||
|
||||
tr > th:first-child,
|
||||
tr > th:nth-child(2){
|
||||
width:20%;
|
||||
}
|
||||
|
||||
tr > td:first-child,
|
||||
tr > td:nth-child(2){
|
||||
width:20%;
|
||||
}
|
||||
|
||||
td:last-child{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Gestion des couches */
|
||||
body.isolate-red-layer .green-layer,
|
||||
body.isolate-red-layer .blue-layer,
|
||||
body.isolate-red-layer .black-layer { display: none; }
|
||||
|
||||
body.isolate-green-layer .red-layer,
|
||||
body.isolate-green-layer .blue-layer,
|
||||
body.isolate-green-layer .black-layer { display: none; }
|
||||
|
||||
body.isolate-blue-layer .red-layer,
|
||||
body.isolate-blue-layer .green-layer,
|
||||
body.isolate-blue-layer .black-layer { display: none; }
|
||||
|
||||
body.isolate-black-layer .red-layer,
|
||||
body.isolate-black-layer .green-layer,
|
||||
body.isolate-black-layer .blue-layer { display: none; }
|
||||
|
||||
/* Noir et blanc */
|
||||
body.mode-black .print-image > div {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* fade entre les pages */
|
||||
#fade{
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
#fade.loaded{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glightbox-clean .gslide-title{
|
||||
font-family: var(--fontFamily);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.show-for-small-only{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hide-for-small-only{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---- H E A D E R -----*/
|
||||
header{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top:0;
|
||||
left:0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
z-index: 1000;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
header.row{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn span {
|
||||
display: block;
|
||||
background: #000;
|
||||
height: 2px;
|
||||
width: 26px;
|
||||
position: absolute;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn span:nth-child(1) { top: 0px; }
|
||||
header .mobile__menu_btn span:nth-child(2) { top: 8px; }
|
||||
header .mobile__menu_btn span:nth-child(3) { top: 16px; }
|
||||
header .mobile__menu_btn .transparent { opacity: 0; }
|
||||
|
||||
header .mobile__menu_btn .rotate-top {
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotatez(45deg);
|
||||
-webkit-transform-origin: 0%;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn .rotate-bottom {
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotatez(-45deg);
|
||||
-webkit-transform-origin: 15%;
|
||||
}
|
||||
/* Classes pour le responsive */
|
||||
.show-for-small-only{ display: block;}
|
||||
.hide-for-small-only{ display: none;}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -264,7 +264,6 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
|
||||
.background-image{
|
||||
page: backgroundImage;
|
||||
/* page-break-after: always;*/
|
||||
margin-top: -1cm;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -275,8 +274,6 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
margin-top: 0;
|
||||
padding: 1mm 1mm;
|
||||
top: 0;
|
||||
/* left: 10mm;*/
|
||||
/* top: calc(9in - 15mm);*/
|
||||
}
|
||||
|
||||
.background-image figcaption p{
|
||||
|
|
@ -388,13 +385,7 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
|
||||
|
||||
/* ------- TABLE OF CONTENTS --------- */
|
||||
|
||||
.toc{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
/* counters */
|
||||
|
||||
#list-toc-generated{
|
||||
counter-reset: counterTocLevel1;
|
||||
list-style: none;
|
||||
|
|
@ -414,36 +405,13 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
content: target-counter(attr(href), page);
|
||||
position: absolute;
|
||||
right:0;
|
||||
font-size: 13pt;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element-level-2 a::after{
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element-level-1{
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element-level-2{
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#list-toc-generated li span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -------- FOOTNOTES ---------- */
|
||||
/*span.footnote {
|
||||
float: footnote;
|
||||
}
|
||||
|
||||
.footnote::footnote-call {
|
||||
content: counter(footnote, decimal) " ";
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -116,58 +116,77 @@
|
|||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
/* ---- TOC ---- */
|
||||
.toc{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
/* ---- INTERPAGES ------ */
|
||||
#list-toc-generated .toc-element a::after{
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.interpage figure{
|
||||
height: calc(var(--pagedjs-height) - (var(--border) * 2)) !important;
|
||||
margin-top: calc(var(--border) + 3mm);
|
||||
width: 100%;
|
||||
}
|
||||
#list-toc-generated .toc-element-level-2 a::after{
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
/* ---- PAGE DE TITRE ------ */
|
||||
#list-toc-generated .toc-element-level-1{
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.chapter-title{
|
||||
page: chapterTitle;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#list-toc-generated .toc-element-level-2{
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@page chapterTitle{
|
||||
background: var(--bleu);
|
||||
margin: 12mm 0mm;
|
||||
@top-left-corner {content: none;}
|
||||
@top-left {content: none;}
|
||||
@top-center {content: none;}
|
||||
@top-right {content: none;}
|
||||
@top-right-corner {content: none;}
|
||||
@left-top {content: none;}
|
||||
@left-middle {content: none;}
|
||||
@left-bottom {content: none;}
|
||||
@right-top {content: none;}
|
||||
@right-middle {content: none;}
|
||||
@right-bottom {content: none;}
|
||||
@bottom-left-corner {content: none;}
|
||||
@bottom-left {content: none;}
|
||||
@bottom-center {content: none;}
|
||||
@bottom-right {content: none;}
|
||||
@bottom-right-corner {content: none;}
|
||||
}
|
||||
/* ---- INTERPAGES ------ */
|
||||
.interpage figure{
|
||||
height: calc(var(--pagedjs-height) - (var(--border) * 2)) !important;
|
||||
margin-top: calc(var(--border) + 3mm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chapter-title h2,
|
||||
.chapter-title h3,
|
||||
.chapter-title p {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: #FFF;
|
||||
font-size: var(--textSize);
|
||||
text-align: center;
|
||||
}
|
||||
/* ---- PAGE DE TITRE ------ */
|
||||
|
||||
/* ascii-fill : pas de flex:1, hauteur fixée par JS */
|
||||
.chapter-title{
|
||||
page: chapterTitle;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@page chapterTitle{
|
||||
background: var(--bleu);
|
||||
margin: 12mm 0mm;
|
||||
@top-left-corner {content: none;}
|
||||
@top-left {content: none;}
|
||||
@top-center {content: none;}
|
||||
@top-right {content: none;}
|
||||
@top-right-corner {content: none;}
|
||||
@left-top {content: none;}
|
||||
@left-middle {content: none;}
|
||||
@left-bottom {content: none;}
|
||||
@right-top {content: none;}
|
||||
@right-middle {content: none;}
|
||||
@right-bottom {content: none;}
|
||||
@bottom-left-corner {content: none;}
|
||||
@bottom-left {content: none;}
|
||||
@bottom-center {content: none;}
|
||||
@bottom-right {content: none;}
|
||||
@bottom-right-corner {content: none;}
|
||||
}
|
||||
|
||||
.chapter-title h2,
|
||||
.chapter-title h3,
|
||||
.chapter-title p {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: #FFF;
|
||||
font-size: var(--textSize);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ascii-fill : pas de flex:1, hauteur fixée par JS */
|
||||
.ascii-fill {
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
|
|
@ -339,6 +358,71 @@
|
|||
margin-left: 1mm;
|
||||
}
|
||||
|
||||
/* ----- IMAGES (SEPARATION DES COUCHES) ----- */
|
||||
.print-image{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.print-image div{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mix-blend-mode: multiply;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.print-image figcaption{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.print-image .print-red{
|
||||
position: relative;
|
||||
background: var(--rouge);
|
||||
}
|
||||
|
||||
.print-image .print-green{
|
||||
background: var(--vert);
|
||||
}
|
||||
|
||||
.print-image .print-blue{
|
||||
background: var(--bleu);
|
||||
}
|
||||
|
||||
.print-image > div > img{
|
||||
mix-blend-mode: screen;
|
||||
-webkit-filter: grayscale(100%) contrast(200%);
|
||||
filter: grayscale(100%) contrast(200%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.print-image { display: block;}
|
||||
.web-image { display: none;}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Gestion des couches */
|
||||
body.isolate-red-layer .green-layer,
|
||||
body.isolate-red-layer .blue-layer,
|
||||
body.isolate-red-layer .black-layer { display: none; }
|
||||
|
||||
body.isolate-green-layer .red-layer,
|
||||
body.isolate-green-layer .blue-layer,
|
||||
body.isolate-green-layer .black-layer { display: none; }
|
||||
|
||||
body.isolate-blue-layer .red-layer,
|
||||
body.isolate-blue-layer .green-layer,
|
||||
body.isolate-blue-layer .black-layer { display: none; }
|
||||
|
||||
body.isolate-black-layer .red-layer,
|
||||
body.isolate-black-layer .green-layer,
|
||||
body.isolate-black-layer .blue-layer { display: none; }
|
||||
|
||||
/* Noir et blanc */
|
||||
body.mode-black .print-image > div {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
:root{
|
||||
--margin: 1em;
|
||||
|
||||
/*--fontFamily: "Routed Gothic";*/
|
||||
--fontFamily: "JetBrains Mono NL";
|
||||
/*--textSize: 11pt;*/
|
||||
--textSize: 9pt;
|
||||
--ratio : auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,85 @@
|
|||
@media screen{
|
||||
|
||||
/* ---- H E A D E R -----*/
|
||||
header{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top:0;
|
||||
left:0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
z-index: 1000;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
header.row{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn span {
|
||||
display: block;
|
||||
background: #000;
|
||||
height: 2px;
|
||||
width: 26px;
|
||||
position: absolute;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn span:nth-child(1) { top: 0px; }
|
||||
header .mobile__menu_btn span:nth-child(2) { top: 8px; }
|
||||
header .mobile__menu_btn span:nth-child(3) { top: 16px; }
|
||||
header .mobile__menu_btn .transparent { opacity: 0; }
|
||||
|
||||
header .mobile__menu_btn .rotate-top {
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotatez(45deg);
|
||||
-webkit-transform-origin: 0%;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
header .mobile__menu_btn .rotate-bottom {
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotatez(-45deg);
|
||||
-webkit-transform-origin: 15%;
|
||||
}
|
||||
|
||||
/* ---- M A I N -----*/
|
||||
main{
|
||||
padding-top: 250px;
|
||||
max-width: 42em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
}
|
||||
/* fade entre les pages */
|
||||
#fade{
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
#fade.loaded{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ---- IMAGES GESTION WEB / PRINT --- */
|
||||
.web-image { display: block;}
|
||||
.print-image { display: none;}
|
||||
|
||||
|
||||
/* ---- IMAGES LIGHT BOX ---- */
|
||||
.glightbox-clean .gslide-title{
|
||||
font-family: var(--fontFamily);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue