Spaces:
Sleeping
Sleeping
| @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; | |
| } | |
| } |