made fully mobile compatible

global/globalScript.js

@@ -143,7 +143,7 @@ function setVh() {
 
 
 document.addEventListener("DOMContentLoaded", async function() {
-  
+  setVh()
   debugPrint("currentPage", `${CURRENT_PAGE} ${Object.keys(PAGES)[CURRENT_PAGE + 1]}`)
 
   startLoadingScreen()
@@ -186,7 +186,7 @@ document.addEventListener("DOMContentLoaded", async function() {
 
 
 window.addEventListener("resize", function() {
-  document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px");
+  setVh()
   calcPixelDensity()
 
   switch (CURRENT_PAGE) {

global/loadingScreen.css

@@ -31,7 +31,7 @@
 }
 #loadingText {
   position: fixed;
-  bottom: 0%;
+  bottom: 0;
   left: calc(50vw - min(45vw, 250px));
   width: min(90vw, 500px);
   text-align: center;

toys/license/600x400_license.css

@@ -1,5 +1,4 @@
 #licenseContainer_600x400 {
-  font-family: "Comic Sans MS", "Comic Sans", cursive;
   position: absolute;
   top: 0vh; 
   left: 300vw;
@@ -40,9 +39,6 @@
   margin: 5% 0% 0% 0%;
 }
 #signatureValue_600x400 {
-  font-family: "Yellowtail", serif;
-  font-weight: 400;
-  font-style: normal;
   margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
   text-align: center;
   font-size: 1.5rem;
@@ -82,7 +78,8 @@
 }
 #titleValue_600x400 {
   grid-area: 1 / 1 / 2 / 3;
-  font-size: min(max(3vmax, 4vmin), 1.6rem);
+  font-size: 2rem;
   margin: 0% auto 0% auto;
   height: max-content;
+  text-align: center;
 }

toys/license/index.html

@@ -13,9 +13,13 @@
   <link rel="stylesheet" href="options.css">
   <link rel="stylesheet" href="600x400_license.css">
 
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <!-- fonts -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <style>
-  <link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
+    @import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
+    @import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400&display=swap");
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+  </style>
+
 
   <link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
   <title>Byte Dice - Boykisser license</title>
@@ -110,7 +114,7 @@
         </button>
       </div>
 
-      <div id="licenseContainer" class="blackBorderRect">
+      <div id="licenseContainer" class="blackBorderRect sans">
         <h3 id="titleValue">Boykisser license</h3>
         <div style="width: max-content;">
           <div id="picContainer" class="blackBorderRect">
@@ -118,14 +122,14 @@
           </div>
 
           <div id="signatureContainer">
-            <p id="signatureValue">Byte Dice</p>
+            <p id="signatureValue" class="yellowTail">Byte Dice</p>
             <p id="signHere">Sign here</p>
           </div>
         </div>
       
         <div>
           <div id="detailsContainer">
-            <h2>For      </h2><h2 id="authorValue" >Byte Dice</h2>
+            <h2 class="sans-bold">For      </h2><h2 id="authorValue" >Byte Dice</h2>
             <h2>Issued   </h2><h2 id="createdValue">2025-01-18</h2>
             <h2>Expires  </h2><h2 id="expireValue" >never</h2>
             <h2>Identity </h2><h2 id="genderValue" >unknown</h2>
@@ -149,14 +153,14 @@
       </div>
     </div>
 
-    <div id="licenseContainer_600x400" class="blackBorderRect">
+    <div id="licenseContainer_600x400" class="blackBorderRect sans">
       <h3 id="titleValue_600x400">Boykisser license</h3>
       <div style="width: max-content;">
         <div id="picContainer_600x400" class="blackBorderRect">
           <img id="picValue_600x400" src="" draggable="false">
         </div>
 
-        <div id="signatureContainer_600x400">
+        <div id="signatureContainer_600x400" class="yellowTail">
           <p id="signatureValue_600x400">Byte Dice</p>
           <p id="signHere_600x400">Sign here</p>
         </div>

toys/license/license.css

@@ -1,5 +1,4 @@
 #licenseContainer {
-  font-family: "Comic Sans MS", "Comic Sans", cursive;
   position: relative;
   max-width: min(100vw, 600px);
   max-height: 400px /* min(calc(50vh - calc(25px * var(--pxDensity))), 400px) */;
@@ -14,6 +13,21 @@
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(2, auto);
 }
+.sans {
+  font-family: "Comic Neue", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+.sans-bold { /* TODO: bold not working */
+  font-family: "Comic Neue", serif;
+  font-weight: 700;
+  font-style: normal;
+}
+.yellowTail {
+  font-family: "Yellowtail", serif;
+  font-weight: 400;
+  font-style: normal;
+}
 #picContainer {
   width: max(10vmax, 15vmin);
   height: max(10vmax, 15vmin);
@@ -44,9 +58,6 @@
   margin: 5% 0% 0% 0%;
 }
 #signatureValue {
-  font-family: "Yellowtail", serif;
-  font-weight: 400;
-  font-style: normal;
   margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
   text-align: center;
   font-size: min(max(2.5vmax, 3vmin), 1.5rem);
@@ -96,7 +107,8 @@ h2 {
 }
 #titleValue {
   grid-area: 1 / 1 / 2 / 3;
-  font-size: min(max(3vmax, 4vmin), 1.6rem);
+  font-size: min(max(3vmax, 4vmin), 2rem);
   margin: 0% auto 0% auto;
   height: max-content;
+  text-align: center;
 }