HMWC/css/style.css

@font-face {
    font-family: "Fluxisch";
    src: url("../fonts/FluxischElse-Regular.woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Fluxisch-light";
    src: url("../fonts/FluxischElse-Light.woff");
    font-weight: lighter;
    font-style: normal;
}
@font-face {
    font-family: "Fluxisch-bold";
    src: url("../fonts/FluxischElse-Bold.woff");
    font-weight: bold;
    font-style: normal;
}

:root{
    --text: rgb(41, 41, 41);
    --carbon-paper: blue;
    --T-bold: Fluxisch-bold;
    --T-light: Fluxisch-light;
}

body{
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
    counter-reset: page;
    counter-reset: noteNumber;
}

/* ////// general .thesis //////// */

.thesis p{
    width: 70%;
    font-size: 16pt;
}
.chapter{
    margin-top: 150px;
}
.thesis h2{
    font-size: 26pt;
    font-family: Fluxisch;
}

/*//////// cover ////////*/
.cover h1{
    font-size: 80pt;
    font-family: var(--T-bold);
}
.cover h3{
    font-size: 18pt;
    font-family: Fluxisch-light;
    font-weight: lihgter;
}
.cover h4{
    font-family: var(--T-light);
    font-weight: lihgter;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/* ////////opening quote////////// */

.opening-quote{
    position: relative;
    text-align: left;
    margin-top: 40mm;
    float: left;
}
.opening-quote p{
    width: 60mm;
}

/* //// table of content ///// */


table{
    width: 100%;
}

h3{
    font-family: var(--T-light);
    font-size: 20pt ;
}
ul{
    list-style: none;
    line-height: 2ch;
}
table, ul{
    font-size: 20pt;
    font-family: var(--T-light);
    font-weight: lihgter;
}


/* /////////// IMAGES ////////////// */
img{
    max-width: 55%;
    margin: 0 auto;
}
img#soupboat{
    width: 280px;
}

/* /////////// NOTES and CAPTIONs ////////////// */
.note{
    counter-increment: noteNumber;
    
    
}
.footnote::before{
    content: "["counter(noteNumber)"] ";
    font-weight: bold;
}
.footnote{
    position:absolute;
    right: 0;
    width: 45mm;
    font-size: 7.5pt;
    line-height: 1.5;
}

sup{
    
    font-size:1ch;
}
sup.note::after{
    content: " "counter(noteNumber);
    font-weight: bold;
}
.footnote#8{
    position: absolute;
    top:6mm;
    
}
.footnote#13{
    position: absolute;
    bottom: 0;
}

figure{
    margin-left: 0px;
}
figcaption{
    position:absolute;
    right: 0;
    width: 45mm;
    font-size: 7.5pt;
    line-height: 1.5;
    font-weight: bold;
    font-style: italic;

}


/* /////////// COLOPHON //////////// */

.colophon{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    font-family: Fluxisch;
    column-gap: 8mm;
    row-gap: 2mm;
}
.colophon >*{
    width: 40%;
    margin: 1mm;
}
/* .acknowledgments{
    width: 6;
}
.c-info{
    width: 40%;
} */


/* /////////// PRINT ////////////// */

@media screen, print{

    @page{
        margin-top: 12mm;
        margin-bottom: 15mm;
        
        @bottom-center {
            content: counter(page);
          }
    
    }
    @page:left {
        margin-left: 10mm;
        margin-right: 18mm;
      }
      
    @page:right {
        margin-left: 18mm;
        margin-right: 10mm;
    }
    @page :first{
        @bottom-center{content: none;}
    }
    
    @page:nth(2){
        @bottom-center{content:none;}
    }
    @page:nth(3){
        @bottom-center{content:none;}
    }
    @page:nth(4){
        @bottom-center{content:none;}
    }
    @page:nth(28){
        @bottom-center{content:none;}
    }


    .cover h1{
        width: 60%;
        font-size: 60pt;
        font-weight: bold;
    }
    .cover h3{
        width: 70%;
    }
        
    h2{
        break-before: page;
        margin-top: 0;
    }
    
    
    .inside-front{
        break-before: left;
        position: absolute;
        width: 70mm;
        bottom: 0px;
        font-size: 9pt;
        
    }
    .tb-content{
        break-before: page;
    }
    
    .opening-quote{
        break-before: right;
    }
    .colophon{
        break-before:right;
    }
    .back-cover{
        break-before: left;
    }
    

    .thesis p{
        font-size: 9.6pt;
        line-height: 1.55em;
    }

    
    
}