ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

made license compatible with most resolutions & aspect-ratios

Browse Source
This commit is contained in:
ByteDice
2025-01-24 19:28:35 +01:00
parent 982d47ce83
commit 752f048d7e
3 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/license/index.html
+3 -1
View File
@@ -36,7 +36,7 @@
Boykisser picture presets made by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br> Boykisser picture presets made by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
Please contact Please contact
<a onclick="slideTransition('https://www.reddit.com/u/RandomPersonDotExe', event)">u/RandomPersonDotExe</a> <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><br>
<h1>Basic</h1><br> <h1>Basic</h1><br>
@@ -71,6 +71,7 @@
<h1>Extra</h1><br> <h1>Extra</h1><br>
<form> <form>
<label for="soon1">Soon...</label><input name="soon1" value="Does nothing"><br>
<!-- decorations like <!-- decorations like
the QR-code and other "accessories" the QR-code and other "accessories"
--> -->
@@ -78,6 +79,7 @@
<h1>Advanced</h1><br> <h1>Advanced</h1><br>
<form> <form>
<label for="soon2">Soon...</label><input name="soon2" value="Does nothing"><br>
<!-- <!--
license border radius license border radius
pic border radius pic border radius
toys/license/license.css
+15 -11
View File
@@ -1,24 +1,28 @@
#licenseContainer { #licenseContainer {
font-family: "Comic Sans MS", "Comic Sans", cursive; font-family: "Comic Sans MS", "Comic Sans", cursive;
position: relative; position: relative;
width: 600px; max-width: min(100vw, 600px);
/* height: 400px; */ max-height: 400px /* min(calc(50vh - calc(25px * var(--pxDensity))), 400px) */;
aspect-ratio: 3 / 2; aspect-ratio: 3 / 2;
width: auto;
height: auto; height: auto;
padding: 0px 20px 40px 40px; padding: 0px min(20px, 3.333%) min(40px, 6.667%) min(20px, 3.333%);
margin: calc(5px * var(--pxDensity)) auto calc(25px * var(--pxDensity)) auto; margin: calc(5px * var(--pxDensity)) auto 0% /* calc(25px * var(--pxDensity)) */ auto;
font-size: 0.75rem; font-size: min(max(1.05vmax, 1.5vmin), 0.75rem);
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
grid-template-columns: repeat(2, auto); grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(2, auto); grid-template-rows: repeat(2, auto);
} }
#picContainer { #picContainer {
width: 150px; width: max(10vmax, 15vmin);
height: 150px; height: max(10vmax, 15vmin);
max-height: 150px;
max-width: 150px;
display: block; display: block;
overflow: hidden; overflow: hidden;
background-color: #FFFFFF; background-color: transparent;
border-radius: 25%;
} }
#picValue { #picValue {
width: 100%; width: 100%;
@@ -32,7 +36,7 @@
left: 0%; left: 0%;
margin: 0% 0% 0% 20px; margin: 0% 0% 0% 20px;
color: var(--navBarBtn_Inner); color: var(--navBarBtn_Inner);
font-size: 0.6rem; font-size: min(max(1vmax, 1.2vmin), 0.6rem);
} }
#signatureContainer { #signatureContainer {
display: inline-flex; display: inline-flex;
@@ -45,7 +49,7 @@
font-style: normal; font-style: normal;
margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */ margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
text-align: center; text-align: center;
font-size: 1.2rem; font-size: min(max(2.5vmax, 3vmin), 1.5rem);
} }
#signHere { #signHere {
border-top: #000000 solid 6px; border-top: #000000 solid 6px;
@@ -81,7 +85,7 @@ h2 {
} }
#titleValue { #titleValue {
grid-area: 1 / 1 / 2 / 3; grid-area: 1 / 1 / 2 / 3;
font-size: 1.5rem; font-size: min(max(3vmax, 4vmin), 1.6rem);
margin: 0% auto 0% auto; margin: 0% auto 0% auto;
height: max-content; height: max-content;
} }
toys/license/style.css
+1 -1
View File
@@ -1,7 +1,7 @@
.allContainer { .allContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: calc(100vh - calc(25px * var(--pxDensity)));
} }
.blackBorderRect { .blackBorderRect {
background-color: #FFFFFF; background-color: #FFFFFF;