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 .text a {
  89     color: #CCC;
  90 }
  91
  92 .description {
  93     overflow-y: auto;
  94     max-height: 50vh;
  95 }
  96
  97 .buttons h2 {
  98     display: none;
  99 }
 100 .buttons {
 101     display: flex;
 102     justify-content: space-between;
 103 }
 104 .buttons a {
 105     font-size: 1.5rem;
 106     color: #CCC;
 107 }
 108 button.push-to-my-ouya {
 109     cursor: pointer;
 110     border: none;
 111     padding: 0;
 112     background-color: transparent;
 113 }
 114
 115 nav {
 116     text-align: center;
 117 }
 118 nav a {
 119     color: white;
 120     margin-left: 1ex;
 121     margin-right: 1ex;
 122 }
 123
 124
 125 /* rating stars */
 126 .average {
 127     visibility: hidden;
 128     font-size: 0;
 129 }
 130 .average:before {
 131     visibility: visible;
 132     font-size: 1rem;
 133     color: orange;
 134 }
 135 .average:after {
 136     visibility: visible;
 137     font-size: 1rem;
 138 }
 139 .average-0:after {
 140     content: "★★★★★";
 141 }
 142 .average-1:before {
 143     content: "★";
 144 }
 145 .average-1:after {
 146     content: "★★★★";
 147 }
 148 .average-2:before {
 149     content: "★★";
 150 }
 151 .average-2:after {
 152     content: "★★★";
 153 }
 154 .average-3:before {
 155     content: "★★★";
 156 }
 157 .average-3:after {
 158     content: "★★";
 159 }
 160 .average-4:before {
 161     content: "★★★★";
 162 }
 163 .average-4:after {
 164     content: "★";
 165 }
 166 .average-5:before {
 167     content: "★★★★★";
 168 }
 169
 170
 171 .popup {
 172     position: fixed;
 173     top: 1.5rem;
 174     right: 1.5rem;
 175     width: 20rem;
 176     padding: 1rem;
 177     background-color: black;
 178     border: 1px solid #AAA;
 179     border-radius: 0.5rem;
 180 }
 181 .popup a.close {
 182     color: white;
 183     font-size: 2rem;
 184     text-decoration: none;
 185     position: absolute;
 186     top: 0;
 187     right: 0.5rem;
 188 }
 189 .popup a.close:hover {
 190     color: #fc4422;
 191 }
 192 .popup strong {
 193     display: block;
 194     color: #fc4422;
 195     margin-bottom: 0.5rem;
 196 }