Remove old help-menu cruft

4 years ago · aea709f3e2
--- a/macrovision.css
+++ b/macrovision.css
@@ -630,7 +630,6 @@ i.far {
    flex-direction: column;
    flex-wrap: wrap;
    width: 50vw;

 }

 #help-icons > div {
@@ -879,140 +878,6 @@ button:enabled:active {
    }
 }

 #help-menu *::-webkit-scrollbar {
    height: 2px;
  }
 #help-menu *::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
 }
 #help-menu *::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: 0px none #ffffff;
    border-radius: 50px;
 }
 #help-menu *::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
 }
 #help-menu *::-webkit-scrollbar-thumb:active {
    background: #000000;
 }
 #help-menu *::-webkit-scrollbar-track {
    background: #00000000;
    border: 0px none #ffffff;
    border-radius: 50px;
 }
 #help-menu *::-webkit-scrollbar-track:hover {
    background: #666666;
 }
 #help-menu *::-webkit-scrollbar-track:active {
    background: #333333;
 }
 #help-menu *::-webkit-scrollbar-corner {
    background: transparent;
 }

 #help-menu {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 100001;
    overflow-x: hidden;
 }

 #help-menu.visible {
    display: flex;
 }

 #table-of-contents-holder {
    flex: 1 1 30%;
    padding: 15px;
    background: #111;
    overflow-y: auto;
 }

 #table-of-contents {
    line-height: 2;
 }

 #table-of-contents li {
    font-size: 150%;
    user-select: none;
 }

 #table-of-contents li:hover {
    color: #ccc;
 }

 #table-of-contents button {
    position: relative;
    width: 50pt;
    height: 50pt;
    font-size: 40pt;
 }

 #table-of-contents button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

 #help-contents-holder {
    flex: 1 1 70%;
    background: #333;
    padding: 25px;
    overflow-y: auto;
 }

 #help-contents > h2 {
    font-size: 250%;
 }

 #help-contents > h2 {
    margin-bottom: 16pt;
 }

 #help-contents > h2:nth-child(1n+2) {
    margin-top: 32pt;
 }

 #help-contents p {
    text-indent: 20pt;
    max-width: 60em;
    line-height: 1.4em;
    width: 80%;
    margin-bottom: 8pt;
    margin-top: 8pt;
 }

 #help-contents i.fas {
    text-indent: 0pt;
    margin-left: 2pt;
    margin-right: 2pt;
 }

 #help-contents ul {
    list-style: circle;
    line-height: 1.4;
 }

 #help-contents b {
    font-weight: bolder;
 }

 #help-contents li {
    margin-left: 2em;
 }

 #help-contents img {
    display: block;
    width: 80%;
    max-width: 60em;
    height: 60pt;
 }

 .nsfw {
    color: red;
    font-style: bold;
--- a/macrovision.html
+++ b/macrovision.html
@@ -43,88 +43,6 @@
    }
  </script>
  <input hidden id="file-upload-picker" type='file' multiple>
  <div id="help-menu">
    <div id="table-of-contents-holder">
      <ul id="table-of-contents">
        <li><button id="close-help"><i class="fas fa-times"></i></button></li>
      </ul>
    </div>
    <div id="help-contents-holder">
      <div id="help-contents">
        <h2>Overview</h2>

        <p>Macrovision is a tool for visualizing sizes. You can create, scale, and pose a variety of silhouettes,
          ranging from galactic structures to individual atoms.</p>

        <p>This tool was created by me, <b>chemicalcrux</b>!</p>

        <p>You can join the Discord server to report bugs and see what's new. If you've found the site helpful, consider
          supporting me on Ko-Fi, too!</p>

        <a href="https://discord.gg/vqcKVV6"><img src="./logos/discord.svg" alt="Link to Discord"></a>
        <a href="https://ko-fi.com/chemicalcrux"><img src="./logos/ko-fi.svg" alt="Link to Ko-Fi"></a>

        <h2>Adjusting the View</h2>

        <p>Zoom in and out with the scroll wheel. You can also manually change the size of the world in the sidebar, or
          use the <i class="fas fa-search-minus"></i> and <i class="fas fa-search-plus"></i> buttons on the sides of the
          viewer.</p>

        <p>Shift+scroll without anything selected to move horizontally. You can also use the <i
            class="fas fa-arrow-left"></i> and <i class="fas fa-arrow-right"></i> buttons to scroll.</p>

        <p>Alt+scroll to make the world larger or smaller without changing where things are positioned on the screen.
        </p>

        <h2>Creating Entities</h2>

        <p>Each thing in the world is an <b>entity</b>. Macrovision comes with many of these, grouped into categories.
          For example, in the Naturals category, you'll find large bodies such as stars, country borders, and planets.
        </p>

        <p>Each entity has one or more views. For example, many characters have a front view and a back view. Some
          entities are collections of things, like countries &mdash; these have one view for each thing they represent!
        </p>

        <p>If you want to compare something that doesn't exist yet, you can create a custom entity. There are three ways
          you can do this:</p>

        <ul>
          <li>Drop an image into the window</li>
          <li>Select a file from the <i class="fas fa-bars"></i> menu</li>
          <li>Paste an image from your clipboard</li>
        </ul>

        <p>Custom entities aren't saved or exported.</p>

        <h2>Changing Entities</h2>

        <p>Shift+scroll with an entity selected to grow or shrink it. You can also use the <i
            class="fas fa-compress-arrows-alt"></i> and <i class="fas fa-expand-arrows-alt"></i> buttons to adjust size.
        </p>

        <p>When you have an entity selected, you'll see additional sections in the sidebar: one for the entity itself,
          and one for its current view.</p>

        <p>The entity options control things like scale (how big the entity is compared to normal) and display name. You
          can also pick from one or more default sizes.</p>
        <h2>Sharing</h2>

        <p>You can take a screenshot of the current scene with the <b>Screenshot</b> <i class="fas fa-camera"></i>
          button. The screenshot will be copied to your clipboard. You can also use the <b>Download</b> <i
            class="fas fa-download"></i> button to download the current scene as an image. This currently only includes
          the scale and the silhouettes themselves; it won't include things like names.</p>

        <p>If you want to show a scene to someone else, you can use <b>Permalink</b> <i class="fas fa-link"></i> to get
          a permalink. It'll be pretty large, since it represents where everything is. I'll probably add a link
          shortener at some point!</p>

        <p>You can also export the current scene as text with <b>Export</b> <i class="fas fa-share"></i>, copying it to
          your clipboard. You can import a scene from the clipboard with <b>Import</b> <i
            class="fas fa-share flipped"></i>.</p>
      </div>
    </div>
  </div>
  <div class="popout-menu" id="sidebar-menu">

  </div>