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 .rosetta {
  15   margin-top:1ex;
  16   margin-bottom:1ex;
  17   margin-left:1ex;
  18   margin-right:1ex;
  19   display:flex;
  20   flex-direction: column;
  21   flex-wrap: wrap;
  22   justify-content:space-evenly;
  23   align-items:flex-start;
  24   align-content:space-around;
  25 }
  26 .rosetta-row {
  27   display: grid;
  28   break-inside:avoid;
  29   grid-template-columns: 6cm 11cm;
  30   box-shadow:0 0 0 1px #AAA;
  31 }
  32 .rosetta-word:last-child {
  33   margin-bottom:0;
  34   margin-right:0;
  35 }
  36 .rosetta-cell {
  37 }
  38 .rosetta-cell-picture {
  39   width: fit-content;
  40   place-content:center;
  41   //block-size:fit-content;
  42   //box-sizing: fit-content;
  43   //width:auto;
  44   //max-height:100%;
  45   //background-color:white;
  46 }
  47 .rosetta-cell-picture img {
  48   display:block;
  49   border:0;
  50   place-content:center;
  51   vertical-align:center;
  52   width: 100%;
  53   object-fit: contain;
  54   object-position: center center;
  55 }
  56 .rosetta-cell.rosetta-cell-words {
  57
  58 }
  59
  60 .writing-words {
  61   margin-top:1ex;
  62   margin-bottom:1ex;
  63   margin-left:1ex;
  64   margin-right:1ex;
  65   display:flex;
  66   flex-direction: row;
  67   flex-wrap: wrap;
  68   justify-content:space-evenly;
  69   align-items:flex-start;
  70   align-content:space-around;
  71 }
  72 .writing-words-word {
  73   margin-left: 10px;
  74   margin-right: 10px;
  75   margin-bottom: 1ex;
  76   margin-top: 1ex;
  77 }
  78 .writing-words-row {
  79   white-space:preserve-spaces;
  80   //width:100%;
  81   font-family: monospace;
  82   font-variant: small-caps;
  83   display: grid;
  84   gap: 0px;
  85   //justify-items: center;
  86   justify-self: center;
  87   //background-color:grey;
  88   place-content: center;
  89 }
  90 .writing-words-cell {
  91   display: grid;
  92   place-content: center;
  93   position: relative;
  94   box-shadow:0 0 0 1px #AAA;
  95   background-color:white;
  96   min-height:1cm;
  97   font-size: 20pt;
  98   padding-left:0;
  99   padding-right:0;
 100   margin-left:0;
 101   margin-right:0;
 102 }
 103 .writing-words-cell-space {
 104   box-shadow:0 0 0 0 red !important;
 105   border-left:1px solid #AAA;
 106 }
 107
 108 .writing-words-row.writing-words-row-input {
 109   color:#ddd;
 110 }
 111 .writing-words-row.writing-words-LangueMandarin .writing-words-cell {
 112   font-size:30pt;
 113 }
 114 .writing-words-row.writing-words-LangueMandarinPinyin .writing-words-cell {
 115   color:black;
 116   font-size:12pt;
 117   font-variant:normal;
 118 }
 119
 120 @media all {
 121   @page {
 122     size: 210mm 297mm;
 123     margin-top: 1cm;
 124     margin-bottom: 1cm;
 125     margin-left: 2cm;
 126     margin-right: 2cm;
 127   }
 128 }