Working on a better layout

7 年之前 · ddded2b8b8
--- a/stroll.html
+++ b/stroll.html
@@ -10,26 +10,13 @@
    <script src="game.js"></script>
  </head>
  <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>
          <p>Stomped</p>
        </div>
@@ -43,6 +30,27 @@
          <p>Bowels</p>
        </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>
  </body>
 </html>
--- 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;
 }