Supports a variety of screen sizes now

cherche · Apr 21, 2016 · efb3c95 · efb3c95
1 parent 9d6db56
commit efb3c95
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -8,13 +8,16 @@ html {
 	-ms-user-select: none;
 	user-select: none;
 	cursor: default;
+	height: 100%;
 }
 body {
     background-color: black;
     color: white;
     font-family: Roboto, Arial, sans-serif;
     font-size: 3.5rem;
 	margin: 0;
+	text-align: center;
+	height: 100%;
 	/*
 	display: none;
 	*/
@@ -42,7 +45,6 @@ td {
     border: 1px solid white;
     background-color: black;
     border-radius: 0.5rem;
-    text-align: center;
 }
 .score {
 	top: 1.5rem;
@@ -58,7 +60,6 @@ td {
 .share, .score {
     display: flex;
     text-align: center;
-    width: 100%;
     position: fixed;
     justify-content: space-around;
 	width: 45rem;
@@ -87,3 +88,27 @@ td {
 .share .fa-github:hover {
     color: #6e5494;
 }
+@media screen and (max-height: 36rem) {
+	.share, .score, table, .fa-repeat {
+		position: static;
+		margin: auto;
+	}
+	.share, .score {
+		padding: 1.5rem 0;
+	}
+	table {
+		-o-transform: translate(0, 0);
+		-ms-transform: translate(0, 0);
+		-moz-transform: translate(0, 0);
+		-webkit-transform: translate(0, 0);
+		transform: translate(0, 0);
+	}
+}
+@media screen and (max-width: 45rem) {
+	.share, .score {
+		max-width: 100%;
+		flex-wrap: wrap;
+		margin: 0;
+		left: 0;
+	}
+}