www/ouya-game.css

   1 body {
   2     background-color: #333;
   3     background-image: url("bg_details.jpg");
   4     background-size: cover;
   5     color: #CCC;
   6     font-family: sans;
   7     margin: 0;
   8     padding: 0;
   9     padding-top: 10ex;
  10     padding-left: 5ex;
  11
  12     display: grid;
  13     grid-template-columns: 45vw 45vw;
  14     grid-gap: 1.5vw;
  15 }
  16
  17 header {
  18     position: fixed;
  19     top: 0;
  20     left: 0;
  21     display: block;
  22     width: 100%;
  23     padding-left: 3ex;
  24 }
  25 .ouyalogo {
  26     height: 3rem;
  27     width: auto;
  28     position: fixed;
  29     top: 2ex;
  30     right: 6vw;
  31 }
  32
  33 section.media {
  34     grid-column: 1;
  35     grid-row: 1;
  36 }
  37 section.text {
  38     grid-column: 2;
  39     grid-row: 1;
  40 }
  41
  42 section.buttons {
  43     grid-column: 1 / 3;
  44     grid-row: 2;
  45 }
  46 nav {
  47     grid-column: 1 / 3;
  48     grid-row: 3;
  49 }
  50
  51 .media img, .media video {
  52     max-width: 100%;
  53     flex-basis: 100%;
  54     flex-shrink: 0;
  55 }
  56
  57
  58 .media h2 {
  59     display: none;
  60 }
  61 .media .content {
  62     overflow-x: auto;
  63     display: flex;
  64     flex-direction: row;
  65     scroll-snap-type: x mandatory;
  66 }
  67 .media .content img, .media .content video {
  68     scroll-snap-align: start;
  69 }
  70
  71
  72 .text h1 {
  73     font-weight: normal;
  74     margin-top: 0;
  75 }
  76 .text dt {
  77     display: none;
  78 }
  79 .text dd {
  80     display: inline;
  81     margin: 0;
  82     font-weight: bold;
  83 }
  84 .text dd ~ dd:before {
  85     content: "|";
  86     font-weight: normal;
  87 }
  88
  89 .description {
  90     overflow-y: auto;
  91     max-height: 50vh;
  92 }
  93
  94 .buttons h2 {
  95     display: none;
  96 }
  97 .buttons a {
  98     font-size: 1.5rem;
  99     color: #CCC;
 100 }
 101
 102 nav {
 103     text-align: center;
 104 }
 105 nav a {
 106     color: white;
 107     margin-left: 1ex;
 108     margin-right: 1ex;
 109 }
 110
 111
 112 /* rating stars */
 113 .average {
 114     visibility: hidden;
 115     font-size: 0;
 116 }
 117 .average:before {
 118     visibility: visible;
 119     font-size: 1rem;
 120     color: orange;
 121 }
 122 .average:after {
 123     visibility: visible;
 124     font-size: 1rem;
 125 }
 126 .average-0:after {
 127     content: "★★★★★";
 128 }
 129 .average-1:before {
 130     content: "★";
 131 }
 132 .average-1:after {
 133     content: "★★★★";
 134 }
 135 .average-2:before {
 136     content: "★★";
 137 }
 138 .average-2:after {
 139     content: "★★★";
 140 }
 141 .average-3:before {
 142     content: "★★★";
 143 }
 144 .average-3:after {
 145     content: "★★";
 146 }
 147 .average-4:before {
 148     content: "★★★★";
 149 }
 150 .average-4:after {
 151     content: "★";
 152 }
 153 .average-5:before {
 154     content: "★★★★★";
 155 }