tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

dimensions-013-print-ref.html (2032B)

      1 <!DOCTYPE html>
      2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
      3 <meta name="flags" content="ahem">
      4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
      5 <style>
      6  :root {
      7    print-color-adjust: exact;
      8    font: 16px/1 Ahem;
      9  }
     10  @page {
     11    margin: 0;
     12    width: 32em;
     13    height: 28em;
     14  }
     15  body {
     16    display: grid;
     17    grid-template-columns: 6em auto 6em;
     18    grid-template-rows: 6em auto 6em;
     19    height: 100vh;
     20    margin: 0;
     21  }
     22  .vertical-edge {
     23    display: flex;
     24  }
     25  .horizontal-edge {
     26    display: flex;
     27    flex-flow: column;
     28  }
     29 </style>
     30 <div class="corner">xx</div>
     31 <div class="vertical-edge">
     32  <div style="width:17.5em; margin-top:4em; background:hotpink;">xxxxxxx</div>
     33  <div style="width:2.5em; margin-bottom:3em; background:yellow;">x</div>
     34 </div>
     35 <div class="corner" style="height:6em;">
     36  xx<br>
     37  x<br>
     38  x<br>
     39  x<br>
     40  x<br>
     41  x<br>
     42  x<br>
     43  x<br>
     44  x<br>
     45 </div>
     46 <div class="horizontal-edge">
     47  <div style="width:2em; height:12em; margin-left:4em; background:yellow;">
     48    xxxxxxx<br>
     49    x<br>
     50    x<br>
     51    x<br>
     52    x<br>
     53    x<br>
     54    x<br>
     55    x<br>
     56    x<br>
     57    x<br>
     58    x<br>
     59    x<br>
     60    x<br>
     61    x<br>
     62    x<br>
     63    x<br>
     64    x<br>
     65    x<br>
     66  </div>
     67  <div style="width:3em; height:4em; text-align:center; background:hotpink;">
     68    x<br>
     69    x<br>
     70    x<br>
     71    x<br>
     72    x<br>
     73    x<br>
     74  </div>
     75 </div>
     76 <div style="position:relative; z-index:-1; background:blue;"></div>
     77 <div class="horizontal-edge">
     78  <div style="width:2em; height:4em; margin-left:2em; background:hotpink;">
     79    xx<br>
     80    &nbsp;x<br>
     81    &nbsp;x<br>
     82  </div>
     83  <div style="margin:4em 0; margin-left:1.5em; width:3em; height:4em; background:yellow;">x</div>
     84 </div>
     85 <div class="corner" style="margin-top:2.5em;">
     86  xxxxxxxxx<br>
     87  x
     88 </div>
     89 <div class="vertical-edge">
     90  <div style="width:5em; margin-top:4em; background:yellow;">x<br>x</div>
     91  <div style="width:15em; margin-top:1em; background:hotpink;">xxx<br>x<br>x<br>x<br>x</div>
     92 </div>
     93 <div class="corner">x<br>x</div>