first commit

assets/style.css

@@ -0,0 +1,362 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased
+}
+
+
+body{
+    font-family: 'Area Normal';
+    font-size: 12px;
+    line-height: 1.5em;
+    --small: 9px;
+    --light: #bfbfbf;
+    --title: 20px;
+    --mono: 'Geist Mono';
+    --table-w: 760px;
+}
+
+a{
+    color: currentColor;
+}
+
+img{ width: 100%; }
+
+
+@page {
+    size: A4 landscape;
+    margin-left: 14mm;
+    margin-right: 14mm;
+    margin-top: 8mm; 
+    margin-bottom: 14mm; 
+    @bottom-left {
+      content: element(titleRunning);
+     
+      
+      
+    }
+    @bottom-right-corner{
+        content: counter(page) "/" counter(pages);
+        /* font-size: 8px; */
+        color: var(--light);
+        text-align: left;
+    
+        
+    }
+  }
+
+#note-intention,
+#devis,
+#equipe,
+#details{
+    break-before: page;
+    break-after: page;
+}
+
+
+header{
+    margin-top: 20em;
+    margin-bottom: 3em;
+}
+header h1{
+    font-size: 6em;
+    line-height: 1em;
+}
+
+header h2{
+    margin-top: 0.5em;
+}
+
+
+#studio-variable{
+    break-after: page;
+    max-width: 56ch;
+ 
+}
+
+
+
+
+.infos{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 1ch;
+}
+
+
+section > h2{
+    font-weight: bold;
+    font-size: var(--title);
+    break-after: none;
+    margin-bottom: 2em;
+}
+
+section > h2::before{
+    content: '● ';
+}
+
+p{ 
+    margin: .75em 0;
+    widows: 3;
+    orphans: 3;
+}
+
+h3{
+    font-size: 1em;
+    margin-top: 2em;
+    margin-bottom: 1em;
+}
+
+
+
+ul{
+    list-style-type: square;
+    margin-left: 2em;
+}
+
+footer{
+    position: running(titleRunning);
+    /* font-size: 8px; */
+    color: var(--light);
+
+}
+
+
+@media screen, pagedjs-ignore{
+    body{
+        padding: 20px;
+        background-color: #efefef
+    }
+    .pagedjs_page{
+        outline: 1px solid #cfcfcf;
+        background-color: white;
+        margin-bottom: 30px;
+    }
+
+    .pagedjs_pages{
+        margin: 0 auto;
+        width: var(--pagedjs-width-right);
+    }
+}
+
+
+
+/* NOTE INTENTION -------------------------------------------- */
+
+#note-intention{
+    columns: 2;
+    column-fill: auto;
+    column-gap: 2.5em;
+
+}
+
+#note-intention h2{
+    column-span: all;
+}
+
+#note-intention h2 + p{
+    margin-top: 0em;
+}
+
+
+/* DEVIS -------------------------------------------- */
+
+
+
+#devis h2 + p{
+
+    width: var(--table-w);
+    text-align: right; 
+    margin-bottom: 1.5em;
+}
+
+#devis table{
+    width: 760px;
+    /* font-family: var(--mono); */
+    border-collapse: collapse;
+    border-bottom: 1px solid #cfcfcf;
+}
+
+#devis table thead th{
+    background-color: #efefef;
+    text-align: left;
+}
+
+#devis table thead th, td{
+    padding: 5px 1ch;
+}
+
+#devis table thead th:nth-of-type(2),
+#devis table thead th:nth-of-type(3),
+#devis table td:nth-of-type(2),
+#devis table td:nth-of-type(3){
+    text-align: right!important;
+}
+
+#devis table tr:nth-of-type(even){
+    background-color: #efefef;
+
+}
+
+#devis table .indent{
+    display: inline-block;
+    width: 4ch;
+}
+
+
+#devis #total table{
+    /* border-top: 1px solid #cfcfcf; */
+    width: 400px;
+    margin-left: calc(var(--table-w) - 400px);
+    margin-top: 2em;
+    border-bottom: none;
+}
+
+#devis #total th,
+#devis #total td{
+    background-color: transparent!important;
+    font-weight: bold;
+}
+
+#devis #total tr:nth-of-type(1){
+    color: var(--light);
+}
+
+
+#devis #total tr:nth-of-type(2) td{
+    background-color: transparent!important;
+}
+
+
+#devis #total + p{
+    margin-top: 3em;
+    font-size: var(--small);
+    line-height: 1.5em;
+    max-width: 40ch;
+    margin-left: calc(var(--table-w) - 400px);
+    
+}
+
+
+/* PLANNING & LIVRABLES ---------------------------------------- */
+
+
+#livrables{
+    margin-top: 5em;
+}
+
+
+/* EQUIPE --------------------------------------------------- */
+
+#equipe .people{
+    min-height: 160px;
+    break-inside: avoid;
+    margin-top: 6em;
+    margin-bottom: 6em;
+    padding-left: 220px;
+    position: relative;
+    margin-left: 5em;
+}
+
+
+#equipe figure{
+    width: 160px;
+    position: absolute;
+    left: 0px;
+ 
+}
+
+#equipe figure figcaption{
+    display: none;
+}
+
+#equipe .people h1{
+    font-size: var(--title);
+    line-height: 1.2em;
+    margin-top: 5px;
+}
+
+
+#equipe .people p{
+    max-width: 52ch;
+}
+
+
+
+
+/* PORTFOLIO intro-------------------------------------------- */
+
+#portfolio-introduction > h2{
+    margin-bottom: 0px;
+
+}
+
+
+
+
+/* PORTFOLIO 1img -------------------------------------------- */
+
+.portfolio-group{
+    display: grid;
+    grid-template-columns: 500px 1fr;
+    grid-column-gap: 2em;
+    grid-template-rows: auto auto 1fr;
+    break-inside: avoid;
+    margin-bottom: 3em;
+}
+
+.portfolio-group figure{
+    grid-column: 1;
+    grid-row: 1/4;
+    margin: 0;
+    border: 1px solid #cfcfcf;
+    aspect-ratio: 5/3;
+    overflow: hidden;
+}
+
+.portfolio-group figure figcaption{ display: none; }
+
+.portfolio-group figure img{
+    width: 100%;
+    display: flex;
+
+}
+
+.portfolio-group h1{
+    grid-column: 2;
+    grid-row: 1;
+    font-size: var(--title);
+    line-height: 1.2em;
+    margin-top: 5px;
+}
+
+.portfolio-group p{
+    grid-column: 2;
+    grid-row: 2;
+    width: 54ch;
+}
+
+.portfolio-group .details{
+    grid-column: 2;
+    grid-row: 3;
+    margin-top: 0.75em;
+}
+
+
+.portfolio-group .details dl{
+    display: flex;
+    margin-bottom: 0.5ch;
+  
+}
+
+.portfolio-group .details dt{
+    width: 12ch;
+    font-weight: bold;
+    flex: 0 0 auto;
+}
+
+