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 .ouyalogo {
  22     height: 3rem;
  23     width: auto;
  24     position: fixed;
  25     top: 2ex;
  26     right: 6vw;
  27 }
  28
  29 h2 {
  30     text-shadow: 2px 2px #555;
  31     text-transform: uppercase;
  32     margin-bottom: 0;
  33     padding-left: 1ex;
  34 }
  35 a {
  36     color: #CCC;
  37 }
  38
  39
  40 .tiles {
  41     display: flex;
  42     overflow-x: auto;
  43     column-gap: 1em;
  44     margin-bottom: 2ex;
  45 }
  46
  47 .tile {
  48     border: 0.5ex solid transparent;
  49     width: 20vw;
  50
  51     display: flex;
  52     flex-direction: column;
  53 }
  54 .tile:hover {
  55     border: 0.5ex solid orange;
  56 }
  57
  58 .tile > a {
  59     order: -1;
  60 }
  61 .tile img {
  62     width: 20vw;
  63 }
  64 h3 {
  65     margin: 0;
  66     font-weight: normal;
  67 }
  68 h3 a {
  69     padding-left: 1ex;
  70     padding-top: 1ex;
  71     padding-bottom: 0ex;
  72     display: block;
  73     width: 100%;
  74 }
  75 .tile p {
  76     margin: 0;
  77     padding-left: 2ex;
  78     font-size: 80%;
  79 }
  80
  81
  82 nav {
  83     text-align: center;
  84     margin-top: 6ex;
  85     margin-bottom: 2ex;
  86 }
  87 nav a {
  88     color: white;
  89     margin-left: 1ex;
  90     margin-right: 1ex;
  91 }
  92
  93
  94 /* rating stars */
  95 .average {
  96     visibility: hidden;
  97     font-size: 0;
  98 }
  99 .average:before {
 100     visibility: visible;
 101     font-size: 1rem;
 102     color: orange;
 103 }
 104 .average:after {
 105     visibility: visible;
 106     font-size: 1rem;
 107 }
 108 .average-0:after {
 109     content: "★★★★★";
 110 }
 111 .average-1:before {
 112     content: "★";
 113 }
 114 .average-1:after {
 115     content: "★★★★";
 116 }
 117 .average-2:before {
 118     content: "★★";
 119 }
 120 .average-2:after {
 121     content: "★★★";
 122 }
 123 .average-3:before {
 124     content: "★★★";
 125 }
 126 .average-3:after {
 127     content: "★★";
 128 }
 129 .average-4:before {
 130     content: "★★★★";
 131 }
 132 .average-4:after {
 133     content: "★";
 134 }
 135 .average-5:before {
 136     content: "★★★★★";
 137 }
 138
 139 .tile.noimg {
 140 }
 141 .tile.noimg h3 {
 142     background-color: black;
 143     background: linear-gradient(to top right, black, 70%, #4b6f67);
 144 }
 145 .tile.noimg h3 a {
 146     padding-left: 0;
 147     padding-top: 5ex;
 148     padding-bottom: 5ex;
 149     text-align: center;
 150     text-transform: uppercase;
 151 }