nycki/nycki.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css cleanup
All checks were successful
/ build (push) Successful in 45s
Details

Browse source
This commit is contained in:
Nycki 2025-11-15 12:49:36 -08:00
parent eec62d6724
commit 65f0f55e05
1 changed files with 29 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
static/papermod/index.html
View file

@ -4,24 +4,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Nycki's Papermod</title> <title>Nycki's Papermod</title>
<style> <style>
html { :root {
--card-width: 74mm;
--card-height: 105mm;
--m: 2mm;
--m2: calc(2 * var(--m));
--m4: calc(4 * var(--m));
background-color: #929591; /*xkcd-grey*/ background-color: #929591; /*xkcd-grey*/
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
@page { size: 74mm 105mm; }
body { body {
margin: 0; margin: 0;
/* break after fourth page on large monitors */ /* break after fourth page on large monitors */
max-width: calc((74mm + 8mm) * 4); max-width: calc(4 * (var(--card-width) + var(--m4)));
} }
#settings { #settings {
width: calc(100% - 12mm); max-width: fit-content;
margin: 4mm; margin: var(--m2);
padding: 4mm; padding: var(--m2);
background-color: white; background-color: white;
} }
#settings * { #settings * {
margin: 2mm 0; margin: var(--m) 0;
} }
#settings :first-child { #settings :first-child {
margin: 0; margin: 0;
@ -34,10 +40,10 @@
.page { .page {
background-color: white; background-color: white;
box-sizing: border-box; box-sizing: border-box;
width: 74mm; width: var(--card-width);
height: 105mm; height: var(--card-height);
margin: 4mm; margin: var(--m2);
padding: 4mm; padding: var(--m2);
position: relative; position: relative;
text-align: center; text-align: center;
display: flex; display: flex;
@ -60,36 +66,33 @@
break-after: page; break-after: page;
} }
} }
@page {
size: 74mm 105mm;
}
/* page 1 */ /* page 1 */
.week { .week {
font-weight: bold; font-weight: bold;
font-size: 14mm; font-size: calc(7 * var(--m));
} }
.date { .date {
font-size: 8mm; font-size: calc(4 * var(--m));
} }
.return-addr { .return-addr {
font-weight: bold; font-weight: bold;
margin: 8mm; margin: var(--m4);
} }
.footer { .footer {
font-style: italic; font-style: italic;
font-size: smaller; font-size: smaller;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 4mm; bottom: var(--m2);
width: 100%; width: 100%;
} }
/* page 2-3 */ /* page 2-3 */
.month .landscape { .month .landscape {
width: calc(105mm - 8mm); width: calc(var(--card-height) - var(--m4));
height: calc(74mm - 8mm); height: calc(var(--card-width) - var(--m4));
transform-origin: 0mm 0mm; transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%); transform: rotate(-90deg) translateX(-100%);
} }
.month table { .month table {
@ -122,9 +125,9 @@
} }
.week tr:nth-child(odd) td { .week tr:nth-child(odd) td {
text-align: left; text-align: left;
padding-left: 2mm; padding-left: var(--m);
font-size: 4mm; font-size: var(--m2);
height: 4mm; height: var(--m2);
} }
/* page 6-7 */ /* page 6-7 */
@ -136,15 +139,15 @@
.sudoku table:has(table) { .sudoku table:has(table) {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
padding-top: 12mm; padding-top: calc(6 * var(--m));
border-collapse: separate; border-collapse: separate;
} }
.sudoku table table { .sudoku table table {
border-collapse: collapse; border-collapse: collapse;
} }
.sudoku table table td { .sudoku table table td {
width: 5mm; width: calc(3 * var(--m));
height: 5mm; height: calc(3 * var(--m));
border: thin solid black; border: thin solid black;
} }
</style> </style>