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.

460 lines
9.2 KiB
CSS

/* RESET
===================================================== */
body{
background: white;
color: black;
2 years ago
hyphens: auto;
}
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;
2 years ago
text-decoration-thickness: calc(var(--border-width) * 0.75);
}
.recto section.data-section::after {
color: white;
}
.verso section.data-section::after {
color: black;
}
/* 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;
2 years ago
/* bigger main mono */
--fs-mono: 0.75rem;
/*
notes:
- 12pt is a bit too much for main text
*/
/* variable for flyer */
--bleeds: 5mm;
--bleeds-print: 3mm;
/* 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);
}
2 years ago
.mono{
line-height: var(--lh);
}
/* PRINT LAYOUT
===================================================== */
.container{
position: relative;
}
.layer{
position: absolute;
inset: 0;
}
.bleeds{
position: absolute;
inset: calc(-1 * var(--bleeds-print));
}
.pad{
2 years ago
padding: var(--lh) calc(var(--lh) * 1.5);
}
.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{
2 years ago
/* --- variables */
--crop-marks-w: 1px;
--crop-marks-space: 1mm;
/* --- pre-computed values */
--crop-mark-gradient:
white 0,
white var(--crop-marks-w),
black var(--crop-marks-w),
black calc(var(--crop-marks-w) * 2)
;
--crop-marks-l: linear-gradient(to right, var(--crop-mark-gradient));
--crop-marks-r: linear-gradient(to left, var(--crop-mark-gradient));
--crop-marks-t: linear-gradient(to bottom, var(--crop-mark-gradient));
--crop-marks-b: linear-gradient(to top, var(--crop-mark-gradient));
--crop-mark-v-sizes: calc(var(--crop-marks-w) * 2) calc(var(--bleeds) - var(--crop-marks-space));
--crop-mark-h-sizes: calc(var(--bleeds) - var(--crop-marks-space)) calc(var(--crop-marks-w) * 2);
}
2 years ago
.page::after{
content: '';
position: absolute;
2 years ago
inset: 0;
background:
var(--crop-marks-l), var(--crop-marks-r),
var(--crop-marks-l), var(--crop-marks-r),
var(--crop-marks-t), var(--crop-marks-b),
var(--crop-marks-t), var(--crop-marks-b)
;
2 years ago
background-size:
2 years ago
var(--crop-mark-v-sizes), var(--crop-mark-v-sizes),
var(--crop-mark-v-sizes), var(--crop-mark-v-sizes),
var(--crop-mark-h-sizes), var(--crop-mark-h-sizes),
var(--crop-mark-h-sizes), var(--crop-mark-h-sizes)
;
background-position:
2 years ago
calc(var(--bleeds) - var(--crop-marks-w)) 0%,
calc(var(--page-w) - var(--bleeds) - var(--crop-marks-w)) 0%,
calc(var(--bleeds) - var(--crop-marks-w)) 100%,
calc(var(--page-w) - var(--bleeds) - var(--crop-marks-w)) 100%,
0% calc(var(--bleeds) - var(--crop-marks-w)),
0% calc(var(--page-h) - var(--bleeds) - var(--crop-marks-w)),
100% calc(var(--bleeds) - var(--crop-marks-w)),
100% calc(var(--page-h) - var(--bleeds) - var(--crop-marks-w))
;
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;
}
}
2 years ago
/* FLYER
===================================================== */
.flyer{
--clr-back: white;
--clr-text: black;
--border-width: 0.5px;
--border: var(--border-width) solid var(--clr-text);
}
.flyer section.data-section {
2 years ago
padding: calc(var(--lh) * 1.5) 0 0;
2 years ago
}
.flyer section.data-section > *{
z-index: 9;
position: relative;
}
.flyer section.data-section:after{
line-height: 1.1;
}
/* RECTO
===================================================== */
2 years ago
.recto__title{
2 years ago
margin-left: calc(0 * var(--lh));
position: relative;
}
.recto__title h2{
line-height: 0.95;
2 years ago
/* display: inline-block; */
}
2 years ago
.recto__title h2:nth-of-type(2){
2 years ago
/* margin-left: calc(var(--lh) * 2); */
2 years ago
/* text-align: right;
text-align: center; */
margin-left: calc(3 * var(--lh));
}
.new-moon-slanted-fvs,
.full-moon-slanted-fvs{
text-transform: none !important;
}
2 years ago
.recto__text{
display: grid;
grid-template-rows: min-content 1fr min-content;
2 years ago
gap: calc(var(--lh) * 1);
padding-top: calc(var(--lh) * 2);
padding-bottom: calc(var(--lh) * 1.5);
}
.recto__langs{
display: flex;
gap: var(--lh);
2 years ago
2 years ago
/* margin-left: calc(var(--lh) * 2); */
2 years ago
height: min-content;
margin-top: auto;
}
.recto__langs > *{
flex: 0 1 100%;
gap: var(--lh);
}
.recto__lang > p{
margin: 0;
}
2 years ago
/* VERSO
===================================================== */
.verso{
--clr-back: black;
--clr-text: white;
--border: var(--border-width) solid var(--clr-text);
}
.verso .data-section:after{
color: black;
}
.verso__calendar{
display: grid;
grid-template-rows: 1fr min-content;
gap: calc(var(--lh) / 2);
}
.date-time-info{
line-height: var(--lh);
}
/* GRADIENTS
===================================================== */
.recto{
color: black;
--border-width: 1px;
--border: var(--border-width) solid var(--clr-text);
}
.recto__back{
2 years ago
/* display: none; */
background: linear-gradient(to bottom,
black calc(var(--bleeds-print) + calc(var(--lh) * 0)),
white calc(var(--bleeds-print) + calc(var(--lh) * 2.5))
);
}
.verso{
color: white;
}
.verso__back{
background: linear-gradient(to top,
2 years ago
white calc(var(--bleeds-print) + calc(var(--lh) * 0.5)),
2 years ago
black calc(var(--bleeds-print) + calc(var(--lh) * 2.5))
);
}
2 years ago
/* FOOTERS
===================================================== */
2 years ago
.recto__footer{
display: flex;
2 years ago
flex-direction: column;
2 years ago
justify-content: flex-end;
2 years ago
/* color: white; */
/* text-align: right; */
/* margin-left: 6.7cm;
margin-top: calc(-0.25 * var(--lh)); */
2 years ago
}
.verso__footer{
color: black;
2 years ago
display: flex;
justify-content: flex-end;
2 years ago
}
2 years ago
/* CALENDAR
===================================================== */
.flyer section.data-section.calendar-content > header{
position: absolute;
2 years ago
/* top: -0.9em; */
2 years ago
right: 0;
height: var(--lh);
background: black;
padding-left: var(--lh);
2 years ago
top: -1em;
padding-top: 1em;
}
.flyer-cal-entry{
display: flex;
align-items: baseline;
height: var(--lh);
2 years ago
justify-content: space-between;
justify-content: flex-start;
gap: var(--lh);
}
.flyer-cal-entry .day {
2 years ago
width: 6em;
2 years ago
/* margin-right: calc(var(--lh) * 0.5); */
}
.flyer-cal-entry .phase-name {
2 years ago
width: 4.6em;
2 years ago
/* margin-left: calc(var(--lh) * 2.5); */
margin-left: calc(var(--lh) * 2);
margin-right: calc(var(--lh) * 1.5);
}
.flyer-cal-entry > *{
2 years ago
flex-grow: 0;
background-color: black;
}
2 years ago
.cal-entry__time{
2 years ago
flex-grow: 1;
background: none;
2 years ago
margin-left: calc(var(--lh) * 2);
2 years ago
}
.moon-time{
background-color: black;
padding: 0.2em 0;
}
/* --- moon drawing */
.cal-entry__moon {
2 years ago
width: calc(var(--lh) * 2);
margin-right: 1em;
2 years ago
width: calc(var(--lh) * 4);
}
.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;
3 years ago
}
3 years ago
/* SVG DRAWING
===================================================== */
.recto__drawing svg{
3 years ago
display: block;
2 years ago
height: 4cm;
2 years ago
2 years ago
position: absolute;
top: 0;
right: 0;
overflow: visible;
3 years ago
}
.recto__drawing path{
2 years ago
/* fill: none;
stroke: black; */
/* vector-effect: non-scaling-stroke; */
/* stroke-width: calc(var(--border-width) * 0.75); */
stroke-width: calc(var(--border-width) * 0.25);
stroke-dasharray: 0.25, 0.666;
}
.recto__drawing #lune{
/* stroke-width: calc(var(--border-width) * 2); */
stroke-width: calc(var(--border-width) * 0.666);
stroke-dasharray: 0.25, 2;
}