made license compatible with most resolutions & aspect-ratios

toys/license/index.html

@@ -36,7 +36,7 @@
           Boykisser picture presets made by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
           Please contact
             <a onclick="slideTransition('https://www.reddit.com/u/RandomPersonDotExe', event)">u/RandomPersonDotExe</a>
-          or Discord @bytedice for takedown requests.
+          on Reddit or @bytedice on Discord for takedown requests.
         </h1><br>
         
         <h1>Basic</h1><br>
@@ -71,6 +71,7 @@
 
         <h1>Extra</h1><br>
         <form>
+          <label for="soon1">Soon...</label><input name="soon1" value="Does nothing"><br>
           <!-- decorations like
             the QR-code and other "accessories"
           -->
@@ -78,6 +79,7 @@
 
         <h1>Advanced</h1><br>
         <form>
+          <label for="soon2">Soon...</label><input name="soon2" value="Does nothing"><br>
           <!-- 
             license border radius
             pic border radius

toys/license/license.css

@@ -1,24 +1,28 @@
 #licenseContainer {
   font-family: "Comic Sans MS", "Comic Sans", cursive;
   position: relative;
-  width: 600px;
-  /* height: 400px; */
+  max-width: min(100vw, 600px);
+  max-height: 400px /* min(calc(50vh - calc(25px * var(--pxDensity))), 400px) */;
   aspect-ratio: 3 / 2;
+  width: auto;
   height: auto;
-  padding: 0px 20px 40px 40px;
-  margin: calc(5px * var(--pxDensity)) auto calc(25px * var(--pxDensity)) auto;
-  font-size: 0.75rem;
+  padding: 0px min(20px, 3.333%) min(40px, 6.667%) min(20px, 3.333%);
+  margin: calc(5px * var(--pxDensity)) auto 0% /* calc(25px * var(--pxDensity)) */ auto;
+  font-size: min(max(1.05vmax, 1.5vmin), 0.75rem);
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(2, auto);
 }
 #picContainer {
-  width: 150px;
-  height: 150px;
+  width: max(10vmax, 15vmin);
+  height: max(10vmax, 15vmin);
+  max-height: 150px;
+  max-width: 150px;
   display: block;
   overflow: hidden;
-  background-color: #FFFFFF;
+  background-color: transparent;
+  border-radius: 25%;
 }
 #picValue {
   width: 100%;
@@ -32,7 +36,7 @@
   left: 0%;
   margin: 0% 0% 0% 20px;
   color: var(--navBarBtn_Inner);
-  font-size: 0.6rem;
+  font-size: min(max(1vmax, 1.2vmin), 0.6rem);
 }
 #signatureContainer {
   display: inline-flex;
@@ -45,7 +49,7 @@
   font-style: normal;
   margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
   text-align: center;
-  font-size: 1.2rem;
+  font-size: min(max(2.5vmax, 3vmin), 1.5rem);
 }
 #signHere {
   border-top: #000000 solid 6px;
@@ -81,7 +85,7 @@ h2 {
 }
 #titleValue {
   grid-area: 1 / 1 / 2 / 3;
-  font-size: 1.5rem;
+  font-size: min(max(3vmax, 4vmin), 1.6rem);
   margin: 0% auto 0% auto;
   height: max-content;
 }

toys/license/style.css

@@ -1,7 +1,7 @@
 .allContainer {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: calc(100vh - calc(25px * var(--pxDensity)));
 }
 .blackBorderRect {
   background-color: #FFFFFF;