From b592131c78c9975476db6cfb098e3c2d3d9f4527 Mon Sep 17 00:00:00 2001
From: Byte Dice <bytedice.official@gmail.com>
Date: Sun, 26 Jan 2025 10:59:03 +0100
Subject: [PATCH] made even more mobile-friendly

---
 toys/license/index.html  | 20 ++++++++++----------
 toys/license/options.css | 15 ++++++++++++---
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/toys/license/index.html b/toys/license/index.html
index 4b22f85..f9981ff 100644
--- a/toys/license/index.html
+++ b/toys/license/index.html
@@ -58,19 +58,19 @@
         
         <h1>Basic</h1><br>
         <form>
-          <label for="titleInput">Title</label><input type="text" id="titleInput" name="titleInput" value="Boykisser license"><br>
-          <label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
-          <label for="createdInput">Issued</label><input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
-          <label for="expireInput">Expires</label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
-          <label for="identityInput">Identity</label><input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
+          <div class="paramContainer"><label for="titleInput">Title</label><input type="text" id="titleInput" name="titleInput" value="Boykisser license"></div>
+          <div class="paramContainer"><label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice"></div>
+          <div class="paramContainer"><label for="createdInput">Issued</label><input type="text" id="createdInput" name="createdInput" value="2025-01-01"></div>
+          <div class="paramContainer"><label for="expireInput">Expires</label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!"></div>
+          <div class="paramContainer"><label for="identityInput">Identity</label><input type="text" id="identityInput" name="identityInput" value="any pronouns"></div>
 
-          <label for="sillyInput">Silly</label><div id="sillyNumberValue">03</div><div class="sliderDiv">
+          <div class="paramContainer"><label for="sillyInput">Silly</label><div id="sillyNumberValue">03</div><div class="sliderDiv">
             <input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput">
-          </div><br>
+          </div></div>
 
-          <label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice"><br>
+          <div class="paramContainer"><label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice"></div>
 
-          <label for="picInput">Picture</label><select id="picInput" name="picInput">
+          <div class="paramContainer"><label for="picInput">Picture</label><select id="picInput" name="picInput">
             <option value="boykisser"    >Boykisser</option>
             <option value="bi-kisser"    >Bi-kisser</option>
             <option value="Ace-kisser"   >Ace-kisser</option>
@@ -83,7 +83,7 @@
             for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="picUploadIcon" draggable="false"></label
           ><input
             type="file" id="picUpload" name="picUpload" accept=".png,.jpg,.jpeg,.webp"
-          ><br>
+          ></div>
         </form><br>
 
         <h1>Extra</h1><br>
diff --git a/toys/license/options.css b/toys/license/options.css
index 591fa92..5a704fd 100644
--- a/toys/license/options.css
+++ b/toys/license/options.css
@@ -7,6 +7,7 @@
   overflow-y: scroll;
   max-width: min(600px, 100vw);
   flex-grow: 1;
+  font-size: calc(4px * var(--pxDensity));
 }
 .optionsCredits {
   margin: 0%;
@@ -83,8 +84,10 @@ input {
   margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
   box-sizing: border-box;
   width: 50%;
-  height: round(auto, var(--pxDensity));
+  height: calc(6px * var(--pxDensity));
   color: inherit;
+  align-items: center;
+  display: flex;
 }
 #sillyNumberValue {
   display: inline;
@@ -100,7 +103,7 @@ input {
   margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
   box-sizing: border-box;
   width: round(auto, var(--pxDensity));
-  height: auto;
+  height: calc(6px * var(--pxDensity));;
   aspect-ratio: 1 / 1;
 }
 h1 {
@@ -156,6 +159,7 @@ input[type=file] {
   aspect-ratio: 1 / 1;
   width: auto;
   background-image: url(/assets/icons/upload.svg);
+  display: inline-flex;
 }
 #picUploadIcon {
   height: calc(4px * var(--pxDensity));
@@ -180,7 +184,8 @@ form {
   box-sizing: border-box;
   width: calc(100% - (4px * var(--pxDensity)));
   height: calc(6px * var(--pxDensity));
-  display: inline-block;
+  display: inline-flex;
+  justify-content: center;
 }
 .generateButtonIcon {
   height: calc(4px * var(--pxDensity));
@@ -188,4 +193,8 @@ form {
   width: auto;
   display: inline-block;
   margin: auto 0%;
+}
+.paramContainer {
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file