You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
8.2 KiB
CSS
383 lines
8.2 KiB
CSS
|
|
|
|
/* RESET
|
|
===================================================== */
|
|
|
|
body{
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
body > header{
|
|
display: none;
|
|
}
|
|
|
|
body > section.grid-display > .column-fixed{
|
|
display: none;
|
|
}
|
|
|
|
body > section.grid-display {
|
|
display: block;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.text-content{
|
|
max-width: none;
|
|
}
|
|
|
|
a, a:visited {
|
|
color: currentColor;
|
|
text-decoration-thickness: 0.04em;
|
|
}
|
|
|
|
/* VARIABLES
|
|
===================================================== */
|
|
|
|
:root{
|
|
/* reduce a bit the lh for print */
|
|
--lh: 1.3rem;
|
|
|
|
--fs-big: 5rem;
|
|
/* --fs-big: 4.6rem; */
|
|
--fs-mono-big: 2.4rem;
|
|
--fs-main: 11pt;
|
|
|
|
/*
|
|
notes:
|
|
- 12pt is a bit too much for main text
|
|
*/
|
|
|
|
/* variable for flyer */
|
|
--bleeds: 5mm;
|
|
--bleeds-print: 3mm;
|
|
--margin: 0.8cm;
|
|
|
|
/* A5 */
|
|
--page-inner-w: 210mm;
|
|
--page-inner-h: 148mm;
|
|
--page-w: calc(var(--page-inner-w) + calc(var(--bleeds) * 2));
|
|
--page-h: calc(var(--page-inner-h) + calc(var(--bleeds) * 2));
|
|
|
|
}
|
|
|
|
html{
|
|
font-size: var(--fs-main);
|
|
}
|
|
|
|
|
|
/* PRINT LAYOUT
|
|
===================================================== */
|
|
|
|
.container{
|
|
position: relative;
|
|
}
|
|
.layer{
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
.bleeds{
|
|
position: absolute;
|
|
inset: calc(-1 * var(--bleeds-print));
|
|
}
|
|
|
|
.pad{
|
|
padding: var(--lh) var(--margin);
|
|
}
|
|
|
|
.page{
|
|
width: var(--page-w);
|
|
height: var(--page-h);
|
|
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
overflow: visible;
|
|
|
|
/* https://developer.mozilla.org/en-US/docs/Web/CSS/break-after */
|
|
break-after: page;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.page > .page-content{
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
margin: var(--bleeds);
|
|
top: var(--bleeds);
|
|
margin-top: 0;
|
|
width: var(--page-inner-w);
|
|
height: var(--page-inner-h);
|
|
}
|
|
|
|
.page-rotate{
|
|
width: var(--page-h);
|
|
height: var(--page-w);
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
transform-origin: top right;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
|
|
/* crops mark */
|
|
:root{
|
|
--trsp: rgba(0,0,0,0);
|
|
}
|
|
.page::after{
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(
|
|
to right,
|
|
var(--trsp) 0,
|
|
var(--trsp) calc(var(--bleeds) - 1px),
|
|
white calc(var(--bleeds) - 1px),
|
|
white var(--bleeds),
|
|
black var(--bleeds),
|
|
black calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-w) - var(--bleeds) - 1px),
|
|
black calc(var(--page-w) - var(--bleeds) - 1px),
|
|
black calc(var(--page-w) - var(--bleeds)),
|
|
white calc(var(--page-w) - var(--bleeds)),
|
|
white calc(var(--page-w) - var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-w) - var(--bleeds) + 1px),
|
|
var(--trsp) 100%
|
|
),
|
|
linear-gradient(
|
|
to right,
|
|
var(--trsp) 0,
|
|
var(--trsp) calc(var(--bleeds) - 1px),
|
|
white calc(var(--bleeds) - 1px),
|
|
white var(--bleeds),
|
|
black var(--bleeds),
|
|
black calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-w) - var(--bleeds) - 1px),
|
|
black calc(var(--page-w) - var(--bleeds) - 1px),
|
|
black calc(var(--page-w) - var(--bleeds)),
|
|
white calc(var(--page-w) - var(--bleeds)),
|
|
white calc(var(--page-w) - var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-w) - var(--bleeds) + 1px),
|
|
var(--trsp) 100%
|
|
),
|
|
linear-gradient(
|
|
to bottom,
|
|
var(--trsp) 0,
|
|
var(--trsp) calc(var(--bleeds) - 1px),
|
|
white calc(var(--bleeds) - 1px),
|
|
white var(--bleeds),
|
|
black var(--bleeds),
|
|
black calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-h) - var(--bleeds) - 1px),
|
|
black calc(var(--page-h) - var(--bleeds) - 1px),
|
|
black calc(var(--page-h) - var(--bleeds)),
|
|
white calc(var(--page-h) - var(--bleeds)),
|
|
white calc(var(--page-h) - var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-h) - var(--bleeds) + 1px),
|
|
var(--trsp) 100%
|
|
),
|
|
linear-gradient(
|
|
to bottom,
|
|
var(--trsp) 0,
|
|
var(--trsp) calc(var(--bleeds) - 1px),
|
|
white calc(var(--bleeds) - 1px),
|
|
white var(--bleeds),
|
|
black var(--bleeds),
|
|
black calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-h) - var(--bleeds) - 1px),
|
|
black calc(var(--page-h) - var(--bleeds) - 1px),
|
|
black calc(var(--page-h) - var(--bleeds)),
|
|
white calc(var(--page-h) - var(--bleeds)),
|
|
white calc(var(--page-h) - var(--bleeds) + 1px),
|
|
var(--trsp) calc(var(--page-h) - var(--bleeds) + 1px),
|
|
var(--trsp) 100%
|
|
)
|
|
;
|
|
background-size:
|
|
100% calc(var(--bleeds) - 1mm),
|
|
100% calc(var(--bleeds) - 1mm),
|
|
calc(var(--bleeds) - 1mm) 100%,
|
|
calc(var(--bleeds) - 1mm) 100%;
|
|
background-position:
|
|
0% 0%,
|
|
0% 100%,
|
|
0% 0%,
|
|
100% 0%;
|
|
background-repeat: no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
@media only screen {
|
|
body{
|
|
background-color: whitesmoke;
|
|
}
|
|
.page{
|
|
margin: 1cm auto;
|
|
outline: 1px yellowgreen solid;
|
|
background: white;
|
|
}
|
|
.page-content::after{
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
outline: 1px green solid;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* RECTO
|
|
===================================================== */
|
|
|
|
.recto__title{
|
|
/* padding-top: var(--lh); */
|
|
position: relative;
|
|
}
|
|
.recto__title h2{
|
|
line-height: 0.95;
|
|
display: inline-block;
|
|
/* text-transform: uppercase; */
|
|
}
|
|
.recto__title h2:nth-of-type(3){
|
|
margin-left: calc(var(--lh) * 3);
|
|
}
|
|
|
|
.new-moon-slanted-fvs,
|
|
.full-moon-slanted-fvs{
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.recto__text{
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr min-content;
|
|
gap: calc(var(--lh) * 2);
|
|
}
|
|
|
|
.recto__langs{
|
|
display: flex;
|
|
gap: var(--lh);
|
|
}
|
|
.recto__langs > *{
|
|
flex: 0 1 100%;
|
|
gap: var(--lh);
|
|
}
|
|
|
|
.recto__lang > p{
|
|
margin: 0;
|
|
}
|
|
|
|
.recto__footer{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: white;
|
|
}
|
|
|
|
.recto__back{
|
|
background: linear-gradient(to top,
|
|
black calc(var(--bleeds-print) + var(--lh)),
|
|
white calc(var(--bleeds-print) + calc(var(--lh) * 3))
|
|
);
|
|
}
|
|
|
|
/* VERSO
|
|
===================================================== */
|
|
|
|
.verso{
|
|
color: white;
|
|
}
|
|
|
|
.verso__back{
|
|
background: black;
|
|
|
|
background: linear-gradient(to top,
|
|
white calc(var(--bleeds-print) + var(--lh)),
|
|
black calc(var(--bleeds-print) + calc(var(--lh) * 3))
|
|
);
|
|
}
|
|
|
|
.calendar-content{
|
|
padding: calc(var(--lh) / 2) 0;
|
|
}
|
|
|
|
.verso__calendar{
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr min-content;
|
|
}
|
|
|
|
.verso__footer{
|
|
color: black;
|
|
}
|
|
|
|
/* --- calendar */
|
|
.flyer-cal-entry{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
height: var(--lh);
|
|
}
|
|
|
|
.flyer-cal-entry .day {
|
|
width: 10ch;
|
|
}
|
|
.flyer-cal-entry .phase-name {
|
|
width: 10ch;
|
|
}
|
|
.flyer-cal-entry > *{
|
|
/* outline: 1px solid white; */
|
|
}
|
|
.cal-entry__time{
|
|
margin-right: 10em;
|
|
}
|
|
|
|
/* --- moon drawing */
|
|
|
|
.cal-entry__moon {
|
|
width: 3rem;
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.moon-drawing {
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 100%;
|
|
position: relative;
|
|
top: 0.2em;
|
|
}
|
|
.fullmoon .moon-drawing{
|
|
background: white;
|
|
}
|
|
.newmoon .moon-drawing{
|
|
border: 0.12em dotted white;
|
|
box-sizing: border-box;
|
|
overflow: visible;
|
|
}
|
|
|
|
|
|
/* SVG DRAWING
|
|
===================================================== */
|
|
|
|
.recto__drawing svg{
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
max-height: 85%;
|
|
position: absolute;
|
|
right: 11.0%;
|
|
top: 0.7cm;
|
|
}
|
|
.recto__drawing path{
|
|
fill: none;
|
|
stroke: white;
|
|
vector-effect: non-scaling-stroke;
|
|
stroke-width: 0.5px;
|
|
/* stroke-dasharray: 4; */
|
|
}
|
|
|
|
.flyer-cal-entry > *{
|
|
background-color: black;
|
|
} |