File size: 2,044 Bytes
470f9a1
 
 
09d63fd
 
 
 
 
 
 
 
 
 
 
 
470f9a1
 
 
09d63fd
f157c01
09d63fd
 
 
 
 
470f9a1
 
284d622
09d63fd
284d622
 
 
09d63fd
284d622
 
 
f157c01
284d622
 
 
09d63fd
 
284d622
 
09d63fd
284d622
 
470f9a1
284d622
 
 
470f9a1
09d63fd
 
 
470f9a1
 
 
09d63fd
 
 
 
470f9a1
 
 
09d63fd
 
470f9a1
 
 
09d63fd
 
470f9a1
 
 
 
09d63fd
 
 
 
470f9a1
 
 
 
09d63fd
 
470f9a1
 
 
09d63fd
 
470f9a1
 
 
09d63fd
 
 
 
 
 
 
470f9a1
 
284d622
09d63fd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap');

@font-face {
 font-family: 'YuMincho';
 src: url("./fonts/yumin.ttf") format('truetype');
 font-weight: regular;
}

:root {
  --page-margin-x: 14mm;
  --page-margin-y: 11mm;
  --card-width: 91mm;
  --card-height: 55mm;
  --page-width: calc((210mm - 2 * var(--page-margin-x)));
  --page-height: calc((297mm -2 * var(--page-margin-y)));
}

body {
 font-size: 10pt;
 color: #666;
 font-family: Alegreya, "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", "MS PMincho", "Crimson Text", serif;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
 grid-auto-rows: var(--card-height);
 gap: 0;
}

h1 {
 font-weight: bold;
}

p {
 font-family: 'MS Mincho', serif;
}

img {
 opacity: 1;
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
  align-items: center;
  justify-items: center;
  border: 0px solid black;
  position: relative;
}

.card > * {
 margin: 0;
 top: 0;
 left: 0;
}

.card h1 {
 font-size: 1.4rem;
 font-weight: bold;
 grid-column: 1;
 grid-row: 2;  /* centering h1 */
}

.card h2 {
 font-size: 1rem;
 grid-column: 1;
}

.card h3 {
 font-size: 1rem;
 grid-column: 1;
}

.card ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  grid-column: 1;
}

.card ol {
 list-style: none;
 padding: 0;
}

.card li {
 font-size: 0.6rem;
 flex-basis: 50%;
}

.card img {
 max-width: 100%;
 max-height: 100%;
 justify-self: end;
 align-self: end;
 position: absolute;
 object-fit: cover;
 z-index: -1;
}

@media print {
 body {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-auto-rows: minmax(55mm, auto);
   margin: var(--page-margin-y) var(--page-margin-x);
   gap: 0;
 }

 .card {
   margin: 0;
   border: none;
   width: auto;
   height: auto;
 }
}