decor-6-expe/maquette-tests/assets/css/chapter-header.css
2026-03-16 23:29:25 +01:00

167 lines
No EOL
3.6 KiB
CSS

.chapter {
break-before: right;
page: chapter;
}
@page chapter:first {
@top-left-corner {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
}
@top-left {
content: none;
}
@top-center {
content: none;
}
@top-right {
content: none;
}
}
.chapter-header {
position: relative;
/* break-after: page; */
}
.chapter-header .hgroup {
font-size: 22px;
line-height: 1;
font-weight: normal;
/* margin-top: calc(var(--baseline)*2);*/
position: relative;
top: calc(var(--baseline)*0.25);
margin-bottom: calc(var(--baseline)*3 + 11px);
padding-right: calc(var(--unit)*2);
position: relative;
padding-left: 15px;
}
.chapter-header .hgroup::before {
content: "***************************************************************************************************************************************************************************************************************************************************************************************************************************************************";
display: block;
width: calc(100% + 1ch);
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0px;
z-index: -1;
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: calc(var(--sign-baseline)*1.5);
overflow-wrap: anywhere;
/* padding-top: 6px; */
}
.chapter-header .type {
display: none;
}
.chapter-header .hgroup h2 {
font-family: 'Teletext';
font-weight: normal;
font-size: 1em;
line-height: calc(var(--sign-baseline)*1.5);
display: inline;
box-sizing: border-box;
}
.chapter-header .hgroup h2 span {
color: white;
padding-left: 0.25ch;
padding-right: 0.25ch;
box-decoration-break: clone;
background-color: var(--blue);
padding: 1px 0.25ch;
text-transform: uppercase;
}
.chapter-header .author span {
font-family: 'Teletext';
color: var(--blue);
margin-top: calc(var(--baseline)*1.5);
text-transform: uppercase;
background-color: white;
display: inline-block;
}
.chapter-header .author::before {
display: none;
}
.chapter-header .bio {
display: none;
}
.hgroup-before,
.hgroup-after,
.chapter-header .title-before,
.chapter-header .title-after {
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: calc(var(--sign-baseline)*1);
}
.chapter-header .title-before,
.chapter-header .title-after{
white-space: nowrap;
position: absolute;
left: 0px;
}
.chapter-header .title-before {
top: calc(var(--baseline)*-1.25);
}
.chapter-header .title-after {
bottom: calc(var(--baseline)*-1.5);
}
.hgroup-before{
position: absolute;
left: calc(var(--pagedjs-margin-left)*-1);
padding-left: 19px;
top: -36px;
}
.hgroup-after{
position: absolute;
bottom: calc(var(--baseline)*-5 + 4px);
right: calc(var(--pagedjs-margin-right)*-1);
text-align: right;
/* left: calc(var(--pagedjs-margin-left)*-1);
padding-left: 19px;
top: -36px; */
}