wrap thesis
This commit is contained in:
Julie Blanc
parent
626ba00ba8
commit
9ef96b6897
5 changed files with 101 additions and 97 deletions
|
|
@ -70,49 +70,52 @@ ul{
|
|||
|
||||
|
||||
|
||||
|
||||
// ol, p, h4, h5, h6{
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
|
||||
// THESE --------------------------------------------------
|
||||
|
||||
.p-these{
|
||||
font-weight: 500;
|
||||
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;
|
||||
}
|
||||
|
||||
.thesis p{
|
||||
display: block;
|
||||
}
|
||||
// .p-these{
|
||||
// font-weight: 500;
|
||||
// margin-bottom: calc(var(--baseline)*0.5);
|
||||
// display: block;
|
||||
// strong{
|
||||
// text-transform: uppercase;
|
||||
// display: inline-block;
|
||||
// min-width: $indent*2;
|
||||
// font-weight: bold;
|
||||
// font-size: var(--fs-small);
|
||||
// letter-spacing: 0.05rem;
|
||||
// }
|
||||
|
||||
.p-these-last{
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
// }
|
||||
|
||||
// .p-these-last{
|
||||
// margin-bottom: calc(var(--baseline)*1);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// INTRO --------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
.has-intro-1-paragraph .intro,
|
||||
.has-intro .intro{
|
||||
break-after: right;
|
||||
}
|
||||
.intro{
|
||||
color: red;
|
||||
p{
|
||||
font-size: var(--fs-intro);
|
||||
padding-left: calc(var(--unit)*1);
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chapter-end{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
}
|
||||
|
|
@ -2,35 +2,26 @@
|
|||
#section__content{
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
h1:first-of-type{
|
||||
// column-span: all;
|
||||
// height: $content-h;
|
||||
}
|
||||
|
||||
// .before-h1{
|
||||
// break-after: page;
|
||||
// }
|
||||
|
||||
|
||||
h1{
|
||||
.h1-count::after{
|
||||
content: "."
|
||||
}
|
||||
|
||||
.h1-count{
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
// break-before: page;
|
||||
// break-after: page;
|
||||
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
|
||||
height: $content-h;
|
||||
// background-color: red;
|
||||
min-height: $content-h;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
// display: none;
|
||||
|
||||
&[data-split-from]{
|
||||
color: red;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -304,21 +304,8 @@ ul {
|
|||
color: red;
|
||||
}
|
||||
|
||||
.p-these {
|
||||
font-weight: 500;
|
||||
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;
|
||||
}
|
||||
|
||||
.p-these-last {
|
||||
margin-bottom: calc(var(--baseline) * 1);
|
||||
.thesis p {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.has-intro-1-paragraph .intro,
|
||||
|
|
@ -327,19 +314,11 @@ ul {
|
|||
break-after: right;
|
||||
}
|
||||
|
||||
.intro {
|
||||
color: red;
|
||||
}
|
||||
.intro p {
|
||||
font-size: var(--fs-intro);
|
||||
padding-left: calc(var(--unit) * 1);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.chapter-end {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-id=section__content] {
|
||||
|
|
@ -361,12 +340,22 @@ ol[type="1"] {
|
|||
left: 0px;
|
||||
}
|
||||
|
||||
#section__content h1 .h1-count::after {
|
||||
content: ".";
|
||||
}
|
||||
#section__content h1 .h1-count {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#section__content h1 {
|
||||
height: 215mm;
|
||||
min-height: 215mm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#section__content h1[data-split-from] {
|
||||
color: red;
|
||||
position: absolute;
|
||||
}
|
||||
#section__content h2::before, #section__content h3::before, #section__content h4::before, #section__content h5::before, #section__content h6::before {
|
||||
content: attr(data-counter);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -58,10 +58,10 @@ function wrapChapterAndIntro(content){
|
|||
|
||||
|
||||
|
||||
// Wrap content between h1 and h2 in .intro if chapter doesn't contain .p-these
|
||||
// Wrap content between h1 and h2 in .intro if chapter doesn't contain .thesis
|
||||
const chapters = sectionContent.querySelectorAll('.chapter');
|
||||
chapters.forEach(chapter => {
|
||||
if (chapter.querySelector('.p-these')) {
|
||||
if (chapter.querySelector('.thesis')) {
|
||||
// Case 1: Chapter has thesis
|
||||
chapter.classList.add('has-thesis');
|
||||
} else {
|
||||
|
|
@ -150,31 +150,52 @@ function wrapChapterAndIntro(content){
|
|||
|
||||
function thesis(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) {
|
||||
const thesisDiv = document.createElement('div');
|
||||
thesisDiv.classList.add('thesis-title');
|
||||
const thesisP = document.createElement('p');
|
||||
thesisP.textContent = strong.textContent;
|
||||
thesisDiv.appendChild(thesisP);
|
||||
parent.parentNode.insertBefore(thesisDiv, parent);
|
||||
strong.remove();
|
||||
const thesisElements = [];
|
||||
|
||||
parent.classList.add('p-these');
|
||||
strongs.forEach(strong => {
|
||||
if (/^these\s+\d+/i.test(strong.textContent.trim())) {
|
||||
const parent = strong.closest('p');
|
||||
if (parent) {
|
||||
// Create thesis wrapper
|
||||
const thesisWrapper = document.createElement('div');
|
||||
thesisWrapper.classList.add('thesis');
|
||||
|
||||
// Find preceding ol if it exists
|
||||
let prev = parent.previousElementSibling;
|
||||
let olElement = null;
|
||||
if (prev && prev.tagName.toLowerCase() === 'ol') {
|
||||
olElement = prev;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const theseParas = content.querySelectorAll('.p-these');
|
||||
theseParas.forEach(p => {
|
||||
let next = p.nextElementSibling;
|
||||
while (next && next.tagName.toLowerCase() === 'ol') {
|
||||
next = next.nextElementSibling;
|
||||
// Insert thesis wrapper before ol or before p
|
||||
if (olElement) {
|
||||
olElement.parentNode.insertBefore(thesisWrapper, olElement);
|
||||
thesisWrapper.appendChild(olElement);
|
||||
} else {
|
||||
parent.parentNode.insertBefore(thesisWrapper, parent);
|
||||
}
|
||||
|
||||
// Create thesis-title
|
||||
const thesisTitleDiv = document.createElement('div');
|
||||
thesisTitleDiv.classList.add('thesis-title');
|
||||
const thesisP = document.createElement('p');
|
||||
thesisP.textContent = strong.textContent;
|
||||
thesisTitleDiv.appendChild(thesisP);
|
||||
thesisWrapper.appendChild(thesisTitleDiv);
|
||||
|
||||
// Transform parent p into thesis-content
|
||||
strong.remove();
|
||||
parent.classList.add('thesis-content');
|
||||
thesisWrapper.appendChild(parent);
|
||||
|
||||
thesisElements.push(thesisWrapper);
|
||||
}
|
||||
if (!next || !next.classList.contains('p-these')) {
|
||||
p.classList.add('p-these-last');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Mark first and last thesis
|
||||
if (thesisElements.length > 0) {
|
||||
thesisElements[0].classList.add('thesis-first');
|
||||
thesisElements[thesisElements.length - 1].classList.add('thesis-last');
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue