HTML frontend part 2: game details

[stouyapi.git] / www / ouya-game.css

diff --git a/www/ouya-game.css b/www/ouya-game.css
new file mode 100644 (file)
index 0000000..eb2738d
--- /dev/null
+++ b/www/ouya-game.css
@@ -0,0 +1,151 @@
+body {
+    background-color: #333;
+    color: #CCC;
+    font-family: sans;
+    margin: 0;
+    padding: 0;
+    padding-top: 10ex;
+    padding-left: 5ex;
+
+    display: grid;
+    grid-template-columns: 45vw 45vw;
+    grid-gap: 1.5vw;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    padding-left: 3ex;
+}
+.ouyalogo {
+    height: 3rem;
+    width: auto;
+    position: fixed;
+    top: 2ex;
+    right: 6vw;
+}
+
+section.media {
+    grid-column: 1;
+    grid-row: 1;
+}
+section.text {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+section.buttons {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+nav {
+    grid-column: 1 / 3;
+    grid-row: 3;
+}
+
+.media img, .media video {
+    max-width: 100%;
+    flex-basis: 100%;
+    flex-shrink: 0;
+}
+
+
+.media h2 {
+    display: none;
+}
+.media .content {
+    overflow-x: auto;
+    display: flex;
+    flex-direction: row;
+    scroll-snap-type: x mandatory;
+}
+.media .content img, .media .content video {
+    scroll-snap-align: start;
+}
+
+
+.text h1 {
+    font-weight: normal;
+    margin-top: 0;
+}
+.text dt {
+    display: none;
+}
+.text dd {
+    display: inline;
+    margin: 0;
+    font-weight: bold;
+}
+.text dd ~ dd:before {
+    content: "|";
+    font-weight: normal;
+}
+
+.description {
+    overflow-y: auto;
+    max-height: 50vh;
+}
+
+
+.buttons a {
+    font-size: 1.5rem;
+    color: #CCC;
+}
+
+nav {
+    text-align: center;
+}
+nav a {
+    color: white;
+    margin-left: 1ex;
+    margin-right: 1ex;
+}
+
+
+/* rating stars */
+.average {
+    visibility: hidden;
+    font-size: 0;
+}
+.average:before {
+    visibility: visible;
+    font-size: 1rem;
+    color: orange;
+}
+.average:after {
+    visibility: visible;
+    font-size: 1rem;
+}
+.average-0:after {
+    content: "★★★★★";
+}
+.average-1:before {
+    content: "★";
+}
+.average-1:after {
+    content: "★★★★";
+}
+.average-2:before {
+    content: "★★";
+}
+.average-2:after {
+    content: "★★★";
+}
+.average-3:before {
+    content: "★★★";
+}
+.average-3:after {
+    content: "★★";
+}
+.average-4:before {
+    content: "★★★★";
+}
+.average-4:after {
+    content: "★";
+}
+.average-5:before {
+    content: "★★★★★";
+}