data/styles/worksheet.css

   1 body {
   2   line-height:1.4;
   3   margin-top:0;
   4   margin-left:0;
   5   margin-right:0;
   6   //width:650px;
   7   width:100%;
   8   display: grid;
   9   grid-template-columns: 1 / -1;
  10   justify-items: center;
  11   justify-content:center;
  12 }
  13 .worksheet {
  14 }
  15 .row {
  16   display: grid;
  17   //grid-template-columns: repeat(1000, 1.5em);
  18 }
  19 .worksheet > div:nth-child(2n) {
  20   margin-bottom:.5em;
  21 }
  22 .cell {
  23   display: grid;
  24   place-content: center;
  25   position: relative;
  26   box-shadow:0 0 0 1px #AAA;
  27   background-color:white;
  28   min-height:1cm;
  29   font-size: 20pt;
  30   padding-left:0;
  31   padding-right:0;
  32   margin-left:0;
  33   margin-right:0;
  34 }
  35 .cell-space {
  36   box-shadow:0 0 0 0 red !important;
  37   border-left:1px solid #AAA;
  38 }
  39
  40
  41 .words {
  42   white-space:preserve-spaces;
  43   //width:100%;
  44   margin-left: 10px;
  45   margin-right: 10px;
  46   margin-bottom: 1ex;
  47   margin-top: 1ex;
  48   font-family: monospace;
  49   font-variant: small-caps;
  50   display: grid;
  51   gap: 0px;
  52   //justify-items: center;
  53   justify-self: center;
  54   //background-color:grey;
  55   place-content: center;
  56 }
  57 .words-row {
  58   display: grid;
  59   break-inside:avoid;
  60   grid-template-columns: 6cm 11cm;
  61 }
  62 .words-cell {
  63   display: grid;
  64   vertical-align:center;
  65   position: relative;
  66   box-shadow:0 0 0 3px #AAA;
  67   background-color:white;
  68   min-height:1.5em;
  69   margin-left:0;
  70   margin-right:0;
  71 }
  72
  73
  74 .words-cell .worksheets {
  75   margin-top:1ex;
  76   margin-bottom:1ex;
  77   margin-left:1ex;
  78   margin-right:1ex;
  79   display:flex;
  80   flex-direction: row;
  81   flex-wrap: wrap;
  82   justify-content:space-evenly;
  83   align-items:flex-start;
  84   align-content:space-around;
  85 }
  86 .words-cell .worksheets .worksheet:last-child {
  87   margin-bottom:0;
  88   margin-right:0;
  89 }
  90 .words-cell .worksheets .worksheet {
  91   align-self:flex-start;
  92   white-space:preserve-spaces;
  93   //width:auto;
  94   margin-left: 0;
  95   margin-right: 0.5cm;
  96   margin-bottom: 1ex;
  97   margin-top: 0;
  98   font-family: monospace;
  99   font-variant: small-caps;
 100   display: grid;
 101   gap: 0px;
 102   //justify-items: center;
 103   justify-self: center;
 104   //background-color:grey;
 105 }
 106
 107 .words-cell .worksheets .worksheet > div:nth-child(2n) {
 108   margin-bottom:0;
 109 }
 110 .words-cell-picture {
 111   width: fit-content;
 112   place-content:center;
 113   //block-size:fit-content;
 114   //box-sizing: fit-content;
 115   //width:auto;
 116   //max-height:100%;
 117   //background-color:white;
 118 }
 119 .words-cell-picture img {
 120   border:0;
 121   place-content:center;
 122   vertical-align:center;
 123   width: 100%;
 124   object-fit: contain;
 125   object-position: center center;
 126 }
 127 .words-cell-french {
 128 }
 129 .words-cell-english {
 130 }
 131 .words-cell-mandarin {
 132 }
 133 .words-cell-mandarin .cell {
 134   font-size:30pt;
 135 }
 136 .words-cell-mandarin .row-input .cell {
 137   color:#ddd;
 138 }
 139 .words-cell-mandarin .row-sound .cell {
 140   color:black;
 141   font-size:14pt;
 142   font-variant:normal;
 143 }
 144 .words-cell-pinyin {
 145 }
 146
 147 @media all {
 148   @page {
 149     size: 210mm 297mm;
 150     margin-top: 1cm;
 151     margin-bottom: 1cm;
 152     margin-left: 2cm;
 153     margin-right: 2cm;
 154   }
 155 }
 156 }