From 52a3fc76b8bc4e209b61dac701d3334887e81684 Mon Sep 17 00:00:00 2001 From: emma Date: Mon, 12 Jun 2023 13:10:33 +0000 Subject: [PATCH] changed file name --- style.css | 266 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 266 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..d044ae7 --- /dev/null +++ b/style.css @@ -0,0 +1,266 @@ + +body{ + margin: 0; + display: block; + +} + +.page { + 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; + box-sizing: border-box; /* Includes the border in the width and height calculation */ + overflow: hidden; + + + + +} + +.card.left-card { + padding-right: 10mm; + +} + +.card.right-card { + padding-left: 10mm; + +} + +/*game */ +h1{ + font-size: 12pt; + font-family: 'NotCourierSans Bold', Courier, monospace; + color: #c4007a; + font-weight: 600; + padding-left: 5mm; + padding-right: 5mm; + text-align: center; + padding-top: 50px; + overflow: hidden; + margin: 0mm; + margin-bottom: 5pt; + line-height: 14pt; + overflow-wrap: break-word; + + + +} + +/* thesis quotes */ +h2{ + font-family: 'Catamaran Bold', sans-serif; + font-weight: 1000; + font-size: 12pt; + color: #a6dbf0; + margin: 0mm; + margin-bottom: 5pt; + line-height: 14pt; + padding: 5mm 5mm 0mm 5mm; + +} + +/* alternative materials*/ +h3 { + font-family: 'Catamaran Bold', sans-serif; + font-weight: 1000; + font-size: 12pt; + color: #E2C044; + margin: 0mm; + margin-bottom: 5pt; + line-height: 14pt; + padding: 5mm 5mm 0mm 5mm; +} + +/* wiki*/ +h4{ + font-family: 'NotCourierSans Bold',Courier, sans-serif; + font-weight: 800; + font-size: 12pt; + color: #9594C4; + line-height:normal; + padding-left: 10mm; + margin: 1mm; + padding: 5mm 5mm 0mm 5mm; + + +} +.h4::after { + content: ":"; + white-space: pre; + } + + .a4::after { + content: "\A"; + white-space: pre; + } + +p{ + margin: 0mm; + line-height: 10.5pt; + font-family: 'Catamaran Medium', sans-serif; + font-weight: 400; + font-size: 10pt; + color: #393E41; + padding: 0mm 5mm 0mm 5mm; + + +} + +.tensteps{ + font-family: 'Catamaran Bold', sans-serif; + font-weight: 800; + font-size: 12pt; + color: #B4D194; + line-height: 16pt; + padding-top: 50%;; + padding-left: 5mm; + text-align: center; + display: inline-block; + align-self: flex-end; + +} + + +img { + width: 100%;; + height: 100%; + object-fit: cover; + float: left; + height: auto; + max-width: 100%; + +} + +.image_titles { + position: absolute; + width: 105mm; + text-align: center; +} + +.game{ + + + object-fit:cover; +} + +@media print { + + * { + 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; + } + + + + .overflowing-element { + overflow: hidden; + } + nav{ + display: none !important; + } + + +} + +@media screen { + .page{ + border: 1px solid #9594c4; + margin-bottom: 5px; + + } + + + nav { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 50; + padding: 24px; + text-align: right; + position: fixed; + top: 0; + display: flex; + justify-content: flex-end; + + + } + + nav button { + margin-left: 10px; + } + + #textField { + margin-top: 100px; + position: absolute; + right: 0; + padding: 24px; + } + + .btn { + background: white; + display: inline-block; + min-width: 50px; + height: 50px; + border-radius: 24px; + padding: 0 4px; + border: 1px solid currentColor; + color: #9594c4; + transition-duration: 0.7s; + cursor: pointer; + + + } + + .btn:hover { + background-color: #9594c4; + + } + + +} + + +#textbox { + position: absolute; + bottom: 0; + left: 0; + width: 100px; + height: 50px; + } + + + + + \ No newline at end of file