decor-6-site/assets/css/subtitles.css

123 lines
1.9 KiB
CSS
Raw Normal View History

h3, h4{
break-after: avoid;
}
h3, h4{
font-family: var(--sign-family);
font-weight: normal;
margin-top: calc(var(--baseline)*1.5);
margin-bottom: calc(var(--baseline)*1);
position: relative;
font-size: var(--font-size);
color: var(--sign-color);
}
.h3_container,
.h4_container{
position: relative;
}
.subtitle-before,
.subtitle-after{
letter-spacing:var(--sign-spacing);
font-size: var(--sign-size);
color: var(--sign-color);
line-height: var(--sign-baseline);
}
.subtitle-line {
display: flex;
justify-content: flex-end;
}
.subtitle-after{
padding-left: 0.75ch;
position: relative;
left: 6px;
overflow-wrap: anywhere;
}
.subtitle-text{
/* background-color: yellow; */
flex-grow: 2;
}
.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;
}
/* LEFTPAGE */
.decor-h3_small{
left: -49px;
top: calc(var(--baseline)*-2.5 + 9px);
}
.decor-h3_big{
right: -81px;
text-align: right;
top: calc(var(--baseline) * -3.5 - 9px);
}
/*RIGHTPAGE */
.pagedjs_right_page .decor-h3_small{
left: auto;
right: -53px;
top: calc(var(--baseline)*-2.5 + 9px);
text-align: right;
}
.pagedjs_right_page .decor-h3_big{
right: 0;
left: -80px;
text-align: left;
top: calc(var(--baseline) * -3.5 - 9px);
}
/*if page top */
.pagedjs_right_page .subtitle-top-page h3 {
margin-top: 0px;
}
.pagedjs_right_page .subtitle-top-page [data-count="2"]{
color: transparent
}
.pagedjs_left_page .subtitle-top-page h3 {
margin-top: 5px;
}
.pagedjs_left_page .subtitle-top-page .decor-h3_big [data-count="1"],
.pagedjs_left_page .subtitle-top-page .decor-h3_big [data-count="2"]{
color: transparent!important
}