diff --git a/.gitignore b/.gitignore index 3793dce..587a7e2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ .DS_Store .zip weaver_manager.sh -fonts/* -images/* \ No newline at end of file +fonts/* \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6f3a291..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file diff --git a/css/modules/_followingNotes.scss b/css/modules/_followingNotes.scss index 6ea7f26..6a130be 100644 --- a/css/modules/_followingNotes.scss +++ b/css/modules/_followingNotes.scss @@ -1,32 +1,24 @@ .container-following-note{ - font-family: var(--font-sans); font-size: var(--fs-small); - line-height: calc(var(--baseline)*0.75); + line-height: calc(var(--baseline)*0.8); + // padding-left: var(--indent); position: relative; - margin-top: 2px; - // margin-top: calc(var(--baseline)*0.25); - - hyphens: auto; - hyphenate-limit-chars: 7 3 4; - hyphenate-limit-lines: 2; - hyphenate-limit-zone: 8%; - word-spacing: -0.004em; - text-align: justify; - // color: #999; + // columns: 2; } .body_note{ - // padding-left: calc(var(--indent)*1); - // position: relative; + padding-left: calc(var(--indent)*1); + position: relative; } -.following-note_marker::after{ - content: ". " +.following-note_marker{ + position: absolute; + // left: calc(var(--indent)*2); + left: 0; } .following-note_call{ - font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1; position: relative; diff --git a/css/modules/_footnotes.scss b/css/modules/_footnotes.scss index c11c056..2bd344b 100644 --- a/css/modules/_footnotes.scss +++ b/css/modules/_footnotes.scss @@ -1,6 +1,3 @@ -// INUTILE - - @page { @footnote { float: bottom; diff --git a/css/modules/_layout.scss b/css/modules/_layout.scss index 6299012..4304e1c 100644 --- a/css/modules/_layout.scss +++ b/css/modules/_layout.scss @@ -1,73 +1,52 @@ -$width: 176mm; -$height: 240mm; -$top: 6mm; -$bottom: 20mm; -$inside: 12mm; -$outside: 6mm; -$content-h: calc($height - $top - $bottom - 1mm); -$content-w: calc($width - $inside - $outside); -$gap: 4mm; -$indent: 10mm; - - @media print { @page { - size: $width $height; - margin-top: $top; - margin-bottom: $bottom; + size: 176mm 240mm; + // size: 150mm 220mm; + margin-top: 36px; + margin-bottom: 20mm; - // bleed: 6mm; - // marks: crop; + bleed: 6mm; + marks: crop; } @page:left { - margin-left: $outside; - margin-right: $inside; - - // background-image: url("/images/layout-2_3.png"); - // background-size: 100% 100%; - - + margin-left: 18mm; + margin-right: 26mm; @bottom-left { content: counter(page); - font-family: var(--font-sans); + font-family: var(--font-title); + font-weight: 500; font-size: var(--fs-num); - text-align: left; - width: $indent; } - @bottom-center { - content: "Höchstpersönlichkeit"; - font-family: var(--font-sans); - font-size: var(--fs-num); - text-align: left; - } - + // @top-right { + // content: "Höchstpersönlichkeit"; + // font-variant-caps: small-caps; + // letter-spacing: 0.01em; + // } } @page:right { - margin-left: $inside; - margin-right: $outside; - - @bottom-left { - content: string(chapterCount); - font-family: var(--font-sans); - font-size: var(--fs-num); - text-align: left; - width: $indent; - } - - @bottom-center { - content: string(chapter); - font-family: var(--font-sans); - font-size: var(--fs-num); - text-align: left; - } - - @bottom-right { + margin-left: 26mm; + margin-right: 18mm; + @bottom-right { content: counter(page); - font-family: var(--font-sans); + font-family: var(--font-title); + font-weight: 500; font-size: var(--fs-num); - text-align: right; } - + @right-top { + content: "Höchstpersönlichkeit"; + font-family: var(--font-title); + 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; + } } @page:first { @@ -106,61 +85,10 @@ $indent: 10mm; @bottom-right { content: none; } @bottom-right-corner { content: none; } } - - @page chapter { - margin-left: $outside; - margin-right: $outside; - @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; } - } } #section__content{ break-before: right; -} - - -.page-break{ - break-before: page; -} - - -#section__content{ - columns: 2; - column-gap: $gap; - column-fill: auto; -} - - -// Title chapter - -#section__content h1{ - break-before: left; - break-after: page; - page: chapter; -} -#section__content h1 .h1-count{ - string-set: chapterCount content(text); -} - -#section__content h1 .h1-text{ - string-set: chapter content(text); -} - - +} \ No newline at end of file diff --git a/css/modules/_num-paragraph.scss b/css/modules/_num-paragraph.scss deleted file mode 100644 index 366a9ad..0000000 --- a/css/modules/_num-paragraph.scss +++ /dev/null @@ -1,33 +0,0 @@ -[data-id="section__content"]{ - position: relative; -} - -ol[type="1"]{ - list-style-type: none; - position: relative; - break-after: avoid; - width: $indent; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - - &::after{ - content: attr(start); - display: block; - position: absolute; - font-size: var(--fs-small); - opacity: 0.5; - } -} - - - -ol[type="1"].ol-clone{ - break-before: column; - break-after: avoid; - top: 0; - left: calc($content-w/2 + $gap/2) -} - - diff --git a/css/modules/_text.scss b/css/modules/_text.scss index 881e549..e1501ac 100644 --- a/css/modules/_text.scss +++ b/css/modules/_text.scss @@ -1,6 +1,3 @@ - - - sup{ line-height: 0; } @@ -22,8 +19,6 @@ p{ text-align: justify; orphans: 2; widows: 2; - margin-left: $indent; - // padding-left: $indent*0.2; } p, li{ @@ -32,57 +27,83 @@ p, li{ hyphenate-limit-lines: 2; hyphenate-limit-zone: 8%; word-spacing: -0.004em; - widows: 2; - orphans: 2; } -.wrapper-indent > p:first-of-type { - text-indent: $indent*0.5; +p + p, +ol[type="1"] + p{ + text-indent: calc(var(--indent)*0.5); } - blockquote{ - font-family: var(--font-quote); -} - -// blockquote u{ -// text-decoration: none; -// text-transform: uppercase; -// font-size: var(--fs-small); -// color: red; -// } - -// u{ -// color: red; -// } - - -ul{ - color: red; -} - - - -.p-these{ - font-weight: 500; + 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); - strong{ - text-transform: uppercase; - display: inline-block; - min-width: $indent*2; - font-weight: bold; - font-size: var(--fs-small); - letter-spacing: 0.05rem; + font-size: 12px; + color: #343434; + + +} + +.these + ol + p, +blockquote + ol + p{ + text-indent: 0px; +} + + + +.these{ + // color: red; + // 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); +} + + +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; + } + + + } -.p-these-last{ - margin-bottom: calc(var(--baseline)*1); -} - + diff --git a/css/modules/_titles.scss b/css/modules/_titles.scss index 2f0e312..3d8fa16 100644 --- a/css/modules/_titles.scss +++ b/css/modules/_titles.scss @@ -1,25 +1,21 @@ #section__content{ - // margin-left: 28mm; + margin-left: 28mm; - - - h1{ - - column-span: all; - height: $content-h; - } - - - - h2, h3, h4, h5, h6 { + h1, h2, h3 { &::before{ content: attr(data-counter); } } + h4, h5, h6{ + &::before{ + content: attr(data-counter) ". "; + } + } - h2, h3 , h4{ + + h1, h2, h3 , h4{ break-inside: avoid; break-after: avoid; text-wrap: balance; @@ -61,127 +57,90 @@ - h1{ - - font-weight: 200; - font-size: 105px; - line-height: 0.9; - hyphens: auto; - hyphenate-limit-chars: 8 4 3; - - break-inside: avoid; - - - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: center; - - text-wrap: balance; - - - - - span{ - display: block; - } - - } - - h2{ - font-size: 22px; - font-weight: 200; + font-family: var(--font-title); + font-size: 1.1rem; + font-weight: 500; text-transform: uppercase; - text-align: center; - line-height: calc(var(--baseline)*1.4); - margin-top: 4mm; - padding-bottom: 4mm; - hyphens: auto; - + line-height: calc(var(--baseline)*1.2); + position: relative; + margin-top: calc(var(--baseline)*1 + 6px); + padding-bottom: calc(var(--baseline)*1); + padding-right: 2ch; + padding-left: calc(var(--indent)*2); &::before{ - display: block; - + position: absolute; + left: 0; + // display: block; + // font-size: var(--fs-num); + // padding-left: var(--indent); } - - // &::after{ - // content: ''; - // display: block; - // width: 100%; - // border-bottom: 1px solid currentColor; - // position: relative; - // top: calc(var(--baseline)*-2.5); - // opacity: 0.2; - // } } h3{ + font-family: var(--font-title); font-weight: 500; - font-size: 1em; - line-height: calc(var(--baseline)*0.75); + font-size: 1rem; + line-height: calc(var(--baseline)*1); + + // padding-left: var(--indent); + padding-right: calc(var(--indent)*2); position: relative; - margin-top: 4mm; - padding-bottom: 4mm; - padding-left: $indent; - text-align: center; + margin-top: calc(var(--baseline)*1 + 4px); + padding-bottom: calc(var(--baseline)*0.75); + padding-left: calc(var(--indent)*2); &::before{ - display: block; + + position: absolute; + left: 0; } } h4{ + font-family: var(--font-title); font-weight: 500; - font-size: 1em; - line-height: calc(var(--baseline)*0.75); + font-size: 0.9rem; + line-height: calc(var(--baseline)*1); + padding-right: calc(var(--indent)*2); position: relative; - margin-top: calc(var(--baseline)*1); - padding-bottom: calc(var(--baseline)*0.5); - padding-left: $indent*2; + 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{ - display: block; - position: absolute; - left: $indent; + + // position: absolute; + // left: 0; } } h5{ - font-weight: normal; - font-size: 1em; - line-height: calc(var(--baseline)*0.75); + font-family: var(--font-title); + font-weight: 500; + font-size: 0.8rem; + line-height: calc(var(--baseline)*1); + padding-left: calc(var(--indent)*2); + // padding-right: calc(var(--indent)*2); position: relative; - margin-top: calc(var(--baseline)*1); + margin-top: calc(var(--baseline)*1 + 4px); padding-bottom: calc(var(--baseline)*0.25); - padding-left: $indent; - - text-indent: $indent; - &::before{ - display: block; - position: absolute; - left: 0; - } } h6{ - font-weight: normal; - font-size: 1em; - line-height: calc(var(--baseline)*0.75); - position: relative; - margin-top: calc(var(--baseline)*1); - padding-left: $indent; - - text-indent: $indent; - &::before{ - display: block; - position: absolute; - left: 0; - } - + 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; } @@ -193,3 +152,37 @@ 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); + // 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/_toc.scss b/css/modules/_toc.scss deleted file mode 100644 index 2bdaeb7..0000000 --- a/css/modules/_toc.scss +++ /dev/null @@ -1,47 +0,0 @@ -#toc_container{ - - break-before: page; - break-after: page; - // color: red; - - ul{ - list-style-type: none; - color: black; - } - - .toc-element-level-1{ - margin-top: calc(var(--baseline)*1); - margin-bottom: calc(var(--baseline)*0.5); - font-size: 1.2rem; - line-height: 1.2; - } - - .toc-element-level-2{ - font-weight: bold; - margin-top: calc(var(--baseline)*0.5); - margin-bottom: calc(var(--baseline)*0.5); - } - - .toc-element-level-3{ - text-indent: 5mm; - - } - - .toc-element-level-4{ - text-indent: 10mm; - - } - - .toc-element-level-5{ - text-indent: 15mm; - - } - - .toc-element-level-6{ - text-indent: 20mm; - - } - - - -} \ No newline at end of file diff --git a/css/modules/_var.scss b/css/modules/_var.scss index 0007669..18aac84 100644 --- a/css/modules/_var.scss +++ b/css/modules/_var.scss @@ -1,13 +1,14 @@ :root{ - --font: 'Moulin', sans-serif; - --font-serif: 'Moulin', sans-serif; - --font-quote: 'Louize', sans-serif; - --font-sans: 'Basis Grotesque Pro', sans-serif; - --font-size: 12px; - --fs-small: 9.8px; - --baseline: 18px; + --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; - --fs-num: 12px; } diff --git a/css/style.css b/css/style.css index f91719c..fc814ae 100644 --- a/css/style.css +++ b/css/style.css @@ -1,14 +1,14 @@ @charset "UTF-8"; :root { - --font: 'Moulin', sans-serif; - --font-serif: 'Moulin', sans-serif; - --font-quote: 'Louize', sans-serif; - --font-sans: 'Basis Grotesque Pro', sans-serif; - --font-size: 12px; - --fs-small: 9.8px; - --baseline: 18px; + --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; - --fs-num: 12px; } * { @@ -34,47 +34,43 @@ body { @media print { @page { size: 176mm 240mm; - margin-top: 6mm; + margin-top: 36px; margin-bottom: 20mm; + bleed: 6mm; + marks: crop; } @page :left { - margin-left: 6mm; - margin-right: 12mm; + margin-left: 18mm; + margin-right: 26mm; @bottom-left { content: counter(page); - font-family: var(--font-sans); + font-family: var(--font-title); + font-weight: 500; font-size: var(--fs-num); - text-align: left; - width: 10mm; - } - @bottom-center { - content: "Höchstpersönlichkeit"; - font-family: var(--font-sans); - font-size: var(--fs-num); - text-align: left; } } @page :right { - margin-left: 12mm; - margin-right: 6mm; - @bottom-left { - content: string(chapterCount); - font-family: var(--font-sans); - font-size: var(--fs-num); - text-align: left; - width: 10mm; - } - @bottom-center { - content: string(chapter); - font-family: var(--font-sans); - font-size: var(--fs-num); - text-align: left; - } + margin-left: 26mm; + margin-right: 18mm; @bottom-right { content: counter(page); - font-family: var(--font-sans); + font-family: var(--font-title); + font-weight: 500; font-size: var(--fs-num); - text-align: right; + } + @right-top { + content: "Höchstpersönlichkeit"; + font-family: var(--font-title); + 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 { @@ -177,94 +173,12 @@ body { content: none; } } - @page chapter { - margin-left: 6mm; - margin-right: 6mm; - @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; - } - } } #section__content { -moz-column-break-before: right; break-before: right; } -.page-break { - -moz-column-break-before: page; - break-before: page; -} - -#section__content { - -moz-columns: 2; - columns: 2; - -moz-column-gap: 4mm; - column-gap: 4mm; - -moz-column-fill: auto; - column-fill: auto; -} - -#section__content h1 { - -moz-column-break-before: left; - break-before: left; - -moz-column-break-after: page; - break-after: page; - page: chapter; -} - -#section__content h1 .h1-count { - string-set: chapterCount content(text); -} - -#section__content h1 .h1-text { - string-set: chapter content(text); -} - sup { line-height: 0; } @@ -287,7 +201,6 @@ p { text-align: justify; orphans: 2; widows: 2; - margin-left: 10mm; } p, li { @@ -296,41 +209,34 @@ p, li { hyphenate-limit-lines: 2; hyphenate-limit-zone: 8%; word-spacing: -0.004em; - widows: 2; - orphans: 2; } -.wrapper-indent > p:first-of-type { - text-indent: 5mm; +p + p, +ol[type="1"] + p { + text-indent: calc(var(--indent) * 0.5); } blockquote { - font-family: var(--font-quote); -} - -ul { - color: red; -} - -.p-these { - font-weight: 500; + 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); -} -.p-these strong { - text-transform: uppercase; - display: inline-block; - min-width: 20mm; - font-weight: bold; - font-size: var(--fs-small); - letter-spacing: 0.05rem; + font-size: 12px; + color: #343434; } -.p-these-last { +.these + ol + p, +blockquote + ol + p { + text-indent: 0px; +} + +.these { margin-bottom: calc(var(--baseline) * 1); -} - -[data-id=section__content] { - position: relative; + border-left: 4px solid #efefef; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + padding-left: calc(var(--indent) * 0.5); } ol[type="1"] { @@ -338,38 +244,34 @@ ol[type="1"] { position: relative; -moz-column-break-after: avoid; break-after: avoid; - width: 10mm; position: absolute; + left: 0px; display: flex; - align-items: center; - justify-content: center; + gap: 0.25ch; } ol[type="1"]::after { content: attr(start); - display: block; - position: absolute; font-size: var(--fs-small); - opacity: 0.5; + color: #999; +} +ol[type="1"] li::before { + font-size: var(--fs-small); + content: "¶"; + color: #d7d7d7; + position: relative; + top: -1px; } -ol[type="1"].ol-clone { - -moz-column-break-before: column; - break-before: column; - -moz-column-break-after: avoid; - break-after: avoid; - top: 0; - left: 81mm; +#section__content { + margin-left: 28mm; } - -#section__content h1 { - -moz-column-span: all; - column-span: all; - height: 213mm; -} -#section__content h2::before, #section__content h3::before, #section__content h4::before, #section__content h5::before, #section__content h6::before { +#section__content h1::before, #section__content h2::before, #section__content h3::before { content: attr(data-counter); } -#section__content h2, #section__content h3, #section__content h4 { +#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 h4 { -moz-column-break-inside: avoid; break-inside: avoid; -moz-column-break-after: avoid; @@ -378,7 +280,7 @@ ol[type="1"].ol-clone { /* hack for avoiding break-after */ margin-bottom: calc(var(--baseline) * -3); } -#section__content h2::after, #section__content h3::after, #section__content h4::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); @@ -405,158 +307,120 @@ ol[type="1"].ol-clone { #section__content h6 + ol + p { text-indent: 0; } -#section__content h1 { - font-weight: 200; - font-size: 105px; - line-height: 0.9; - hyphens: auto; - hyphenate-limit-chars: 8 4 3; - -moz-column-break-inside: avoid; - break-inside: avoid; - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: center; - text-wrap: balance; -} -#section__content h1 span { - display: block; -} #section__content h2 { - font-size: 22px; - font-weight: 200; + font-family: var(--font-title); + font-size: 1.1rem; + font-weight: 500; text-transform: uppercase; - text-align: center; - line-height: calc(var(--baseline) * 1.4); - margin-top: 4mm; - padding-bottom: 4mm; - hyphens: auto; + line-height: calc(var(--baseline) * 1.2); + position: relative; + 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 { - display: block; + position: absolute; + left: 0; } #section__content h3 { + font-family: var(--font-title); font-weight: 500; - font-size: 1em; - line-height: calc(var(--baseline) * 0.75); + font-size: 1rem; + line-height: calc(var(--baseline) * 1); + padding-right: calc(var(--indent) * 2); position: relative; - margin-top: 4mm; - padding-bottom: 4mm; - padding-left: 10mm; - text-align: center; + margin-top: calc(var(--baseline) * 1 + 4px); + padding-bottom: calc(var(--baseline) * 0.75); + padding-left: calc(var(--indent) * 2); } #section__content h3::before { - display: block; + position: absolute; + left: 0; } #section__content h4 { + font-family: var(--font-title); font-weight: 500; - font-size: 1em; - line-height: calc(var(--baseline) * 0.75); + font-size: 0.9rem; + line-height: calc(var(--baseline) * 1); + padding-right: calc(var(--indent) * 2); position: relative; - margin-top: calc(var(--baseline) * 1); - padding-bottom: calc(var(--baseline) * 0.5); - padding-left: 20mm; -} -#section__content h4::before { - display: block; - position: absolute; - left: 10mm; + 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-weight: normal; - font-size: 1em; - line-height: calc(var(--baseline) * 0.75); + 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) * 1); + margin-top: calc(var(--baseline) * 1 + 4px); padding-bottom: calc(var(--baseline) * 0.25); - padding-left: 10mm; - text-indent: 10mm; -} -#section__content h5::before { - display: block; - position: absolute; - left: 0; } #section__content h6 { - font-weight: normal; - font-size: 1em; - line-height: calc(var(--baseline) * 0.75); - position: relative; - margin-top: calc(var(--baseline) * 1); - padding-left: 10mm; - text-indent: 10mm; -} -#section__content h6::before { - display: block; - position: absolute; - left: 0; + 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; +} + #section__list-of-abbr { display: none; color: red; } .container-following-note { - font-family: var(--font-sans); font-size: var(--fs-small); - line-height: calc(var(--baseline) * 0.75); + line-height: calc(var(--baseline) * 0.8); position: relative; - margin-top: 2px; - hyphens: auto; - hyphenate-limit-chars: 7 3 4; - hyphenate-limit-lines: 2; - hyphenate-limit-zone: 8%; - word-spacing: -0.004em; - text-align: justify; } -.following-note_marker::after { - content: ". "; +.body_note { + padding-left: calc(var(--indent) * 1); + position: relative; +} + +.following-note_marker { + position: absolute; + left: 0; } .following-note_call { - font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1; position: relative; top: -4px; -} - -#toc_container { - -moz-column-break-before: page; - break-before: page; - -moz-column-break-after: page; - break-after: page; -} -#toc_container ul { - list-style-type: none; - color: black; -} -#toc_container .toc-element-level-1 { - margin-top: calc(var(--baseline) * 1); - margin-bottom: calc(var(--baseline) * 0.5); - font-size: 1.2rem; - line-height: 1.2; -} -#toc_container .toc-element-level-2 { - font-weight: bold; - margin-top: calc(var(--baseline) * 0.5); - margin-bottom: calc(var(--baseline) * 0.5); -} -#toc_container .toc-element-level-3 { - text-indent: 5mm; -} -#toc_container .toc-element-level-4 { - text-indent: 10mm; -} -#toc_container .toc-element-level-5 { - text-indent: 15mm; -} -#toc_container .toc-element-level-6 { - text-indent: 20mm; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map index 8f512bd..cb36fc5 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/_num-paragraph.scss","modules/_titles.scss","modules/_list-of-abbr.scss","modules/_followingNotes.scss","modules/_toc.scss"],"names":[],"mappings":"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","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/_list-of-abbr.scss","modules/_followingNotes.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index b58c8fc..e90d3a3 100644 --- a/css/style.scss +++ b/css/style.scss @@ -3,8 +3,7 @@ @import 'modules/init'; @import 'modules/layout'; @import 'modules/text'; -@import 'modules/num-paragraph'; @import 'modules/titles'; +// @import 'modules/footnotes'; @import 'modules/list-of-abbr'; -@import 'modules/followingNotes'; -@import 'modules/toc'; \ No newline at end of file +@import 'modules/followingNotes'; \ No newline at end of file diff --git a/csspageweaver/manifest.json b/csspageweaver/manifest.json index 0a6d450..dd86589 100644 --- a/csspageweaver/manifest.json +++ b/csspageweaver/manifest.json @@ -5,8 +5,7 @@ "marginBox", "imposition","spread","previewPage","reloadInPlace", "inlineNotes", - "followingNotes", - "tableOfContent" + "followingNotes" ], "pluginsParameters":{}, "css": [ @@ -21,17 +20,10 @@ "followingNotes": { "selector": ".inline-note", "reset": ".chapter" - }, - "tableOfContent": { - "tocContainer": "#toc_container", - "tocTitles": ["#section__content h1", "#section__content h2", "h3", "h4", "h5", "h6"] } }, "hook": [ - "/js/counters.js", - "/js/these.js", - "/js/snapToBaseline.js", - "/js/numParagraph.js" + "/js/counters.js" ] } diff --git a/csspageweaver/plugins/followingNotes/followingNotes.js b/csspageweaver/plugins/followingNotes/followingNotes.js index 0a9f45b..15b4c17 100644 --- a/csspageweaver/plugins/followingNotes/followingNotes.js +++ b/csspageweaver/plugins/followingNotes/followingNotes.js @@ -20,50 +20,26 @@ export default class followingNotes extends Handler { beforeParsed(content) { + console.log("floatnotes"); + let newNotesClass = this.newNotesClass; resetCounter(content, this.reset, this.notesClass); createCallandMarker(content, this.notesClass, newNotesClass); - const containerMap = new Map(); - let notes = content.querySelectorAll(this.notesClass); notes.forEach(function (note) { let paragraph = note.closest("p"); if (!paragraph) return; - // Remonter au niveau direct de #section__content (ignorer blockquote et autres conteneurs) - const sectionContent = note.closest('#section__content') || content; - let topLevel = paragraph; - while (topLevel.parentElement && topLevel.parentElement !== sectionContent) { - topLevel = topLevel.parentElement; - } - - // Find next boundary: heading or ol[type="1"], au niveau de #section__content - let boundary = null; - let sibling = topLevel.nextElementSibling; - while (sibling) { - if (sibling.matches('h1, h2, h3, h4, h5, h6, ol[type="1"]')) { - boundary = sibling; - break; - } - sibling = sibling.nextElementSibling; - } - - const mapKey = boundary || sectionContent; - - if (!containerMap.has(mapKey)) { - let container = document.createElement("div"); + let container = paragraph.nextElementSibling; + if (!container || !container.classList.contains("container-following-note")) { + container = document.createElement("div"); container.classList.add("container-following-note"); - if (boundary) { - boundary.before(container); - } else { - sectionContent.appendChild(container); - } - containerMap.set(mapKey, container); + paragraph.after(container); } - containerMap.get(mapKey).appendChild(note); + container.appendChild(note); }); diff --git a/csspageweaver/plugins/tableOfContent/.gitignore b/csspageweaver/plugins/tableOfContent/.gitignore deleted file mode 100644 index 496ee2c..0000000 --- a/csspageweaver/plugins/tableOfContent/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.DS_Store \ No newline at end of file diff --git a/csspageweaver/plugins/tableOfContent/README.md b/csspageweaver/plugins/tableOfContent/README.md deleted file mode 100755 index 66c4cb9..0000000 --- a/csspageweaver/plugins/tableOfContent/README.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -name: tableOfContent -tags: recommended, stable -description: A script to generate a table of content. ---- - -# Table of content - -A script to generate a table of content. - -See pagedjs.org post: [Build a Table of Contents from your HTML](https://pagedjs.org/post/toc/) - -**tags**: recommended, stable - -## Parameters - -The plugin contain also a minimal stylesheet to add the corresponding page numbers with paged.js and add some style to the toc list. - -In `manifest.json`, you can modify/add some parameters: - -```json - "plugins":{ - "tableOfContent" - }, - "pluginsParameters":{ - "tableOfContent": { - "tocContainer": "#toc_container", - "tocTitles": ["h1", "h2"] - } - }, - ``` - -- `tocElement` → define the id element where the toc list will be create (by default: `#toc`) -- `titleElements` → array of the title element you want in the toc list. You can add as many as you want and the elements can be classes like `.title-1` or `.my-content h1:not(.unlisted)`. (by default: `["h1", "h2"]`) -- `beforePageNumber` (optional) → if you want to add some text before the page number ("page ", "p. ", ...) -- `position` → put the page number before or after the toc element, create `::before` or `::after` pseudo-element (by default: `after`) - - -## Stylesheet - -This plugin have a minimal stylesheet - -```CSS -#list-toc-generated{ - --before-page: ""; -} -``` - -`--before-page` refers to the text before the page number ("page ", "p. ", ...), you can change it directly here or in the config.json - - -If the page number is positionned after the toc element (`"position": "after"` in config.json), this style apply: - -```CSS -.toc-element a.toc-page-after::after{ - content: var(--before-page) target-counter(attr(href), page); /* This line create the page number */ - float: right; /* put number at the right of the page */ -} -``` - -If the page number is positionned before the toc element (`"position": "before"` in config.json), this style apply: - -```CSS -.toc-element a.toc-page-before::before{ - content: var(--before-page) target-counter(attr(href), page); - margin-right: 1ch; /* space after number */ -} - -``` - - - -## How to install - -### Download - -1. Download the ZIP archive via Code > Download ZIP. -2. Unzip the archive. -3. Rename the extracted folder by removing the branch name suffix: `tableOfContent-main` → `tableOfContent` -4. Move the folder into the `csspageweaver/plugins/` directory. -5. Add the required parameters to `manifest.json` (see above). - - -### Git clone - -1. Use git clone -2. Move the folder into the `csspageweaver/plugins/` directory. -3. Add the required parameters to `manifest.json` (see above). - - diff --git a/csspageweaver/plugins/tableOfContent/config.json b/csspageweaver/plugins/tableOfContent/config.json deleted file mode 100644 index 1da040a..0000000 --- a/csspageweaver/plugins/tableOfContent/config.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "name": "Table of content", - "description": "A script to generate a table of content", - "author": ["Julie Blanc", "Julien Taquet"], - "licence": "MIT", - "version": "1.0", - "hook": "tableOfContent.js", - "stylesheet": "tableOfContent.css" -} \ No newline at end of file diff --git a/csspageweaver/plugins/tableOfContent/tableOfContent.css b/csspageweaver/plugins/tableOfContent/tableOfContent.css deleted file mode 100644 index 4ef2426..0000000 --- a/csspageweaver/plugins/tableOfContent/tableOfContent.css +++ /dev/null @@ -1,13 +0,0 @@ -#list-toc-generated{ - --before-page: ""; -} - -.toc-element a.toc-page-after::after{ - content: var(--before-page) target-counter(attr(href), page); - float: right; /* put number at the right of the page */ -} - -.toc-element a.toc-page-before::before{ - content: var(--before-page) target-counter(attr(href), page); - margin-right: 1ch; /* space after number */ -} \ No newline at end of file diff --git a/csspageweaver/plugins/tableOfContent/tableOfContent.js b/csspageweaver/plugins/tableOfContent/tableOfContent.js deleted file mode 100644 index 3eb2d85..0000000 --- a/csspageweaver/plugins/tableOfContent/tableOfContent.js +++ /dev/null @@ -1,139 +0,0 @@ -/** - * @name Table of content - * @author Julie Blanc - * @see { @link https://gitlab.com/csspageweaver/plugins/table_of_content/ } - */ - -import { Handler } from '/csspageweaver/lib/paged.esm.js'; - -export default class tableOfContent extends Handler { - - constructor(chunker, polisher, caller) { - super(chunker, polisher, caller); - this.tocContainer = cssPageWeaver.features.tableOfContent.parameters?.tocContainer || "#toc_container"; - this.tocTitles = cssPageWeaver.features.tableOfContent.parameters?.tocTitles || ["h1", "h2"]; - this.beforePageNumber = cssPageWeaver.features.tableOfContent.parameters?.beforePageNumber; - this.position = cssPageWeaver.features.tableOfContent.parameters?.position; - } - - beforeParsed(content) { - createToc({ - content: content, - container: this.tocContainer, - titleElements: this.tocTitles, - position: this.position - }); - - - - } - - afterParsed(parsed) { - const tocLinks = parsed.querySelectorAll('.toc-element a'); - tocLinks.forEach(link => { - const id = link.getAttribute('href')?.slice(1); - if (!id) return; - const heading = parsed.querySelector('#' + CSS.escape(id)); - if (!heading) return; - const counter = heading.getAttribute('data-counter'); - if (!counter) return; - const span = document.createElement('span'); - span.className = 'toc-counter'; - span.textContent = counter; - link.prepend(span); - }); - } -} - - - -function createToc(config) { - - const content = config.content; - const tocElement = config.container; - const titleElements = config.titleElements; - - let tocElementDiv = content.querySelector(tocElement) - if(!tocElementDiv) return console.warn('couldn’t start the toc') - tocElementDiv.innerHTML = '' - let tocUl = document.createElement('ul') - tocUl.id = 'list-toc-generated' - - - if(config.before){ - tocUl.style.setProperty('--before-page', '"' + config.before + '"'); - } - - - tocElementDiv.appendChild(tocUl) - - // add class to all title elements - let tocElementNbr = 0 - for (var i = 0; i < titleElements.length; i++) { - let titleHierarchy = i + 1 - let titleElement = content.querySelectorAll(titleElements[i]) - - titleElement.forEach(function (element) { - // check if shouldbe shown - if ( - !element.classList.contains('toc-ignore') || - !element.classList.contains('toc-ignore') - ) { - // add classes to the element - element.classList.add('title-element') - element.setAttribute('data-title-level', titleHierarchy) - - // add an id if doesn't exist - tocElementNbr++ - - if (element.id == '') { - element.id = 'title-element-' + tocElementNbr - } - let newIdElement = element.id - } - }) - } - - // create toc list - let tocElements = content.querySelectorAll('.title-element') - - for (var i = 0; i < tocElements.length; i++) { - let tocElement = tocElements[i] - - let tocNewLi = document.createElement('li') - - // Add class for the hierarcy of toc - tocNewLi.classList.add('toc-element') - tocNewLi.classList.add('toc-element-level-' + tocElement.dataset.titleLevel) - - let classes = [ - ...(tocElement.className ? tocElement.className.split(' ') : []), - ...(tocElement.closest('section')?.className ? tocElement.closest('section')?.className.split(' ') : []), - ]; - - classes.forEach((meta) => { - if (!meta || meta === 'title-element') return; - tocNewLi.classList.add(`toc-${meta}`); - }); - - //get the exisiting class - // Keep class of title elements - let classTocElement = tocElement.classList - for (var n = 0; n < classTocElement.length; n++) { - if (classTocElement[n] != 'title-element') { - tocNewLi.classList.add(classTocElement[n]) - } - } - - if(config.position && config.position === "before"){ - tocNewLi.innerHTML = - '' + tocElement.innerHTML + ''; - }else{ - tocNewLi.innerHTML = - '' + tocElement.innerHTML + ''; - } - - - tocUl.appendChild(tocNewLi) - } -} diff --git a/index.html b/index.html index f0dfb33..1ab3c5e 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,15 @@ - Höchstpersönlichkeit + CSS Page Weaver Example - - - + + + + + + @@ -42,9 +45,6 @@ -
-
- @@ -1198,6 +1198,20 @@ Abteilung)
+
+

