@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; } }