www/ouya-game.css

   1 html {
   2     height: 100%;
   3 }
   4 body {
   5     min-height: 100%;
   6     background-color: #333;
   7     background-image: url("bg_details.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     display: grid;
  18     grid-template-columns: 45vw 45vw;
  19     grid-gap: 1.5vw;
  20 }
  21
  22 header {
  23     position: fixed;
  24     top: 0;
  25     left: 0;
  26     display: block;
  27     width: 100%;
  28     padding-left: 3ex;
  29 }
  30 .ouyalogo {
  31     height: 3rem;
  32     width: auto;
  33     position: fixed;
  34     top: 2ex;
  35     right: 6vw;
  36 }
  37
  38 section.media {
  39     grid-column: 1;
  40     grid-row: 1;
  41 }
  42 section.text {
  43     grid-column: 2;
  44     grid-row: 1;
  45 }
  46
  47 section.buttons {
  48     grid-column: 1 / 3;
  49     grid-row: 2;
  50 }
  51 nav {
  52     grid-column: 1 / 3;
  53     grid-row: 3;
  54 }
  55
  56 .media img, .media video {
  57     max-width: 100%;
  58     flex-basis: 100%;
  59     flex-shrink: 0;
  60 }
  61
  62
  63 .media h2 {
  64     display: none;
  65 }
  66 .media .content {
  67     overflow-x: auto;
  68     display: flex;
  69     flex-direction: row;
  70     scroll-snap-type: x mandatory;
  71 }
  72 .media .content img, .media .content video {
  73     scroll-snap-align: start;
  74 }
  75
  76
  77 .text h1 {
  78     font-weight: normal;
  79     margin-top: 0;
  80 }
  81 .text dt {
  82     display: none;
  83 }
  84 .text dd {
  85     display: inline;
  86     margin: 0;
  87     font-weight: bold;
  88 }
  89 .text dd ~ dd:before {
  90     content: "|";
  91     font-weight: normal;
  92 }
  93 .text a {
  94     color: #CCC;
  95 }
  96
  97 .description {
  98     overflow-y: auto;
  99     max-height: 50vh;
 100 }
 101
 102 .buttons h2 {
 103     display: none;
 104 }
 105 .buttons {
 106     display: flex;
 107     justify-content: space-between;
 108 }
 109 .buttons a {
 110     font-size: 1.5rem;
 111     color: #CCC;
 112 }
 113 button.push-to-my-ouya {
 114     cursor: pointer;
 115     border: none;
 116     padding: 0;
 117     background-color: transparent;
 118 }
 119
 120 nav {
 121     text-align: center;
 122 }
 123 nav a {
 124     color: white;
 125     margin-left: 1ex;
 126     margin-right: 1ex;
 127 }
 128
 129
 130 /* rating stars */
 131 .average {
 132     visibility: hidden;
 133     font-size: 0;
 134 }
 135 .average:before {
 136     visibility: visible;
 137     font-size: 1rem;
 138     color: orange;
 139 }
 140 .average:after {
 141     visibility: visible;
 142     font-size: 1rem;
 143 }
 144 .average-0:after {
 145     content: "★★★★★";
 146 }
 147 .average-1:before {
 148     content: "★";
 149 }
 150 .average-1:after {
 151     content: "★★★★";
 152 }
 153 .average-2:before {
 154     content: "★★";
 155 }
 156 .average-2:after {
 157     content: "★★★";
 158 }
 159 .average-3:before {
 160     content: "★★★";
 161 }
 162 .average-3:after {
 163     content: "★★";
 164 }
 165 .average-4:before {
 166     content: "★★★★";
 167 }
 168 .average-4:after {
 169     content: "★";
 170 }
 171 .average-5:before {
 172     content: "★★★★★";
 173 }
 174
 175
 176 .popup {
 177     position: fixed;
 178     top: 1.5rem;
 179     right: 1.5rem;
 180     width: 20rem;
 181     padding: 1rem;
 182     background-color: black;
 183     border: 1px solid #AAA;
 184     border-radius: 0.5rem;
 185 }
 186 .popup a.close {
 187     color: white;
 188     font-size: 2rem;
 189     text-decoration: none;
 190     position: absolute;
 191     top: 0;
 192     right: 0.5rem;
 193 }
 194 .popup a.close:hover {
 195     color: #fc4422;
 196 }
 197 .popup strong {
 198     display: block;
 199     color: #fc4422;
 200     margin-bottom: 0.5rem;
 201 }