Titre niveau 1

+

Titre niveau 1

+

Titre niveau 1

+

Titre niveau 2

+

Titre niveau 2

+

Titre niveau 2

+

Titre niveau 3

+

Titre niveau 3

+

Titre niveau 3

+

Titre niveau 4

Titre niveau 4

Titre niveau 4

+
Titre niveau 5
Titre niveau 5
Titre niveau 5
+
Titre niveau 6
Titre niveau 6
Titre niveau 6
+

Vorrede

diff --git a/js/counters.js b/js/counters.js index 153e1e4..967125e 100644 --- a/js/counters.js +++ b/js/counters.js @@ -54,8 +54,7 @@ export default class counters extends Handler { case 'h1': h1Count++; h2Count = 0; // reset h2 - const originalText = el.innerHTML; - el.innerHTML = `${this.toUpperAlpha(h1Count)}${originalText}`; + el.setAttribute('data-counter', this.toUpperAlpha(h1Count)); break; case 'h2': diff --git a/js/numParagraph.js b/js/numParagraph.js deleted file mode 100644 index 80297b5..0000000 --- a/js/numParagraph.js +++ /dev/null @@ -1,110 +0,0 @@ -import { Handler } from '/csspageweaver/lib/paged.esm.js'; - -export default class thesis extends Handler { - constructor(chunker, polisher, caller) { - super(chunker, polisher, caller); - } - - - // Créer un wrapper pour récupérer tous les éléments qui suivent le ol (hors titres et .container-following-note) - // -------------------------------------------------------------------------------------------------------------- - beforeParsed(content){ - const nums = content.querySelectorAll('ol[type="1"]'); - - nums.forEach((num) => { - const wrapper = document.createElement('div'); - wrapper.classList.add('wrapper-ol'); - wrapper.id = 'wrapper-' + (num.getAttribute('start') || '1'); - - // Collecter les frères/sœurs suivants jusqu'à la prochaine limite - const siblings = []; - let sibling = num.nextElementSibling; - while (sibling) { - if (sibling.matches('ol[type="1"], h1, h2, h3, h4, h5, h6, .container-following-note')) break; - siblings.push(sibling); - sibling = sibling.nextElementSibling; - } - - // Insérer le wrapper à la place du ol - num.before(wrapper); - wrapper.appendChild(num); - siblings.forEach(s => wrapper.appendChild(s)); - }); - - // Si le dernier enfant d'un wrapper est un p et que le suivant est aussi un wrapper → .wrapper-indent - const wrappers = content.querySelectorAll('.wrapper-ol'); - wrappers.forEach((wrapper) => { - const last = wrapper.lastElementChild; - const next = wrapper.nextElementSibling; - if (last && last.nodeName === 'P' && next && next.classList.contains('wrapper-ol')) { - const firstP = next.querySelector('p'); - if (!firstP || !firstP.classList.contains('p-these')) { - next.classList.add('wrapper-indent'); - } - } - }); - } - - - - - afterPageLayout(pageElement, page, breakToken){ - - const wrappers = pageElement.querySelectorAll('.wrapper-ol'); - const minSize = 37; // taille minimal du wrapper pour qu’il y ait clone (2 lignes) - - // Fais un clone du ol pour de la page précédente - // ----------------------------------------------- - - if (wrappers.length > 0) { - const first = wrappers[0]; - if (first.hasAttribute('data-split-from')) { - let idWrapper = first.getAttribute('data-id'); - let numPage = pageElement.getAttribute('data-page-number'); - let numPrev = parseInt(numPage) - 1; - let prevPage = document.querySelector('#page-' + numPrev); - let olPara = prevPage.querySelector('#' + idWrapper + ' ol[type="1"]'); - - if (olPara && first.offsetHeight >= minSize) { - const start = olPara.getAttribute('start') || '1'; - const olClonePage = document.createElement('ol'); - olClonePage.setAttribute('start', start); - olClonePage.setAttribute('type', '1'); - olClonePage.classList.add('ol-clone-page'); - olClonePage.style.height = first.offsetHeight + 'px'; - const li = document.createElement('li'); - li.setAttribute('data-item-num', start); - olClonePage.appendChild(li); - first.prepend(olClonePage); - } - } - } - - - // Fais un clone du ol pour la colonne suivante (dans la même page) - // ---------------------------------------------------------------- - wrappers.forEach((wrapper) => { - const ol = wrapper.querySelector('ol[type="1"]'); - if (!ol) return; - - const rects = wrapper.getClientRects(); - if (rects.length === 1) { - ol.style.height = rects[0].height + 'px'; - } else if (rects.length === 2) { - ol.style.height = rects[0].height + 'px'; - if (rects[1].height >= minSize) { - const olClone = ol.cloneNode(true); - olClone.classList.add('ol-clone'); - olClone.style.height = rects[1].height + 'px'; - olClone.removeAttribute('id'); - ol.after(olClone); - } - } - }); - - - - - } - -} diff --git a/js/snapToBaseline.js b/js/snapToBaseline.js deleted file mode 100644 index 2e70a1d..0000000 --- a/js/snapToBaseline.js +++ /dev/null @@ -1,70 +0,0 @@ -import { Handler } from '/csspageweaver/lib/paged.esm.js'; - -export default class snapToBaseline extends Handler { - constructor(chunker, polisher, caller) { - super(chunker, polisher, caller); - this.baseline; - } - - beforeParsed(content){ - this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim()); - - content.querySelectorAll('blockquote').forEach((bq) => { - const prev = bq.previousElementSibling; - if (!prev || prev.nodeName !== 'P') { - // bq.style.color = 'red'; - } - }); - } - - renderNode(node, sourceNode){ - if (node.nodeName === 'P') { - this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim()); - if (!shouldSnap(node)) return node; - const area = node.closest('.pagedjs_area'); - if (area) { - const areaRect = area.getBoundingClientRect(); // cible les paragraphes sur 2 colonnes - const firstRect = node.getClientRects()[0]; - if (!firstRect) return node; - const relativeTop = firstRect.top - areaRect.top; - const modulo = relativeTop % this.baseline; - - if (modulo !== 0) { - node.style.paddingTop = (this.baseline - modulo) + 'px'; - } - } - return node; - } - } - - afterPageLayout(pageElement, page, breakToken){ - const area = pageElement.querySelector('.pagedjs_area'); - if (!area) return; - - const areaRect = area.getBoundingClientRect(); - const paragraphs = pageElement.querySelectorAll('p'); - - paragraphs.forEach((node) => { - if (!shouldSnap(node)) return; - - const firstRect = node.getClientRects()[0]; - if (!firstRect) return; - - - if (firstRect.bottom < areaRect.bottom - this.baseline) return; // cible les paragraphes qui sont sur 2 colonnes - - const relativeTop = firstRect.top - areaRect.top; - const modulo = relativeTop % this.baseline; - if (modulo !== 0) { - node.style.paddingTop = (this.baseline - modulo) + 'px'; - } - }); - - } - -} - - -function shouldSnap(node) { - return !node.closest('blockquote'); -} diff --git a/js/these.js b/js/these.js deleted file mode 100644 index 480dba1..0000000 --- a/js/these.js +++ /dev/null @@ -1,36 +0,0 @@ -import { Handler } from '/csspageweaver/lib/paged.esm.js'; - -export default class thesis extends Handler { - constructor(chunker, polisher, caller) { - super(chunker, polisher, caller); - } - - beforeParsed(content){ - - const strongs = content.querySelectorAll('strong'); - strongs.forEach(strong => { - if (/^these\s+\d+/i.test(strong.textContent.trim())) { - const parent = strong.closest('p'); - if (parent) { - parent.classList.add('p-these'); - } - } - }); - - const theseParas = content.querySelectorAll('.p-these'); - theseParas.forEach(p => { - let next = p.nextElementSibling; - while (next && next.tagName.toLowerCase() === 'ol') { - next = next.nextElementSibling; - } - if (!next || !next.classList.contains('p-these')) { - p.classList.add('p-these-last'); - } - }); - } - - - -} - -