You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

266 lines
4.6 KiB
CSS

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

body{
margin: 0;
display: block;
}
.card {
float: left;
width: calc(200mm / 2 ); /* Adjusted width to fit 2 cards per row with margins */
height: calc(287mm / 4 ) ; /* Adjusted height to fit 4 rows per page with margins */
/*border: 1px solid black;*/
box-sizing: border-box; /* Includes the border in the width and height calculation */
overflow: hidden;
}
.card.image{
width: calc(200mm / 2); /* Adjusted width to fit 2 cards per row with margins */
height: calc(287mm / 4);
padding: 0;
margin: 0;
box-sizing: border-box; /* Includes the border in the width and height calculation */
overflow: hidden;
}
.card.text{
padding: 5mm;
box-sizing: border-box; /* Includes the border in the width and height calculation */
overflow: hidden;
background-color: white;
}
/*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: 0mm 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: 0mm 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: 0mm 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: 100px;
padding-left: 5mm;
text-align: center;
display: inline-block;
align-self: flex-end;
}
.image_titles {
/*width: 105mm;*/
text-align: center;
margin-top: 63mm;
margin-left: 9mm;
font-family: 'NotCourierSans', Courier, sans-serif;
font-size: 12pt;
/*text-shadow: -1px 2px #393e41;*/
color:black;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #9594c49e;
}
.game{
object-fit:cover;
width: 95mm;
}
@media print {
.body{
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 15.3, Edge */ /* Firefox 48 96 */
print-color-adjust: exact !important;
}
.page{
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 15.3, Edge */
print-color-adjust: exact !important;
}
.overflowing-element {
overflow: hidden;
}
nav{
display: none !important;
}
}
@media screen {
.body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(200mm / 2), 1fr));
grid-gap: 5mm;
height: 287mm;
width: 200mm;
margin: 0 auto;
padding: 5mm;
overflow: hidden;
}
.card {
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
transition: transform .2s;
}
/*change the number below to scale to the appropriate size*/
.card:hover {
transform: scale(2);
}
nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 24px;
text-align: right;
position: fixed;
top: 0;
}
.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;
}
}