decor-6-expe/maquette-tests/assets/css/chapter-header.css

.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 - 2px); 
  margin-bottom: calc(var(--baseline)*3 + 13px); 
  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(--sign-color);
  padding: 1px 0.25ch;
  text-transform: uppercase;
}


.chapter-header .author span {
  font-family: 'Teletext';
  color: var(--sign-color);
  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 + 1px);
}


.hgroup-before{
  position: absolute;
  left: calc(var(--pagedjs-margin-left)*-1);
  padding-left: 19px;
  top: -47px;
}

.hgroup-after{
  position: absolute;
  bottom: calc(var(--baseline)*-5 - 1px);
  right: calc(var(--pagedjs-margin-right)*-1);
  text-align: right;
}





/* SPECIFIC ----------------------------------------------- */

#charlie-aubry .hgroup{
   top: calc(var(--baseline)*-0.25 - 2px); 
  top: -2px;
}
#charlie-aubry .chapter-header .title-before{
    /* top: calc(var(--baseline)*-1.25); */
     top: calc(var(--baseline)*-1.5);
}

#charlie-aubry .chapter-header .title-after {
  /* bottom: calc(var(--baseline)*-5 - 1px); */
    bottom: calc(var(--baseline) * -1.75 + 1px);
}

#charlie-aubry .hgroup-after{
  bottom: calc(var(--baseline)*-11 - 10px);
}