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     height: auto;
  71 }
  72 h3 {
  73     margin: 0;
  74     font-weight: normal;
  75 }
  76 h3 a {
  77     padding-left: 1ex;
  78     padding-top: 1ex;
  79     padding-bottom: 0ex;
  80     display: block;
  81     width: 100%;
  82 }
  83 .tile p {
  84     margin: 0;
  85     padding-left: 2ex;
  86     font-size: 80%;
  87 }
  88
  89
  90 nav {
  91     text-align: center;
  92     margin-top: 6ex;
  93     margin-bottom: 2ex;
  94 }
  95 nav a {
  96     color: white;
  97     margin-left: 1ex;
  98     margin-right: 1ex;
  99 }
 100
 101
 102 /* rating stars */
 103 .average {
 104     visibility: hidden;
 105     font-size: 0;
 106 }
 107 .average:before {
 108     visibility: visible;
 109     font-size: 1rem;
 110     color: orange;
 111 }
 112 .average:after {
 113     visibility: visible;
 114     font-size: 1rem;
 115 }
 116 .average-0:after {
 117     content: "★★★★★";
 118 }
 119 .average-1:before {
 120     content: "★";
 121 }
 122 .average-1:after {
 123     content: "★★★★";
 124 }
 125 .average-2:before {
 126     content: "★★";
 127 }
 128 .average-2:after {
 129     content: "★★★";
 130 }
 131 .average-3:before {
 132     content: "★★★";
 133 }
 134 .average-3:after {
 135     content: "★★";
 136 }
 137 .average-4:before {
 138     content: "★★★★";
 139 }
 140 .average-4:after {
 141     content: "★";
 142 }
 143 .average-5:before {
 144     content: "★★★★★";
 145 }
 146
 147 .tile.noimg {
 148 }
 149 .tile.noimg h3 {
 150     background-color: black;
 151     background: linear-gradient(to top right, black, 70%, #4b6f67);
 152 }
 153 .tile.noimg h3 a {
 154     padding-left: 0;
 155     padding-top: 5ex;
 156     padding-bottom: 5ex;
 157     text-align: center;
 158     text-transform: uppercase;
 159 }