diff --git a/stroll.html b/stroll.html index 5fa527b..b61e08a 100644 --- a/stroll.html +++ b/stroll.html @@ -10,26 +10,13 @@ -
-

Stats

-
-
-
-
-
-
Welcome to Stroll 0.1.5
-
It's a nice day for a walk
-
- - - - -
- -
Standing
- - -
+
+
+
+

Stats

+
+
+

Stomped

@@ -43,6 +30,27 @@

Bowels

+
+
+
Welcome to Stroll 0.1.5
+
It's a nice day for a walk
+
+
+
+ +

+ +

+ +

+ +

+

+ +
Standing
+ + +
diff --git a/style.css b/style.css index c1d790d..f29da11 100644 --- a/style.css +++ b/style.css @@ -4,21 +4,39 @@ body { font-family: Arial; } +.game-area { + display: flex; + margin: auto; +} + +@media (max-aspect-ratio: 1/1){ + .game-area { + width: 100% + } +} + +@media (min-aspect-ratio: 1/1){ + .game-area { + width: 75% + } +} + +#log-area { + flex: 3; +} + #log { - height:600px; - width:1000px; - border:1px solid #ccc; + height: 600px; + overflow: auto; background-color: #fff; - overflow:auto; - float:left; } .stat-header-self { font-weight: bold; font-size: 150%; min-width:250px; - float:left; } + .stat-header { font-weight: bold; font-size: 150%; @@ -30,11 +48,23 @@ body { font-size: 12pt; } -.flex-container { +.stat-container { display: flex; flex-wrap: wrap; + flex-direction: column; + text-align: right; + flex: 1; } -.action-button { +.button-container { + display: flex; + flex-wrap: wrap; + flex-direction: column; + flex: 1; +} +.action-button { + font-size: 24px; + width: 200px; + height: 75px; }