Merge branch 'main' of https://git.xpub.nl/flem/How_to_make_a_notebook_that

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
   }