www/ouya-discover.css

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