chemicalcrux
/
stroll
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 11 Wiki Aktywność
Przeglądaj źródła

Working on a better layout

tags/v0.7.0
Fen Dweller 8 lat temu
rodzic
3169f4b6a1
commit
ddded2b8b8
2 zmienionych plików z 66 dodań i 28 usunięć
Zunifikowany widok
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +28
    -20
      stroll.html
  2. +38
    -8
      style.css

+ 28
- 20
stroll.html Wyświetl plik

@@ -10,26 +10,13 @@
<script src="game.js"></script> <script src="game.js"></script>
</head> </head>
<body> <body>
<div class=stat-header-self id=stats-self>
<p>Stats</p>
<div class=stat-line id=height></div>
<div class=stat-line id=mass></div>
</div>
<div id=game-area>
<div id=log>
<div>Welcome to Stroll 0.1.5</div>
<div>It's a nice day for a walk</div>
</div>
<button id=button-grow>Get Bigger</button>
<button id=button-feed>Eat</button>
<button id=button-stomp>Stomp</button>
<button id=button-anal_vore>Sit</button>
<div></div>
<button id=button-stroll>Stroll</button>
<div id=strolling-indicator>Standing</div>
<button id=button-units>Metric</button>
<button id=button-verbose>Verbose</button>
<div class=flex-container>
<div class=game-area>
<div class=stat-container>
<div class=stat-header-self id=stats-self>
<p>Stats</p>
<div class=stat-line id=height></div>
<div class=stat-line id=mass></div>
</div>
<div class=stat-header id=stats-stomped> <div class=stat-header id=stats-stomped>
<p>Stomped</p> <p>Stomped</p>
</div> </div>
@@ -43,6 +30,27 @@
<p>Bowels</p> <p>Bowels</p>
</div> </div>
</div> </div>
<div id=log-area>
<div id=log>
<div>Welcome to Stroll 0.1.5</div>
<div>It's a nice day for a walk</div>
</div>
</div>
<div class=button-container>
<button class=action-button id=button-grow>Get Bigger</button>
<p/>
<button class=action-button id=button-feed>Eat</button>
<p/>
<button class=action-button id=button-stomp>Stomp</button>
<p/>
<button class=action-button id=button-anal_vore>Sit</button>
<p/>
<div></div>
<button class=action-button id=button-stroll>Stroll</button>
<div id=strolling-indicator>Standing</div>
<button class=action-button class=action-button id=button-units>Metric</button>
<button class=action-button id=button-verbose>Verbose</button>
</div>
</div> </div>
</body> </body>
</html> </html>

+ 38
- 8
style.css Wyświetl plik

@@ -4,21 +4,39 @@ body {
font-family: Arial; 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 { #log {
height:600px;
width:1000px;
border:1px solid #ccc;
height: 600px;
overflow: auto;
background-color: #fff; background-color: #fff;
overflow:auto;
float:left;
} }


.stat-header-self { .stat-header-self {
font-weight: bold; font-weight: bold;
font-size: 150%; font-size: 150%;
min-width:250px; min-width:250px;
float:left;
} }

.stat-header { .stat-header {
font-weight: bold; font-weight: bold;
font-size: 150%; font-size: 150%;
@@ -30,11 +48,23 @@ body {
font-size: 12pt; font-size: 12pt;
} }


.flex-container {
.stat-container {
display: flex; display: flex;
flex-wrap: wrap; 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;
} }

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz