From 752f048d7e7987e94f0353a158c66518c7b969b6 Mon Sep 17 00:00:00 2001
From: Byte Dice <bytedice.official@gmail.com>
Date: Fri, 24 Jan 2025 19:28:35 +0100
Subject: [PATCH] made license compatible with most resolutions & aspect-ratios

---
 toys/license/index.html  |  4 +++-
 toys/license/license.css | 26 +++++++++++++++-----------
 toys/license/style.css   |  2 +-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/toys/license/index.html b/toys/license/index.html
index 628fb8c..70760b6 100644
--- a/toys/license/index.html
+++ b/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
diff --git a/toys/license/license.css b/toys/license/license.css
index ecdbe72..9784032 100644
--- a/toys/license/license.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/toys/license/style.css b/toys/license/style.css
index 56a7e06..e4659d5 100644
--- a/toys/license/style.css
+++ b/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;