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

made fully mobile compatible

Browse Source
This commit is contained in:
ByteDice
2025-01-28 19:52:38 +01:00
parent 4908bbf28a
commit e66839296a
5 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/license/600x400_license.css
+2 -5
View File
@@ -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
+12 -8
View File
@@ -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">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
<!-- fonts -->
<style>
@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
+17 -5
View File
@@ -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;
}