diff --git a/css/modules/_footnotes.scss b/css/modules/_footnotes.scss index 7a396cf..2bd344b 100644 --- a/css/modules/_footnotes.scss +++ b/css/modules/_footnotes.scss @@ -1,22 +1,22 @@ @page { @footnote { float: bottom; - max-height: 90%; - + footnote-policy: auto; } } .pagedjs_footnote_content{ - padding-top: calc(var(--baseline)*1); + padding-top: calc(var(--baseline)*1); } .inline-note { float: footnote; - font-size: 9.5px; - line-height: 12.8px; + footnote-policy: auto; + font-size: var(--fs-small); + line-height: calc(var(--baseline)*0.8); padding-left: var(--indent); position: relative; - // font-weight: 100; + font-weight: 600; &::marker{ display: none; @@ -30,11 +30,22 @@ &::before{ content: attr(data-counter-note) "."; position: absolute; - // left: calc(var(--indent)*-1); left: 0px; } } -[data-footnote-call]{ - font-size: 9px; +.inline-note::after{ + font-family: var(--font); + font-size: var(--fs-small); + line-height: 0; + position: relative; + top: -3px; + font-variant-position: normal!important; + } + +blockquote .inline-note{ + font-variant-position: normal!important; +} + + diff --git a/css/modules/_layout.scss b/css/modules/_layout.scss index a7e4a58..4304e1c 100644 --- a/css/modules/_layout.scss +++ b/css/modules/_layout.scss @@ -1,38 +1,51 @@ @media print { @page { - size: 134mm 205mm; + size: 176mm 240mm; // size: 150mm 220mm; - margin-top: 35px; + margin-top: 36px; margin-bottom: 20mm; - margin-left: 10mm; - margin-right: 10mm; - // bleed: 6mm; - // marks: crop; + + bleed: 6mm; + marks: crop; } @page:left { - margin-left: 12mm; - margin-right: 32mm; + margin-left: 18mm; + margin-right: 26mm; @bottom-left { content: counter(page); font-family: var(--font-title); - font-size: 11px; + font-weight: 500; + font-size: var(--fs-num); } + // @top-right { + // content: "Höchstpersönlichkeit"; + // font-variant-caps: small-caps; + // letter-spacing: 0.01em; + // } } @page:right { - margin-left: 32mm; - margin-right: 12mm; + margin-left: 26mm; + margin-right: 18mm; @bottom-right { content: counter(page); font-family: var(--font-title); - font-size: 11px; + font-weight: 500; + font-size: var(--fs-num); } - @bottom-left { + @right-top { content: "Höchstpersönlichkeit"; font-family: var(--font-title); - font-size: 11px; - // font-style: italic; - // font-variant-caps: small-caps; - // letter-spacing: 0.05em; + font-weight: normal; + // background-color: red; + transform-origin: top left; + height: calc(var(--baseline)*2); + word-spacing: nowrap; + width: 52ch; + transform: rotate(90deg); + text-align: left; + position: relative; + left: 14mm; + padding-left: 5px; } } diff --git a/css/modules/_text.scss b/css/modules/_text.scss index cd607b1..0695543 100644 --- a/css/modules/_text.scss +++ b/css/modules/_text.scss @@ -26,40 +26,8 @@ p, li{ word-spacing: -0.004em; } - + -ol[type="1"]{ - list-style-type: none; - position: relative; - break-after: avoid; - - position: absolute; - left: calc(var(--indent)*-2); - &::before{ - content: attr(start); - font-family: var(--font-sans-txt); - // font-weight: 200; - font-size: 9px; - color: #999; - display: block; - padding: 0px 2px; - border: 1px solid #cfcfcf; - - min-width: 1.5ch; - display: flex; - justify-content: center; - } - - - -} - -.pagedjs_left_page{ - ol[type="1"] { - left: inherit; - right: calc(var(--indent)*-2); - } -} p + p, ol[type="1"] + p{ @@ -69,36 +37,18 @@ ol[type="1"] + p{ blockquote{ - padding-left: var(--indent); - margin-top: calc(var(--baseline)*1); - margin-bottom: calc(var(--baseline)*1); - - font-family: var(--font-sans-txt); - font-size: var(--fs-small-q); - line-height: calc(var(--baseline)*0.9); - // font-weight: var(--w-title); - - - .inline-note::after{ - font-family: var(--font); - line-height: 0; - font-size: var(--font-size)!important; - } + font-family: var(--font-serif); + padding-left: calc(var(--indent)*1); + padding-right: calc(var(--indent)*1); + // font-size: var(--fs-small); + margin-top: calc(var(--baseline)*0.5); + margin-bottom: calc(var(--baseline)*0.5); + font-size: 12px; + color: #343434; - // p{ - // font-style: italic; - // em{ - // font-style: normal; - // } - // } - - - // u{ - // font-variant: small-caps; - // text-decoration: none; - // } } + .these + ol + p, blockquote + ol + p{ text-indent: 0px; @@ -108,9 +58,49 @@ blockquote + ol + p{ .these{ // color: red; - - margin-bottom: var(--baseline); - padding-left: var(--indent); + // font-family: var(--font-title); + margin-bottom: calc(var(--baseline)*1); border-left: 4px solid #efefef; + box-decoration-break: clone; + padding-left: calc(var(--indent)*0.5); +} -} \ No newline at end of file + +ol[type="1"]{ + list-style-type: none; + position: relative; + break-after: avoid; + + position: absolute; + left: 0px; + + display: flex; + gap: 0.25ch; + + &::after{ + content: attr(start); + // font-family: var(--font-title); + // font-weight: 500; + font-size: var(--fs-small); + color: #999; + + // display: block; + // height: var(--baseline); + + // padding-right: 1ch; + // border-right: 1px solid #efefef; + } + + li::before{ + font-size: var(--fs-small); + content: "¶"; + color: #d7d7d7; + position: relative; + top: -1px; + } + + + +} + + diff --git a/css/modules/_titles.scss b/css/modules/_titles.scss index db4cfaa..3d8fa16 100644 --- a/css/modules/_titles.scss +++ b/css/modules/_titles.scss @@ -1,24 +1,24 @@ #section__content{ + margin-left: 28mm; - - h1, h2, h3 { - text-wrap: balance; + h1, h2, h3 { &::before{ content: attr(data-counter); } } - h4, h5, h6{ - text-wrap: balance; + h4, h5, h6{ &::before{ content: attr(data-counter) ". "; } } - h1, h2, h3 { + + h1, h2, h3 , h4{ break-inside: avoid; break-after: avoid; + text-wrap: balance; /* hack for avoiding break-after */ margin-bottom: calc(var(--baseline)*-3); @@ -26,13 +26,13 @@ content: ''; display: block; height: calc(var(--baseline)*3); - // background-color: rgba(255, 255, 0, 0.595); } } - h4, h5, h6 { + h5, h6 { break-inside: avoid; break-after: avoid; + text-wrap: balance; /* hack for avoiding break-after */ margin-bottom: calc(var(--baseline)*-2); @@ -54,102 +54,135 @@ text-indent: 0; } - h1{ - font-family: var(--font-title); - text-transform: uppercase; - font-weight: var(--w-title); + - font-size: 1.3rem; - line-height: calc(var(--baseline)*1.4); - text-align: center; - position: relative; - margin-top: calc(var(--baseline)*3 - 3px); - padding-bottom: calc(var(--baseline)*1); - padding-left: 1ch; - padding-right: 1ch; - &::before{ - display: block; - font-size: 1rem; - - } - } - - h1:first-of-type{ - margin-top: 3px!important; - } h2{ font-family: var(--font-title); - text-transform: uppercase; - font-weight: var(--w-title); - font-size: 1.1rem; + font-weight: 500; + text-transform: uppercase; line-height: calc(var(--baseline)*1.2); - - text-align: right; - padding-left: 4ch; position: relative; - margin-top: calc(var(--baseline)*1 + 9px); + margin-top: calc(var(--baseline)*1 + 6px); padding-bottom: calc(var(--baseline)*1); + padding-right: 2ch; + padding-left: calc(var(--indent)*2); &::before{ position: absolute; left: 0; + // display: block; + // font-size: var(--fs-num); + // padding-left: var(--indent); } } + + h3{ - font-family: var(--font-sans); - font-weight: var(--w-title); + font-family: var(--font-title); + font-weight: 500; font-size: 1rem; line-height: calc(var(--baseline)*1); - text-align: right; - padding-left: 3ch; + // padding-left: var(--indent); + padding-right: calc(var(--indent)*2); position: relative; - margin-top: calc(var(--baseline)*1 + 9px); - padding-bottom: calc(var(--baseline)*1); + margin-top: calc(var(--baseline)*1 + 4px); + padding-bottom: calc(var(--baseline)*0.75); + padding-left: calc(var(--indent)*2); &::before{ - // font-family: 'Helixotrope 4'; - // font-size: var(--font-size); - // font-weight: bold; + position: absolute; left: 0; } } h4{ - font-family: var(--font-sans); - font-weight: var(--w-title); + font-family: var(--font-title); + font-weight: 500; + font-size: 0.9rem; + line-height: calc(var(--baseline)*1); + padding-right: calc(var(--indent)*2); + position: relative; + margin-top: calc(var(--baseline)*1 + 4px); + padding-bottom: calc(var(--baseline)*0.75); + text-decoration: underline 1px #cfcfcf; + text-underline-offset: 3px; + + padding-left: calc(var(--indent)*2); + &::before{ + + // position: absolute; + // left: 0; + } + } + + + h5{ + font-family: var(--font-title); + font-weight: 500; font-size: 0.8rem; line-height: calc(var(--baseline)*1); - - text-align: right; - padding-left: 3ch; + padding-left: calc(var(--indent)*2); + // padding-right: calc(var(--indent)*2); position: relative; - margin-top: calc(var(--baseline)*0.5); - padding: calc(var(--baseline)*0.5); - - } - - - h5{ - font-family: var(--font-sans); - font-weight: var(--w-title); - font-size: 0.7rem; - line-height: calc(var(--baseline)*1); - position: relative; - margin-top: calc(var(--baseline)*0.75); + margin-top: calc(var(--baseline)*1 + 4px); padding-bottom: calc(var(--baseline)*0.25); - } + h6{ + font-family: var(--font-title); + font-weight: 500; + font-size: 0.8rem; + margin-top: calc(var(--baseline)*0.5); + padding-bottom: calc(var(--baseline)*0.25); + color: #666; + } + + } [data-id="section__content"][data-split-from] > :first-child { margin-top: 0; -} \ No newline at end of file +} + + h1{ + font-family: var(--font-title); + font-size: 1.6rem; + font-weight: 500; + text-transform: uppercase; + line-height: calc(var(--baseline)*1.6); + // text-align: center; + position: relative; + margin-top: calc(var(--baseline)*2 - 3px); + padding-bottom: calc(var(--baseline)*1); + padding-left: calc(var(--indent)*2); + padding-right: 1ch; + + + &::before{ + // font-size: var(--fs-num); + // width: 2ch; + // height: 2ch; + // border: 1px solid currentColor; + // border-radius: 50%; + // display: flex; + // align-items: center; + // justify-content: center; + position: absolute; + left: 0; + width: calc(var(--indent)*2 - 0.5ch); + // border-bottom: 2px solid #cfcfcf; + // top: 3px; + } + } + + section h1:first-of-type{ + margin-top: 3px!important; + } \ No newline at end of file diff --git a/css/modules/_var.scss b/css/modules/_var.scss index 0083670..18aac84 100644 --- a/css/modules/_var.scss +++ b/css/modules/_var.scss @@ -1,14 +1,13 @@ :root{ - --font: 'Edgar', sans-serif; - --font-title: "Moulin", sans-serif; - --w-title: normal; - // --font-sans: "Heliotrope 4", sans-serif; - --font-sans: "Moulin", sans-serif; - // --font-sans-txt: 'Akkurat Std'; - --font-sans-txt: 'Moulin', sans-serif; - --font-size: 12px; - --fs-small-q: 11px; + --font: 'Akkurat Std', sans-serif; + --font-serif: 'Edgar', sans-serif; + --font-title: 'Allium Rounded', sans-serif; + --font-sans: 'Allium Rounded', sans-serif; + --font-size: 11px; + --fs-small: 8.5px; + --fs-num: 14px; --baseline: 16px; + --indent: 26px; } diff --git a/css/style.css b/css/style.css index 08fb957..78bb725 100644 --- a/css/style.css +++ b/css/style.css @@ -1,12 +1,12 @@ @charset "UTF-8"; :root { - --font: "Edgar", sans-serif; - --font-title: "Moulin", sans-serif; - --w-title: normal; - --font-sans: "Moulin", sans-serif; - --font-sans-txt: "Moulin", sans-serif; - --font-size: 12px; - --fs-small-q: 11px; + --font: "Akkurat Std", sans-serif; + --font-serif: "Edgar", sans-serif; + --font-title: "Allium Rounded", sans-serif; + --font-sans: "Allium Rounded", sans-serif; + --font-size: 11px; + --fs-small: 8.5px; + --fs-num: 14px; --baseline: 16px; --indent: 26px; } @@ -33,33 +33,44 @@ body { @media print { @page { - size: 134mm 205mm; - margin-top: 35px; + size: 176mm 240mm; + margin-top: 36px; margin-bottom: 20mm; - margin-left: 10mm; - margin-right: 10mm; + bleed: 6mm; + marks: crop; } @page :left { - margin-left: 12mm; - margin-right: 32mm; + margin-left: 18mm; + margin-right: 26mm; @bottom-left { content: counter(page); font-family: var(--font-title); - font-size: 11px; + font-weight: 500; + font-size: var(--fs-num); } } @page :right { - margin-left: 32mm; - margin-right: 12mm; + margin-left: 26mm; + margin-right: 18mm; @bottom-right { content: counter(page); font-family: var(--font-title); - font-size: 11px; + font-weight: 500; + font-size: var(--fs-num); } - @bottom-left { + @right-top { content: "Höchstpersönlichkeit"; font-family: var(--font-title); - font-size: 11px; + font-weight: normal; + transform-origin: top left; + height: calc(var(--baseline) * 2); + word-spacing: nowrap; + width: 52ch; + transform: rotate(90deg); + text-align: left; + position: relative; + left: 14mm; + padding-left: 5px; } } @page :first { @@ -197,49 +208,19 @@ p, li { word-spacing: -0.004em; } -ol[type="1"] { - list-style-type: none; - position: relative; - -moz-column-break-after: avoid; - break-after: avoid; - position: absolute; - left: calc(var(--indent) * -2); -} -ol[type="1"]::before { - content: attr(start); - font-family: var(--font-sans-txt); - font-size: 9px; - color: #999; - display: block; - padding: 0px 2px; - border: 1px solid #cfcfcf; - min-width: 1.5ch; - display: flex; - justify-content: center; -} - -.pagedjs_left_page ol[type="1"] { - left: inherit; - right: calc(var(--indent) * -2); -} - p + p, ol[type="1"] + p { text-indent: calc(var(--indent) * 0.5); } blockquote { - padding-left: var(--indent); - margin-top: calc(var(--baseline) * 1); - margin-bottom: calc(var(--baseline) * 1); - font-family: var(--font-sans-txt); - font-size: var(--fs-small-q); - line-height: calc(var(--baseline) * 0.9); -} -blockquote .inline-note::after { - font-family: var(--font); - line-height: 0; - font-size: var(--font-size) !important; + font-family: var(--font-serif); + padding-left: calc(var(--indent) * 1); + padding-right: calc(var(--indent) * 1); + margin-top: calc(var(--baseline) * 0.5); + margin-bottom: calc(var(--baseline) * 0.5); + font-size: 12px; + color: #343434; } .these + ol + p, @@ -248,45 +229,69 @@ blockquote + ol + p { } .these { - margin-bottom: var(--baseline); - padding-left: var(--indent); + margin-bottom: calc(var(--baseline) * 1); border-left: 4px solid #efefef; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + padding-left: calc(var(--indent) * 0.5); } -#section__content h1, #section__content h2, #section__content h3 { - text-wrap: balance; +ol[type="1"] { + list-style-type: none; + position: relative; + -moz-column-break-after: avoid; + break-after: avoid; + position: absolute; + left: 0px; + display: flex; + gap: 0.25ch; +} +ol[type="1"]::after { + content: attr(start); + font-size: var(--fs-small); + color: #999; +} +ol[type="1"] li::before { + font-size: var(--fs-small); + content: "¶"; + color: #d7d7d7; + position: relative; + top: -1px; +} + +#section__content { + margin-left: 28mm; } #section__content h1::before, #section__content h2::before, #section__content h3::before { content: attr(data-counter); } -#section__content h4, #section__content h5, #section__content h6 { - text-wrap: balance; -} #section__content h4::before, #section__content h5::before, #section__content h6::before { content: attr(data-counter) ". "; } -#section__content h1, #section__content h2, #section__content h3 { +#section__content h1, #section__content h2, #section__content h3, #section__content h4 { -moz-column-break-inside: avoid; break-inside: avoid; -moz-column-break-after: avoid; break-after: avoid; + text-wrap: balance; /* hack for avoiding break-after */ margin-bottom: calc(var(--baseline) * -3); } -#section__content h1::after, #section__content h2::after, #section__content h3::after { +#section__content h1::after, #section__content h2::after, #section__content h3::after, #section__content h4::after { content: ""; display: block; height: calc(var(--baseline) * 3); } -#section__content h4, #section__content h5, #section__content h6 { +#section__content h5, #section__content h6 { -moz-column-break-inside: avoid; break-inside: avoid; -moz-column-break-after: avoid; break-after: avoid; + text-wrap: balance; /* hack for avoiding break-after */ margin-bottom: calc(var(--baseline) * -2); } -#section__content h4::after, #section__content h5::after, #section__content h6::after { +#section__content h5::after, #section__content h6::after { content: ""; display: block; height: calc(var(--baseline) * 2); @@ -299,86 +304,100 @@ blockquote + ol + p { #section__content h6 + ol + p { text-indent: 0; } -#section__content h1 { - font-family: var(--font-title); - text-transform: uppercase; - font-weight: var(--w-title); - font-size: 1.3rem; - line-height: calc(var(--baseline) * 1.4); - text-align: center; - position: relative; - margin-top: calc(var(--baseline) * 3 - 3px); - padding-bottom: calc(var(--baseline) * 1); - padding-left: 1ch; - padding-right: 1ch; -} -#section__content h1::before { - display: block; - font-size: 1rem; -} -#section__content h1:first-of-type { - margin-top: 3px !important; -} #section__content h2 { font-family: var(--font-title); - text-transform: uppercase; - font-weight: var(--w-title); font-size: 1.1rem; + font-weight: 500; + text-transform: uppercase; line-height: calc(var(--baseline) * 1.2); - text-align: right; - padding-left: 4ch; position: relative; - margin-top: calc(var(--baseline) * 1 + 9px); + margin-top: calc(var(--baseline) * 1 + 6px); padding-bottom: calc(var(--baseline) * 1); + padding-right: 2ch; + padding-left: calc(var(--indent) * 2); } #section__content h2::before { position: absolute; left: 0; } #section__content h3 { - font-family: var(--font-sans); - font-weight: var(--w-title); + font-family: var(--font-title); + font-weight: 500; font-size: 1rem; line-height: calc(var(--baseline) * 1); - text-align: right; - padding-left: 3ch; + padding-right: calc(var(--indent) * 2); position: relative; - margin-top: calc(var(--baseline) * 1 + 9px); - padding-bottom: calc(var(--baseline) * 1); + margin-top: calc(var(--baseline) * 1 + 4px); + padding-bottom: calc(var(--baseline) * 0.75); + padding-left: calc(var(--indent) * 2); } #section__content h3::before { position: absolute; left: 0; } #section__content h4 { - font-family: var(--font-sans); - font-weight: var(--w-title); - font-size: 0.8rem; + font-family: var(--font-title); + font-weight: 500; + font-size: 0.9rem; line-height: calc(var(--baseline) * 1); - text-align: right; - padding-left: 3ch; + padding-right: calc(var(--indent) * 2); position: relative; - margin-top: calc(var(--baseline) * 0.5); - padding: calc(var(--baseline) * 0.5); + margin-top: calc(var(--baseline) * 1 + 4px); + padding-bottom: calc(var(--baseline) * 0.75); + -webkit-text-decoration: underline 1px #cfcfcf; + text-decoration: underline 1px #cfcfcf; + text-underline-offset: 3px; + padding-left: calc(var(--indent) * 2); } #section__content h5 { - font-family: var(--font-sans); - font-weight: var(--w-title); - font-size: 0.7rem; + font-family: var(--font-title); + font-weight: 500; + font-size: 0.8rem; line-height: calc(var(--baseline) * 1); + padding-left: calc(var(--indent) * 2); position: relative; - margin-top: calc(var(--baseline) * 0.75); + margin-top: calc(var(--baseline) * 1 + 4px); padding-bottom: calc(var(--baseline) * 0.25); } +#section__content h6 { + font-family: var(--font-title); + font-weight: 500; + font-size: 0.8rem; + margin-top: calc(var(--baseline) * 0.5); + padding-bottom: calc(var(--baseline) * 0.25); + color: #666; +} [data-id=section__content][data-split-from] > :first-child { margin-top: 0; } +h1 { + font-family: var(--font-title); + font-size: 1.6rem; + font-weight: 500; + text-transform: uppercase; + line-height: calc(var(--baseline) * 1.6); + position: relative; + margin-top: calc(var(--baseline) * 2 - 3px); + padding-bottom: calc(var(--baseline) * 1); + padding-left: calc(var(--indent) * 2); + padding-right: 1ch; +} +h1::before { + position: absolute; + left: 0; + width: calc(var(--indent) * 2 - 0.5ch); +} + +section h1:first-of-type { + margin-top: 3px !important; +} + @page { @footnote { float: bottom; - max-height: 90%; + footnote-policy: auto; } } .pagedjs_footnote_content { @@ -387,10 +406,12 @@ blockquote + ol + p { .inline-note { float: footnote; - font-size: 9.5px; - line-height: 12.8px; + footnote-policy: auto; + font-size: var(--fs-small); + line-height: calc(var(--baseline) * 0.8); padding-left: var(--indent); position: relative; + font-weight: 600; } .inline-note::marker { display: none; @@ -403,8 +424,17 @@ blockquote + ol + p { left: 0px; } -[data-footnote-call] { - font-size: 9px; +.inline-note::after { + font-family: var(--font); + font-size: var(--fs-small); + line-height: 0; + position: relative; + top: -3px; + font-variant-position: normal !important; +} + +blockquote .inline-note { + font-variant-position: normal !important; } #section__list-of-abbr { diff --git a/css/style.css.map b/css/style.css.map index b8062fc..1cd0617 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.css","modules/_var.scss","modules/_init.scss","modules/_layout.scss","modules/_text.scss","modules/_titles.scss","modules/_footnotes.scss","modules/_list-of-abbr.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;EACI,2BAAA;EACA,kCAAA;EACA,iBAAA;EAEA,iCAAA;EAEA,qCAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,cAAA;ADAJ;;AEXA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;AFcJ;;AEZA;EACI,mBAAA;AFeJ;;AEZA;EACI,mCAAA,EAAA,wBAAA;EACA,kCAAA,EAAA,kBAAA;EAEA,kCAAA,EAAA,6CAAA;EACA,+BAAA,EAAA,mDAAA;EAEA,wBAAA;EACA,2BAAA;EACA,4BAAA;AFaJ;;AG/BA;EACI;IACI,iBAAA;IAEA,gBAAA;IACA,mBAAA;IACA,iBAAA;IACA,kBAAA;EHiCN;EG7BE;IACI,iBAAA;IACA,kBAAA;IACA;MACI,sBAAA;MACA,8BAAA;MACA,eAAA;IH+BR;EACF;EG7BE;IACI,iBAAA;IACA,kBAAA;IACA;MACI,sBAAA;MACA,8BAAA;MACA,eAAA;IH+BR;IG7BI;MACI,+BAAA;MACA,8BAAA;MACA,eAAA;IH+BR;EACF;EGzBE;IACI;MAAmB,aAAA;IH4BvB;IG3BI;MAAY,aAAA;IH8BhB;IG7BI;MAAc,aAAA;IHgClB;IG/BI;MAAa,aAAA;IHkCjB;IGjCI;MAAoB,aAAA;IHoCxB;IGnCI;MAAY,aAAA;IHsChB;IGrCI;MAAe,aAAA;IHwCnB;IGvCI;MAAe,aAAA;IH0CnB;IGzCI;MAAa,aAAA;IH4CjB;IG3CI;MAAgB,aAAA;IH8CpB;IG7CI;MAAgB,aAAA;IHgDpB;IG/CI;MAAsB,aAAA;IHkD1B;IGjDI;MAAe,aAAA;IHoDnB;IGnDI;MAAiB,aAAA;IHsDrB;IGrDI;MAAgB,aAAA;IHwDpB;IGvDI;MAAuB,aAAA;IH0D3B;EACF;EGzDE;IACI;MAAmB,aAAA;IH4DvB;IG3DI;MAAY,aAAA;IH8DhB;IG7DI;MAAc,aAAA;IHgElB;IG/DI;MAAa,aAAA;IHkEjB;IGjEI;MAAoB,aAAA;IHoExB;IGnEI;MAAY,aAAA;IHsEhB;IGrEI;MAAe,aAAA;IHwEnB;IGvEI;MAAe,aAAA;IH0EnB;IGzEI;MAAa,aAAA;IH4EjB;IG3EI;MAAgB,aAAA;IH8EpB;IG7EI;MAAgB,aAAA;IHgFpB;IG/EI;MAAsB,aAAA;IHkF1B;IGjFI;MAAe,aAAA;IHoFnB;IGnFI;MAAiB,aAAA;IHsFrB;IGrFI;MAAgB,aAAA;IHwFpB;IGvFI;MAAuB,aAAA;IH0F3B;EACF;AACF;AGvFA;EACI,+BAAA;OAAA,mBAAA;AHyFJ;;AIvKA;EACI,cAAA;AJ0KJ;;AIvKA;EACI,YAAA;EACA,uBAAA;AJ0KJ;;AIvKA;EACI,mBAAA;EACA,qBAAA;AJ0KJ;;AIvKA;EACI,mBAAA;EACA,UAAA;EACA,SAAA;AJ0KJ;;AIvKA;EACI,qBAAA;UAAA,aAAA;EACA,4BAAA;EACA,wBAAA;EACA,wBAAA;EACA,sBAAA;AJ0KJ;;AIrKA;EACI,qBAAA;EACA,kBAAA;EACA,8BAAA;OAAA,kBAAA;EAEA,kBAAA;EACA,8BAAA;AJuKJ;AItKI;EACI,oBAAA;EACA,iCAAA;EAEA,cAAA;EACA,WAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;EAEA,gBAAA;EACA,aAAA;EACA,uBAAA;AJsKR;;AI9JI;EACI,aAAA;EACA,+BAAA;AJiKR;;AI7JA;;EAEI,sCAAA;AJgKJ;;AI3JA;EACI,2BAAA;EACA,qCAAA;EACA,wCAAA;EAEA,iCAAA;EACA,4BAAA;EACA,wCAAA;AJ6JJ;AIzJI;EACI,wBAAA;EACA,cAAA;EACA,sCAAA;AJ2JR;;AI1IA;;EAEI,gBAAA;AJ6IJ;;AIxIA;EAGI,8BAAA;EACA,2BAAA;EACA,8BAAA;AJyIJ;;AKtPM;EACE,kBAAA;ALyPR;AKxPQ;EACI,2BAAA;AL0PZ;AKtPI;EACI,kBAAA;ALwPR;AKvPQ;EACI,gCAAA;ALyPZ;AKrPI;EACI,+BAAA;OAAA,mBAAA;EACA,8BAAA;OAAA,kBAAA;EAEA,kCAAA;EACA,yCAAA;ALsPR;AKrPQ;EACI,WAAA;EACA,cAAA;EACA,iCAAA;ALuPZ;AKlPK;EACG,+BAAA;OAAA,mBAAA;EACA,8BAAA;OAAA,kBAAA;EAEA,kCAAA;EACA,yCAAA;ALmPR;AKlPQ;EACI,WAAA;EACA,cAAA;EACA,iCAAA;ALoPZ;AK9OI;;;;;;EAMI,cAAA;ALgPR;AK7OI;EACI,8BAAA;EACA,yBAAA;EACA,2BAAA;EAEA,iBAAA;EACA,wCAAA;EACA,kBAAA;EACA,kBAAA;EACA,2CAAA;EACA,yCAAA;EACA,iBAAA;EACA,kBAAA;AL8OR;AK7OQ;EACI,cAAA;EACA,eAAA;AL+OZ;AK1OI;EACI,0BAAA;AL4OR;AKtOI;EACI,8BAAA;EACA,yBAAA;EACC,2BAAA;EAED,iBAAA;EACA,wCAAA;EAEA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,2CAAA;EACA,yCAAA;ALsOR;AKrOQ;EACI,kBAAA;EACA,OAAA;ALuOZ;AKnOI;EACI,6BAAA;EACC,2BAAA;EACD,eAAA;EACA,sCAAA;EAEA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,2CAAA;EACA,yCAAA;ALoOR;AKnOQ;EAII,kBAAA;EACA,OAAA;ALkOZ;AK9NI;EACI,6BAAA;EACC,2BAAA;EACD,iBAAA;EACA,sCAAA;EAEA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACC,uCAAA;EACD,oCAAA;AL+NR;AK1NI;EACI,6BAAA;EACC,2BAAA;EACD,iBAAA;EACA,sCAAA;EACA,kBAAA;EACA,wCAAA;EACA,4CAAA;AL4NR;;AKpNA;EACQ,aAAA;ALuNR;;AMhXA;EACI;IACE,aAAA;IACA,eAAA;ENmXJ;AACF;AM/WE;EACA,sCAAA;ANiXF;;AM9WA;EACE,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,2BAAA;EACA,kBAAA;ANiXF;AM9WE;EACE,aAAA;EACA,WAAA;ANgXJ;;AMzWA;EACI,oCAAA;EACA,kBAAA;EAEA,SAAA;AN2WJ;;AMvWA;EACM,cAAA;AN0WN;;AOhZA;EACI,aAAA;EACA,UAAA;APmZJ","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.css","modules/_var.scss","modules/_init.scss","modules/_layout.scss","modules/_text.scss","modules/_titles.scss","modules/_footnotes.scss","modules/_list-of-abbr.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/csspageweaver/manifest.json b/csspageweaver/manifest.json index c5d0eff..5bd177d 100644 --- a/csspageweaver/manifest.json +++ b/csspageweaver/manifest.json @@ -1,5 +1,5 @@ { - "plugins": ["baseline","grid","marginBox","imposition","spread","previewPage","reloadInPlace","fullPage","inlineNotes"], + "plugins": ["baseline","grid","marginBox","imposition","spread","previewPage","reloadInPlace","inlineNotes"], "pluginsParameters":{}, "css": [ "css/style.css" diff --git a/index.html b/index.html index c1688ff..888a588 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,7 @@ - - + diff --git a/js/sectionedFootnotes.js b/js/sectionedFootnotes.js new file mode 100644 index 0000000..53faae0 --- /dev/null +++ b/js/sectionedFootnotes.js @@ -0,0 +1,124 @@ +import { Handler } from '/csspageweaver/lib/paged.esm.js'; + +export default class SectionedFootnotes extends Handler { + constructor(chunker, polisher, caller) { + super(chunker, polisher, caller); + } + + beforeParsed(content){ + + const sectionContent = content.querySelector('#section__content'); + const footnotesSection = content.querySelector('#footnotes'); + + if (!sectionContent || !footnotesSection) { + console.warn("Section content ou footnotes non trouvé"); + return; + } + + const originalOl = footnotesSection.querySelector('ol'); + if (!originalOl) { + console.warn("Liste de footnotes non trouvée"); + return; + } + + const allH1s = sectionContent.querySelectorAll('h1'); + + const noteToPartMap = new Map(); + + allH1s.forEach((h1, partIndex) => { + // Trouver le prochain h1 ou la fin de la section + const nextH1 = allH1s[partIndex + 1]; + + // Récupérer tous les éléments entre ce h1 et le suivant + let current = h1.nextElementSibling; + while (current && current !== nextH1) { + // Chercher les footnote-ref dans cet élément + const refs = current.querySelectorAll('.footnote-ref'); + refs.forEach(ref => { + const href = ref.getAttribute('href'); + if (href && href.startsWith('#fn')) { + const noteNum = href.replace('#fn', ''); + noteToPartMap.set(noteNum, partIndex); + } + }); + if (current.classList && current.classList.contains('footnote-ref')) { + const href = current.getAttribute('href'); + if (href && href.startsWith('#fn')) { + const noteNum = href.replace('#fn', ''); + noteToPartMap.set(noteNum, partIndex); + } + } + current = current.nextElementSibling; + } + }); + + const notesByPart = new Map(); + const allNotes = originalOl.querySelectorAll('li[id^="fn"]'); + + allNotes.forEach(note => { + const noteId = note.getAttribute('id'); + const noteNum = noteId.replace('fn', ''); + const partIndex = noteToPartMap.get(noteNum); + + if (partIndex !== undefined) { + if (!notesByPart.has(partIndex)) { + notesByPart.set(partIndex, []); + } + notesByPart.get(partIndex).push({ + num: parseInt(noteNum), + element: note + }); + } + }); + + const sortedParts = Array.from(notesByPart.keys()).sort((a, b) => a - b); + + // Vider la section footnotes (garder le hr s'il existe) + const hr = footnotesSection.querySelector('hr'); + footnotesSection.innerHTML = ''; + if (hr) { + footnotesSection.appendChild(hr); + } + + // Add title section + const mainTitle = document.createElement('h1'); + mainTitle.textContent = 'Notizen'; + footnotesSection.appendChild(mainTitle); + + sortedParts.forEach(partIndex => { + const h1 = allH1s[partIndex]; + const notes = notesByPart.get(partIndex); + + notes.sort((a, b) => a.num - b.num); + + if (notes.length > 0) { + // Upper-alpha counter + const titlePart = document.createElement('h2'); + titlePart.className = 'title-part'; + const letter = String.fromCharCode(65 + partIndex); // 65 = 'A' + titlePart.setAttribute('data-part-number', letter); + titlePart.textContent = h1.textContent.trim(); + footnotesSection.appendChild(titlePart); + + // New ol with new start + const newOl = document.createElement('ol'); + const firstNoteNum = notes[0].num; + newOl.setAttribute('start', firstNoteNum); + + notes.forEach(noteData => { + newOl.appendChild(noteData.element.cloneNode(true)); + }); + + footnotesSection.appendChild(newOl); + } + }); + + sectionContent.parentNode.insertBefore(footnotesSection, sectionContent.nextSibling); + + } + + + +} + +