www/ouya-discover.css

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