fix wasm styling

bloodmagesoftware · Jul 2, 2024 · 25cbc51 · 25cbc51
1 parent f69357e
commit 25cbc51
Showing 1 changed file with 60 additions and 9 deletions.
diff --git a/.github/workflows/wasm.yaml b/.github/workflows/wasm.yaml
@@ -45,14 +45,48 @@ jobs:
           <!DOCTYPE html>
           <html lang="en">
           <body>
-          <a
-            href="https://github.com/bloodmagesoftware/${{env.binary}}/blob/main/LICENSE"
-          >
-            <img
-              src="https://raw.githubusercontent.com/bloodmagesoftware/.github/main/agpl.svg"
-              alt="AGPL-3.0 license"
+          <p class="banner">
+            <a
+              href="https://bloodmagesoftware.github.io/"
+              target="_blank"
             >
-          </a>
+              <img
+                src="https://bloodmagesoftware.github.io/favicon.svg"
+                height="64"
+                alt="Blood Mage Software"
+              >
+            </a>
+            <a
+              href="https://github.com/bloodmagesoftware/${{env.binary}}/blob/main/LICENSE"
+              target="_blank"
+            >
+              <img
+                src="https://raw.githubusercontent.com/bloodmagesoftware/.github/main/agpl.svg"
+                height="64"
+                alt="AGPL-3.0 license"
+              >
+            </a>
+            <a
+              href="https://bevyengine.org/"
+              target="_blank"
+            >
+              <img
+                src="https://raw.githubusercontent.com/bevyengine/bevy/latest/assets/branding/bevy_logo_dark.svg"
+                height="64"
+                alt="Bevy Engine"
+              >
+            </a>
+            <span
+              onclick="document.querySelector('canvas').requestFullscreen()"
+              style="cursor: pointer; background-color: white; padding: 8px; border-radius: 8px"
+            >
+              <img
+                src="https://icons.getbootstrap.com/assets/icons/arrows-fullscreen.svg"
+                height="48"
+                alt="Fullscreen"
+              >
+            </span>
+          </p>
           <script type="module">
               import "./restart-audio-context.js";
               import init from "./${{env.binary}}.js";
@@ -75,8 +109,25 @@ jobs:
                   margin: auto;
                   display: block;
                   position: relative;
-                  max-width: 100vw;
-                  max-height: 100vh;
+                  width: 100dvw !important;
+                  height: calc(100dvh - 64px) !important;
+                  min-width: unset !important;
+                  min-height: unset !important;
+                  outline: none;
+              }
+
+              .banner {
+                  display: flex;
+                  justify-content: space-around;
+                  flex-wrap: wrap;
+                  flex-direction: row;
+                  height: 64px;
+                  width: 100dvw;
+              }
+
+              * {
+                  user-select: none;
+                  box-sizing: border-box;
               }
           </style>
           </body>