Improve the look of the start screen

5 年前 · 297046cbae
--- a/satiate.css
+++ b/satiate.css
@@ -57,6 +57,7 @@ a:hover {
 }

 #start-button {
  display: none;
  user-select: none;
  width: 200px;
  height: 100px;
@@ -470,8 +471,9 @@ a:hover {
 }

 #story-info {
  display: flex;
  flex-direction: column;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(1, minmax(240px, 1fr));
 }

 .tooltip {
@@ -493,4 +495,5 @@ a:hover {

 .tooltip:hover::before {
  display: inline-block;
 }
 }

--- a/satiate.html
+++ b/satiate.html
@@ -20,29 +20,22 @@

  <body>
    <div class="scene" id="pick">
      <div id="pick-blurb">
        <h1>Welcome to Satiate</h1>
        <a href="https://discord.gg/dSwNN8T">Discord Server</a>
        <br>
        <a href="https://crux.sexy/changelog#satiate">Changelog</a>
        <p class="version">Version: </p>
        <p><b>This game contains 18+ content</b></p>
        <p><b>Most of the games have sound!</b></p>
      </div>
      <h1>Satiate</h1>
        <p id="pick-blurb">Satiate is a text-adventure engine. You can browse the available stories below.</p>
      <div>
        <select id="game-select">
          <option hidden value="didnt-pick-a-story-lol">Pick a story</option>
        </select>
      </div>
      <button id="start-button">Start</button>
      <div id="story-info">
        <h2>Title</h2>
        <div id="title"></div>
        <h2>Description</h2>
        <div id="description"></div>
        <h2>Tags</h2>
        <div id="tags"></div>
        <div>
          <h3 id="description"></h3>
        </div>
        <div>
          <div id="tags"></div>
        </div>
      </div>
      <button id="start-button">Start</button>
    </div>
    <div class="hidden-scene" id="game">
      <div id="info-area">
--- a/satiate.js
+++ b/satiate.js
@@ -183,6 +183,9 @@ function initStart() {
      div.classList.add("tooltip");
      holder.appendChild(div);
    })

    document.querySelector("#description").innerText = story.info.desc;
    document.querySelector("#start-button").style.display = "inline";
  });

  const start = document.querySelector("#start-button");