diff --git a/macrovision.css b/macrovision.css index e7eaf559..1de68a4b 100644 --- a/macrovision.css +++ b/macrovision.css @@ -568,6 +568,10 @@ body.toggle-bottom-cover .bottom-cover { transform: rotate(90deg); } +.flipped { + transform: rotate(180deg); +} + i.fas i.far { pointer-events: none; @@ -858,7 +862,7 @@ button:enabled:active { #help-contents p { text-indent: 20pt; - max-width: 80em; + max-width: 60em; line-height: 1.4em; width: 80%; margin-bottom: 8pt; @@ -886,6 +890,7 @@ button:enabled:active { #help-contents img { display: block; - margin: auto; + width: 80%; + max-width: 60em; height: 60pt; } \ No newline at end of file diff --git a/macrovision.html b/macrovision.html index ada2a0ff..101582a7 100644 --- a/macrovision.html +++ b/macrovision.html @@ -5,7 +5,8 @@ Macrovision - + + @@ -21,7 +22,7 @@ - + @@ -42,17 +43,41 @@

Overview

-

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

+

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

+ +

This tool was created by me, chemicalcrux!

+ +

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!

+ + Link to Discord + Link to Ko-Fi

Adjusting the View

-

Zoom in and out with the scroll wheel. You can also manually change the size of the world in the sidebar, or use the and buttons on the sides of the viewer.

+

Zoom in and out with the scroll wheel. You can also manually change the size of the world in the sidebar, or + use the and buttons on the sides of the + viewer.

+ +

Shift+scroll without anything selected to move horizontally. You can also use the and buttons to scroll.

+ +

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

Creating Entities

-

Each thing in the world is an entity. 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.

+

Each thing in the world is an entity. 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. +

+ +

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 — these have one view for each thing they represent! +

-

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:

+

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:

- +
- Submit your
character!
+ Submit your
character!

World Info

@@ -181,7 +207,7 @@

Entity Options

@@ -211,7 +237,7 @@
-

Source

+

Source

Authors @@ -239,7 +265,7 @@
@@ -274,7 +300,7 @@
- + - + \ No newline at end of file diff --git a/macrovision.js b/macrovision.js index d24ee4f4..186b807c 100644 --- a/macrovision.js +++ b/macrovision.js @@ -1232,7 +1232,8 @@ function prepareMenu() { { name: "Import from clipboard", id: "menu-import", - icon: "fas fa-share" + icon: "fas fa-share", + classes: ["flipped"] }, { name: "Save", @@ -1267,6 +1268,10 @@ function prepareMenu() { icon.classList.add("rotate-backward", "transitions"); } + if (entry.classes) { + entry.classes.forEach(cls => icon.classList.add(cls)); + } + const actionText = document.createElement("span"); actionText.innerText = entry.name; actionText.classList.add("menu-text");