chapter hgroup + calming decor
This commit is contained in:
Julie Blanc
parent
0545b131de
commit
94d14d70c1
370 changed files with 9583 additions and 1566 deletions
|
|
@ -2,6 +2,9 @@
|
|||
|
||||
.chapter-header {
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*-2.5);
|
||||
width: calc(100% + 4px);
|
||||
/* width: 101%; */
|
||||
}
|
||||
|
||||
.chapter-header .hgroup {
|
||||
|
|
@ -10,15 +13,12 @@
|
|||
font-weight: normal;
|
||||
position: relative;
|
||||
top: calc(var(--baseline)*-0.25 - 2px);
|
||||
margin-bottom: calc(var(--baseline)*3 + 13px);
|
||||
/* margin-bottom: calc(var(--baseline)*3 + 13px); */
|
||||
/*padding-right: calc(var(--unit)*2);*/
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
/* padding-left: 15px; */
|
||||
}
|
||||
|
||||
.chapter-header .type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .hgroup h2 {
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
/*display: inline;*/
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-top: 1em;
|
||||
color: var(--sign-color);
|
||||
|
||||
}
|
||||
|
|
@ -38,7 +38,6 @@
|
|||
padding-left: 0.25ch;
|
||||
padding-right: 0.25ch;
|
||||
box-decoration-break: clone;
|
||||
/*background-color: var(--sign-color);*/
|
||||
padding: 1px 0.25ch;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -59,11 +58,17 @@
|
|||
.chapter-header .author::before { display: none; }
|
||||
.chapter-header .bio { display: none; }
|
||||
|
||||
.hgroup-before,
|
||||
.hgroup-after,
|
||||
.chapter-header .title-before,
|
||||
|
||||
.chapter-header .icon-type{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .title-between,
|
||||
.chapter-header .title-after,
|
||||
.chapter-header .title-between {
|
||||
.chapter-header .icon-type,
|
||||
.chapter-header .type-container,
|
||||
.chapter-header .type-separator{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -71,22 +76,35 @@
|
|||
line-height: calc(var(--sign-baseline)*1);
|
||||
}
|
||||
|
||||
.chapter-header .title-before,
|
||||
.chapter-header .title-after{
|
||||
.chapter-header .type-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chapter-header .type{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* .chapter-header .title-before, */
|
||||
/* .chapter-header .title-after{
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
} */
|
||||
|
||||
.chapter-header .title-between{
|
||||
.chapter-header .title-between,
|
||||
.chapter-header .title-after{
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
max-width: 1ch;
|
||||
margin-inline: auto;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
/* font-size: 1em; */
|
||||
}
|
||||
|
||||
.chapter-header .title-before {
|
||||
top: calc(var(--baseline)*-2.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.chapter-header .title-after {
|
||||
bottom: calc(var(--baseline)*-2.25 + 1px);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
.container-following-note {
|
||||
margin-left: calc(var(--unit)*2);
|
||||
margin-left: calc(var(--unit)*1.5);
|
||||
}
|
||||
|
||||
.wrapper__note-call {
|
||||
|
|
@ -41,5 +41,5 @@
|
|||
|
||||
.following-note_marker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
left: calc(var(--unit) * 0.75);
|
||||
}
|
||||
|
|
@ -11,12 +11,17 @@ h3, h4{
|
|||
color: var(--sign-color);
|
||||
}
|
||||
|
||||
h4::before{
|
||||
content: "///";
|
||||
}
|
||||
|
||||
.h3_container,
|
||||
.h4_container{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
h4::before,
|
||||
.subtitle-before,
|
||||
.subtitle-after{
|
||||
letter-spacing:var(--sign-spacing);
|
||||
|
|
@ -41,15 +46,20 @@ h3, h4{
|
|||
.subtitle-text{
|
||||
/* background-color: yellow; */
|
||||
flex-grow: 2;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.decor-h3{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
/* position: relative; */
|
||||
orphans: 2;
|
||||
hyphens: 2;
|
||||
text-indent: calc(var(--unit) * 0.75);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chapter h2,
|
||||
|
|
@ -14,7 +16,7 @@
|
|||
|
||||
|
||||
p::before {
|
||||
content: ".........";
|
||||
/* content: "........."; */
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -25,15 +27,33 @@ p::before {
|
|||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: -4px;
|
||||
|
||||
content: "...";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: calc(var(--unit) * -0.75);
|
||||
top: 7px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
|
||||
.first-p,
|
||||
.following-title,
|
||||
.following-h3,
|
||||
.following-h4{
|
||||
text-indent: 0!important;
|
||||
}
|
||||
|
||||
.first-p::before,
|
||||
.following-title::before,
|
||||
.following-h3::before {
|
||||
.following-h3::before,
|
||||
.following-h4::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ------ BILBIOGRAPHIE ------ */
|
||||
|
||||
.block-type-bibliographie p {
|
||||
|
|
@ -70,3 +90,6 @@ p::before {
|
|||
|
||||
|
||||
|
||||
sup{
|
||||
line-height: 0;
|
||||
}
|
||||
|
|
@ -101,13 +101,27 @@ class subtitlesDecor extends Paged.Handler {
|
|||
|
||||
|
||||
beforeParsed(content){
|
||||
content.querySelectorAll("h3").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h3");
|
||||
content.querySelectorAll("h3, h4").forEach(subtitle => {
|
||||
const block = subtitle.closest('.block');
|
||||
const nextBlock = block?.nextElementSibling;
|
||||
|
||||
if (!nextBlock) return;
|
||||
|
||||
const firstP = nextBlock.querySelector('p');
|
||||
|
||||
if (!firstP) return;
|
||||
|
||||
if (subtitle.tagName === "H3") {
|
||||
firstP.classList.add("following-h3");
|
||||
}
|
||||
|
||||
if (subtitle.tagName === "H4") {
|
||||
firstP.classList.add("following-h4");
|
||||
}
|
||||
});
|
||||
content.querySelectorAll("h4").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h4");
|
||||
content.querySelectorAll(".chapter-content").forEach(chapter => {
|
||||
let pfirst = chapter.querySelector('p');
|
||||
pfirst.classList.add("first-p");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -121,14 +135,14 @@ class subtitlesDecor extends Paged.Handler {
|
|||
this.processTitle(subtitle, symbol, true, isLeft);
|
||||
});
|
||||
|
||||
pageElement.querySelectorAll("h4").forEach(subtitle => {
|
||||
this.processTitle(subtitle, symbol, false, isLeft);
|
||||
const container = document.createElement("div");
|
||||
container.className = "h4_container " + subtitle.className;
|
||||
subtitle.className = "";
|
||||
subtitle.parentNode.insertBefore(container, subtitle);
|
||||
container.appendChild(subtitle);
|
||||
});
|
||||
// pageElement.querySelectorAll("h4").forEach(subtitle => {
|
||||
// this.processTitle(subtitle, symbol, false, isLeft);
|
||||
// const container = document.createElement("div");
|
||||
// container.className = "h4_container " + subtitle.className;
|
||||
// subtitle.className = "";
|
||||
// subtitle.parentNode.insertBefore(container, subtitle);
|
||||
// container.appendChild(subtitle);
|
||||
// });
|
||||
|
||||
pageElement.querySelectorAll("h6").forEach(h6 => {
|
||||
if (h6.closest(".h6_container")) return;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue