www/ouya-discover.css

   1 body {
   2     background-color: #333;
   3     color: #CCC;
   4     font-family: sans;
   5     margin: 0;
   6     padding: 0;
   7     padding-top: 10ex;
   8     padding-left: 5ex;
   9 }
  10
  11 header {
  12     position: fixed;
  13     top: 0;
  14     left: 0;
  15     background-color: black;
  16     opacity: 0.5;
  17     display: block;
  18     width: 100%;
  19     padding-left: 3ex;
  20 }
  21
  22 h2 {
  23     text-shadow: 2px 2px #555;
  24     text-transform: uppercase;
  25     margin-bottom: 0;
  26     padding-left: 1ex;
  27 }
  28 a {
  29     color: #CCC;
  30 }
  31
  32
  33 .tiles {
  34     display: flex;
  35     overflow-x: auto;
  36     column-gap: 1em;
  37     margin-bottom: 2ex;
  38 }
  39
  40 .tile {
  41     border: 0.5ex solid transparent;
  42     width: 20vw;
  43
  44     display: flex;
  45     flex-direction: column;
  46 }
  47 .tile:hover {
  48     border: 0.5ex solid orange;
  49 }
  50
  51 .tile > a {
  52     order: -1;
  53 }
  54 .tile img {
  55     width: 20vw;
  56 }
  57 h3 {
  58     margin: 0;
  59     font-weight: normal;
  60 }
  61 h3 a {
  62     padding-left: 1ex;
  63     padding-top: 1ex;
  64     padding-bottom: 0ex;
  65     display: block;
  66     width: 100%;
  67 }
  68 .tile p {
  69     margin: 0;
  70     padding-left: 2ex;
  71     font-size: 80%;
  72 }
  73 .average {
  74     visibility: hidden;
  75     font-size: 0;
  76 }
  77 .average:before {
  78     visibility: visible;
  79     font-size: 1rem;
  80     color: orange;
  81 }
  82 .average:after {
  83     visibility: visible;
  84     font-size: 1rem;
  85 }
  86 .average-0:after {
  87     content: "★★★★★";
  88 }
  89 .average-1:before {
  90     content: "★";
  91 }
  92 .average-1:after {
  93     content: "★★★★";
  94 }
  95 .average-2:before {
  96     content: "★★";
  97 }
  98 .average-2:after {
  99     content: "★★★";
 100 }
 101 .average-3:before {
 102     content: "★★★";
 103 }
 104 .average-3:after {
 105     content: "★★";
 106 }
 107 .average-4:before {
 108     content: "★★★★";
 109 }
 110 .average-4:after {
 111     content: "★";
 112 }
 113 .average-5:before {
 114     content: "★★★★★";
 115 }
 116
 117 .tile.noimg {
 118 }
 119 .tile.noimg h3 {
 120     background-color: black;
 121     background: linear-gradient(to top right, black, 70%, #4b6f67);
 122 }
 123 .tile.noimg h3 a {
 124     padding-left: 0;
 125     padding-top: 5ex;
 126     padding-bottom: 5ex;
 127     text-align: center;
 128     text-transform: uppercase;
 129 }