diff --git a/style.css b/style.css index 6c66580..31d4b2f 100644 --- a/style.css +++ b/style.css @@ -6,6 +6,7 @@ body{ } .page { +<<<<<<< HEAD height: 287mm; width: 200mm; margin: 0 auto; @@ -30,10 +31,31 @@ body{ height: calc(287mm / 4); padding: 0; margin: 0; +======= + height: 297mm; + width: 210mm; + margin: 0 auto; + +} + +@page { + size: a4; + + +} + +.card { + float: left; + width: calc(210mm / 2 - 10mm); /* Adjusted width to fit 2 cards per row with margins */ + height: calc(297mm / 4 - 10mm); /* Adjusted height to fit 4 rows per page with margins */ + /*border: 1mm solid salmon;*/ + margin: 5mm; +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 box-sizing: border-box; /* Includes the border in the width and height calculation */ overflow: hidden; +<<<<<<< HEAD } .card.text{ padding: 5mm; @@ -43,6 +65,21 @@ body{ } +======= + + +} + +.card.left-card { + padding-right: 10mm; + +} + +.card.right-card { + padding-left: 10mm; + +} +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 /*game */ h1{ @@ -73,7 +110,11 @@ h2{ margin: 0mm; margin-bottom: 5pt; line-height: 14pt; +<<<<<<< HEAD padding: 0mm 5mm 0mm 5mm; +======= + padding: 5mm 5mm 0mm 5mm; +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 } @@ -86,7 +127,11 @@ h3 { margin: 0mm; margin-bottom: 5pt; line-height: 14pt; +<<<<<<< HEAD padding: 0mm 5mm 0mm 5mm; +======= + padding: 5mm 5mm 0mm 5mm; +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 } /* wiki*/ @@ -98,7 +143,11 @@ h4{ line-height:normal; padding-left: 10mm; margin: 1mm; +<<<<<<< HEAD padding: 0mm 5mm 0mm 5mm; +======= + padding: 5mm 5mm 0mm 5mm; +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 } @@ -128,9 +177,15 @@ p{ font-family: 'Catamaran Bold', sans-serif; font-weight: 800; font-size: 12pt; +<<<<<<< HEAD color: #b4d194; line-height: 16pt; padding-top: 100px; +======= + color: #B4D194; + line-height: 16pt; + padding-top: 50%;; +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 padding-left: 5mm; text-align: center; display: inline-block; @@ -139,6 +194,7 @@ p{ } +<<<<<<< HEAD @@ -160,16 +216,37 @@ p{ } +======= +img { + width: 100%;; + height: 100%; + object-fit: cover; + float: left; + height: auto; + max-width: 100%; + +} + +.image_titles { + position: absolute; + width: 105mm; + text-align: center; +} +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 .game{ object-fit:cover; +<<<<<<< HEAD width: 95mm; +======= +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 } @media print { +<<<<<<< HEAD .body{ @@ -184,6 +261,26 @@ p{ -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */ print-color-adjust: exact !important; +======= + * { + box-sizing: border-box; + } + + .body{ + margin: 0; + -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */ + color-adjust: exact !important; /* Firefox 48 – 96 */ + print-color-adjust: exact !important; + } + + @page{ + size: a4 !important; + margin: 0; + color-adjust: exact; + -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */ + color-adjust: exact !important; /* Firefox 48 – 96 */ + print-color-adjust: exact !important; +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 } @@ -201,10 +298,14 @@ p{ @media screen { .page{ border: 1px solid #9594c4; +<<<<<<< HEAD margin-bottom: 0; height: 287mm; width: 200mm; overflow: hidden; +======= + margin-bottom: 5px; +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 } @@ -219,9 +320,28 @@ p{ text-align: right; position: fixed; top: 0; +<<<<<<< HEAD + + + } +======= + display: flex; + justify-content: flex-end; } + + nav button { + margin-left: 10px; + } + + #textField { + margin-top: 100px; + position: absolute; + right: 0; + padding: 24px; + } +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 .btn { background: white; @@ -253,7 +373,10 @@ p{ left: 0; width: 100px; height: 50px; +<<<<<<< HEAD +======= +>>>>>>> 52a3fc76b8bc4e209b61dac701d3334887e81684 }