data/styles/rosetta.css

   1 body {
   2   background:rgb(204,204,204);
   3   display:grid;
   4   font-size:12pt;
   5   grid-template-columns:1 / -1;
   6   height:100%;
   7   justify-content:center;
   8   justify-items:center;
   9   line-height:1.4;
  10   margin:0 auto;
  11   padding:0;
  12   width:300mm;
  13 }
  14 * {
  15   box-sizing:border-box;
  16   -moz-box-sizing:border-box;
  17 }
  18 .main-page {
  19   margin:10mm auto;
  20   background-color:white;
  21   box-shadow:0 0 0.5cm rgba(0,0,0,0.5);
  22 }
  23 .sub-page {
  24   padding:1cm;
  25 }
  26 .page-PageSizeA4-PageOrientationPortrait {
  27   height:297mm;
  28   width:210mm;
  29   /* ExplanationNote: to bind the paper for easy writing. */
  30   margin-top:1cm;
  31 }
  32 .page-PageSizeA4-PageOrientationLandscape {
  33   height:210mm;
  34   width:297mm;
  35 }
  36 @page {
  37   margin:0;
  38 }
  39 @media print {
  40   .main-page {
  41     padding:0;
  42     margin:0;
  43     border:initial;
  44     border-radius:initial;
  45     width:initial;
  46     min-height:initial;
  47     box-shadow:initial;
  48     background:white;
  49     page-break-after:always;
  50   }
  51 }
  52
  53 .rosetta {
  54   margin:0mm;
  55   /* ExplanationNote: even when printing with the option "Shrink to Print Area"
  56    * pixels too close to the border can get cropped.
  57    */
  58   padding:2mm;
  59   display:grid;
  60   column-gap:5mm;
  61   row-gap:1mm;
  62   justify-content:space-evenly;
  63   align-items:flex-start;
  64   align-content:space-around;
  65 }
  66 .rosetta-cell {
  67   /* ExplanationNote: by default, a grid item cannot be smaller than the size of its content.
  68    * Change that.
  69    */
  70   min-height:0;
  71   min-width:0;
  72   overflow:hidden;
  73 }
  74 .rosetta-cell-picture {
  75   display:flex;
  76   flex-direction:column;
  77   flex-wrap:nowrap;
  78   justify-content:flex-start;
  79   width:100%;
  80   height:100%;
  81 }
  82 .rosetta-cell-picture img {
  83   display:block;
  84   border:0;
  85   width:100%;
  86   height:100%;
  87   object-fit:contain;
  88   object-position:right center;
  89   overflow:hidden;
  90 }
  91 .rosetta-cell-picture .rosetta-cell-picture-description {
  92   margin-left:0.2cm;
  93   margin-right:0.2cm;
  94   font-family:monospace;
  95   font-variant:small-caps;
  96   font-size:14pt;
  97 }
  98
  99 .rosetta-cell.writing-words {
 100   height:100%;
 101 }
 102 .writing-words {
 103   margin-top:0;
 104   margin-bottom:0;
 105   margin-left:0;
 106   margin-right:0;
 107   display:flex;
 108   flex-direction:row;
 109   flex-wrap:wrap;
 110   justify-content:flex-start;
 111   align-items:flex-end;
 112   align-content:flex-start;
 113   row-gap:1mm;
 114 }
 115 .writing-words-horiz {
 116   display:flex;
 117   flex-direction:row;
 118   flex-wrap:nowrap;
 119   margin:0 0 0 0;
 120 }
 121 .writing-words-word {
 122   margin:0 0 0 0;
 123   display:grid;
 124   gap:1px;
 125   background-color:#aaa;
 126   /* ExplanationNote: avoid rounded borders to be cropped by background-color: */
 127   overflow: hidden;
 128   border:1px solid #aaa;
 129   /*
 130   border-top-left-radius:3mm;
 131   border-top-right-radius:3mm;
 132   */
 133 }
 134 .writing-words-word:last-child {
 135   margin-right:0;
 136 }
 137 .writing-words-cell {
 138   display:grid;
 139   background-color:white;
 140   font-family:monospace;
 141   font-variant:small-caps;
 142   justify-self:center;
 143   margin-left:0;
 144   margin-right:0;
 145   padding-left:0;
 146   padding-right:0;
 147   align-content:center;
 148   justify-content:center;
 149   position:relative;
 150   white-space:preserve-spaces;
 151   width:100%
 152 }
 153 .writing-words-cell.pronunciation {
 154   font-variant:normal;
 155   font-size:0.4cm;
 156   height:0.5cm;
 157   color:#888;
 158 }
 159 .writing-words-cell.input {
 160   color:#ccc;
 161 }
 162 .writing-words-cell.input.hidden {
 163   color:transparent;
 164 }