106 lines
2.3 KiB
CSS
106 lines
2.3 KiB
CSS
@page {
|
|
/* Browsers may ignore CSS vars in @page; PDF size is controlled by generator */
|
|
margin: 0;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Heading Now";
|
|
src: url("../font/HeadingNow-95Medium.otf");
|
|
}
|
|
|
|
/* Base */
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.page-base {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.interlude {
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: white;
|
|
padding: 4rem;
|
|
z-index: 0; /* ensure stacking context */
|
|
}
|
|
|
|
.interlude::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: grayscale(20%) brightness(0.7);
|
|
z-index: -2;
|
|
}
|
|
|
|
.interlude::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
/*background: rgba(128, 0, 128, 0.3); /* purple tint */ */
|
|
z-index: -1;
|
|
}
|
|
|
|
.interlude-caption {
|
|
color: rgba(225, 225, 225, 1.0);
|
|
font-family: "Heading Now";
|
|
line-height: 2em;
|
|
rotate: 5deg;
|
|
}
|
|
|
|
/* Use border-box sizing everywhere to keep dimensions predictable */
|
|
html { box-sizing: border-box; }
|
|
*, *::before, *::after { box-sizing: inherit; }
|
|
|
|
/* Screen preview: render a page at exact CSS inches */
|
|
@media screen {
|
|
#page {
|
|
width: var(--page-w, 5.5in);
|
|
height: var(--page-h, 8.5in);
|
|
background: white;
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.18);
|
|
}
|
|
}
|
|
|
|
/* Print-specific sizing to ensure exact physical dimensions */
|
|
@media print {
|
|
html, body {
|
|
width: var(--page-w, 5.5in);
|
|
height: var(--page-h, 8.5in);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden; /* Never spill to a second page */
|
|
}
|
|
|
|
#page {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: var(--page-w, 5.5in);
|
|
max-height: var(--page-h, 8.5in);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden; /* Clip any overflow just in case */
|
|
page-break-inside: avoid; /* Legacy */
|
|
break-inside: avoid-page; /* Modern */
|
|
}
|
|
|
|
/* Avoid browser-added headers/footers if possible (user may need to disable in print dialog) */
|
|
body {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
box-sizing: border-box;
|
|
background: white;
|
|
}
|
|
}
|
|
|