From 9633ececf068129150e2a6f8ec06ead1d89122c3 Mon Sep 17 00:00:00 2001 From: grgr Date: Sat, 7 May 2022 20:24:57 +0200 Subject: [PATCH] test pagedjs failed --- contents.js | 10 ++- index.html | 39 ++++++----- interface.css | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++ print.css | 60 +++++++++++++++++ style.css | 8 ++- 5 files changed, 277 insertions(+), 20 deletions(-) create mode 100644 interface.css create mode 100644 print.css diff --git a/contents.js b/contents.js index b787f81..9f4630e 100644 --- a/contents.js +++ b/contents.js @@ -1,11 +1,13 @@ + const reference = document.getElementById("reference"); const contributionsList = document.getElementById("contributions"); -window.addEventListener("load", () => { - fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions") + + function fetchContents(){ + fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions") .then((response) => response.json()) .then((data) => populateContributions(data)); -}); +} function populateContributions(contributions) { contributions.forEach((contribution) => { @@ -23,3 +25,5 @@ function createSection(contribution) { section.querySelector(".content").innerHTML = contribution.content_html; return section; } + + diff --git a/index.html b/index.html index 58e18aa..8f9d255 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,12 @@ - - + + + + Emergent Opera @@ -40,19 +44,24 @@
Erica, Gersande, Kamo
-
-
- - -
-
overture
-

Overture Atlas

-
-
description
-
-
- - + +
+

+ Index +

+
+
+ + +
+
overture
+

Overture Atlas

+
+
description
+
+
+ + diff --git a/interface.css b/interface.css new file mode 100644 index 0000000..bc4aadf --- /dev/null +++ b/interface.css @@ -0,0 +1,180 @@ +/* CSS for Paged.js interface – v0.2 */ + +/* Change the look */ +:root { + --color-background: whitesmoke; + --color-pageSheet: #cfcfcf; + --color-pageBox: violet; + --color-paper: white; + --color-marginBox: transparent; + --pagedjs-crop-color: black; + --pagedjs-crop-shadow: white; + --pagedjs-crop-stroke: 1px; +} + +/* To define how the book look on the screen: */ +@media screen { + body { + background-color: var(--color-background); + } + + .pagedjs_pages { + display: flex; + width: calc(var(--pagedjs-width) * 2); + flex: 0; + flex-wrap: wrap; + margin: 0 auto; + } + + .pagedjs_page { + background-color: var(--color-paper); + box-shadow: 0 0 0 1px var(--color-pageSheet); + margin: 0; + flex-shrink: 0; + flex-grow: 0; + margin-top: 10mm; + } + + .pagedjs_first_page { + margin-left: var(--pagedjs-width); + } + + .pagedjs_page:last-of-type { + margin-bottom: 10mm; + } + + .pagedjs_pagebox { + box-shadow: 0 0 0 1px var(--color-pageBox); + } + + .pagedjs_left_page { + z-index: 20; + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width)) !important; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { + border-color: transparent; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle { + width: 0; + } + + .pagedjs_right_page { + z-index: 10; + position: relative; + left: calc(var(--pagedjs-bleed-left)*-1); + } + + /* show the margin-box */ + + .pagedjs_margin-top-left-corner-holder, + .pagedjs_margin-top, + .pagedjs_margin-top-left, + .pagedjs_margin-top-center, + .pagedjs_margin-top-right, + .pagedjs_margin-top-right-corner-holder, + .pagedjs_margin-bottom-left-corner-holder, + .pagedjs_margin-bottom, + .pagedjs_margin-bottom-left, + .pagedjs_margin-bottom-center, + .pagedjs_margin-bottom-right, + .pagedjs_margin-bottom-right-corner-holder, + .pagedjs_margin-right, + .pagedjs_margin-right-top, + .pagedjs_margin-right-middle, + .pagedjs_margin-right-bottom, + .pagedjs_margin-left, + .pagedjs_margin-left-top, + .pagedjs_margin-left-middle, + .pagedjs_margin-left-bottom { + box-shadow: 0 0 0 1px inset var(--color-marginBox); + } + + /* uncomment this part for recto/verso book : ------------------------------------ */ + + /* + .pagedjs_pages { + flex-direction: column; + width: 100%; + } + + .pagedjs_first_page { + margin-left: 0; + } + + .pagedjs_page { + margin: 0 auto; + margin-top: 10mm; + } + + .pagedjs_left_page{ + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{ + border-color: var(--pagedjs-crop-color); + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ + width: var(--pagedjs-cross-size)!important; + } + + .pagedjs_right_page{ + left: 0; + } + */ + + + + /*--------------------------------------------------------------------------------------*/ + + + + /* uncomment this par to see the baseline : -------------------------------------------*/ + + + /* .pagedjs_pagebox { + --pagedjs-baseline: 22px; + --pagedjs-baseline-position: 5px; + --pagedjs-baseline-color: cyan; + background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent; + background-size: 100% var(--pagedjs-baseline); + background-repeat: repeat-y; + background-position-y: var(--pagedjs-baseline-position); + } */ + + + /*--------------------------------------------------------------------------------------*/ +} + + + + + +/* Marks (to delete when merge in paged.js) */ + +.pagedjs_marks-crop { + z-index: 999999999999; + +} + +.pagedjs_bleed-top .pagedjs_marks-crop, +.pagedjs_bleed-bottom .pagedjs_marks-crop { + box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-top .pagedjs_marks-crop:last-child, +.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child { + box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-left .pagedjs_marks-crop, +.pagedjs_bleed-right .pagedjs_marks-crop { + box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-left .pagedjs_marks-crop:last-child, +.pagedjs_bleed-right .pagedjs_marks-crop:last-child { + box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow); +} \ No newline at end of file diff --git a/print.css b/print.css new file mode 100644 index 0000000..bc5c4fd --- /dev/null +++ b/print.css @@ -0,0 +1,60 @@ +@media print{ + + @page { + size: A5; + margin-top: 10mm; + margin-right: 20mm; + margin-bottom: 25mm; + margin-left: 15mm; + } + + html, body { + font-size: 14px; + } + + .container{ + display: block; + width: auto; + height: auto; + } + + .libretto{ + overflow: hidden; + } + .libretto > * { + border: none; + } + + + + header.cover{ + width: auto; + height: 100%; + min-height: auto; + padding: 0; + border: none; + } + + .cover .title { + font-size: 46px; + margin: 64px 0; + } + + .atlas, + .cover, + .contributions, + .contribution, + .index { + break-before: page; + } + + + .info{ + display: none; + } + + .index { + display: block; + } + +} \ No newline at end of file diff --git a/style.css b/style.css index d5271bb..f083770 100644 --- a/style.css +++ b/style.css @@ -9,6 +9,8 @@ } + + body, html{ margin: 0; padding: 0; @@ -86,7 +88,7 @@ body, html{ } dl { - margin-top: 64px; + margin-top: 128px; } dt { @@ -106,4 +108,6 @@ dd { #reference { display: none; -} \ No newline at end of file +} + +