portfolio iyo bissek

assets/css/figures.css

@@ -49,6 +49,10 @@ figure[data-crop="false"] img {
 
 
 /* --- INTERPAGE ---- */
+
+.interpage{
+  break-before: left;
+}
 .interpage figure {
   /*background-color: var(--copper);*/
   background-color: var(--silver);

assets/css/portfolio.css

@@ -3,8 +3,33 @@
     --pagedjs-fold: 0px;
 }
 
+.portfolio{
+  page: portfolio;
+  --margin: 8mm;
+}
+
+@page portfolio:first{
+   
+    @top-left { content: none;}
+    @top-right { content: none; }
+    @top-center { content: none;}
+     @top-right-corner { content: none;}
+      @top-left-corner { content: none; display: none; }
+}
+
+@page portfolio:nth(2){
+   
+    @top-left { content: none;}
+    @top-right { content: none; }
+    @top-center { content: none;}
+     @top-right-corner { content: none;}
+      @top-left-corner { content: none; display: none; }
+}
+
+
+
 .pagedjs_portfolio_page .pagedjs_sheet{
-  overflow: visible !important;
+  /* overflow: visible !important; */
 }
 
 [data-chapter="portfolio"] p{
@@ -19,6 +44,114 @@
 }
 
 
+.portfolio .chapter-header{
+  break-before: right;
+}
+
+
+.portfolio img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+}
+
+
+.intro-portfolio{
+  width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
+  position: absolute;
+  left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
+  top: calc(var(--pagedjs-margin-top)*-1 + var(--margin));
+
+}
+
+.portfolio-simple-paysage{
+  width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
+  position: relative;
+  left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
+}
+
+
+.portfolio-full-page{
+     break-before: page;
+   break-after: page;
+}
+
+.portfolio-full-page figure{
+  position: absolute;
+  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images)*2);
+  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2);
+  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
+  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
+ z-index: -1;
+}
+
+
+.portfolio-spread-left{
+  break-before: left;
+}
+
+.portfolio-spread-right{
+    break-before: right;
+}
+
+.portfolio-spread figure{
+  position: absolute;
+  z-index: -1;
+  width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
+  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
+  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
+  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
+}
+
+.portfolio-spread-right figure{
+  left: calc(var(--pagedjs-pagebox-width)*-1 - var(--pagedjs-margin-left) - var(--bleed-images));
+}
+
+
+
+
+
+/* IYO BISSECK -------------------------------------------- */
+
+#fig-iyo-bisseck-3{
+  break-before: page;
+}
+
+
+#fig-iyo-bisseck-4 img{
+  object-fit: contain;
+  width: 80%;
+  object-position: calc(var(--margin) + var(--bleed-images)) calc(var(--pagedjs-margin-top) + var(--bleed-images));
+
+}
+
+
+/* #fig-iyo-bisseck-5 img{
+  position: relative;
+  width: 80%;
+  left: calc(20% - var(--bleed-images));
+ object-fit: contain;
+  object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
+} */
+
+#fig-iyo-bisseck-5 img{
+    object-fit: contain;
+  width: 80%;
+  position: relative;
+  left: calc(10% - var(--bleed-images));
+
+}
+
+#fig-iyo-bisseck-6, #fig-iyo-bisseck-7{
+  break-before: page;
+}
+
+
+
+
+
+
 /* ------ DOUBLE PAGE ------- */ 
 
 .spread{
@@ -45,7 +178,6 @@
   left: 0;
   overflow: hidden;
   break-after: page;
-  /*break-before: left;*/
 }
 .spread__right{
   margin: 0;

assets/css/print-template.css

@@ -72,9 +72,13 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
   --pagedjs-full-page: spread;
 }
 
+
+.block-type-fullpageimage{
+  break-before: page;
+  break-after: page;
+}
+
 .full-bleed-image{
-  break-before: left;
-  page-break-after: always;
   position: absolute;
   top: calc(var(--pagedjs-margin-top)*-1 - var(--pagedjs-bleed-top));
   height: var(--pagedjs-height);
@@ -220,7 +224,7 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
 }
 
 
-.spread-image figure.full-width img;
+.spread-image figure.full-width img,
 .full-bleed-image figure.full-width img{
   max-width: 100%;
   height: auto;

assets/css/print.css

@@ -166,11 +166,11 @@
 
 
   @page:blank {
-    @top-left { content: none;}
+    /* @top-left { content: none;}
     @top-left-corner { content: none;}
     @top-right { content: none; }
     @top-center { content: none;}
-    @bottom-center { content: none; }
+    @bottom-center { content: none; } */
 
 
   }

assets/js/plugins/beforeParsed.js

@@ -6,6 +6,7 @@ class before extends Paged.Handler {
 
     beforeParsed(content) {
         paragraphId(content);
+        portfolioSpread(content);
     }
 }
 
@@ -28,4 +29,14 @@ function paragraphId(content) {
         paragraph.dataset.uniqueId = id;
     });
 
+}
+
+
+function portfolioSpread(content){
+    content.querySelectorAll('.portfolio-spread').forEach(block => {
+        const clone = block.cloneNode(true);
+        clone.classList.add('portfolio-spread-right');
+        block.classList.add('portfolio-spread-left');
+        block.parentNode.insertBefore(clone, block.nextSibling);
+    });
 }

assets/js/plugins/followingNotes.js

@@ -10,15 +10,13 @@ class followingNotes extends Paged.Handler {
     super(chunker, polisher, caller);
     this.notesClass = ".inline-note";
     this.newNotesClass = "following-note";
-    // this.reset = this.parameters?.reset;
+    this.reset = ".chapter";
     // this.align = this.parameters?.align;
     this.followingNoteOverflow = new Set();
   }
 
   beforeParsed(content) {
 
-    console.log("floatnotes");
-
     let newNotesClass = this.newNotesClass;
     resetCounter(content, this.reset, this.notesClass);
     createCallandMarker(content, this.notesClass, newNotesClass);