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