organized styles

toys/license/index.html

@@ -9,6 +9,8 @@
   <link rel="stylesheet" href="/global/globalStyle.css">
   <link rel="stylesheet" href="/global/loadingScreen.css">
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="license.css">
+  <link rel="stylesheet" href="options.css">
 
   <link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
   <title>Byte Dice - Boykisser license</title>
@@ -29,6 +31,7 @@
         <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
       </p>
       
+      <h1>Basic</h1>
       <form>
         <label for="authorInput">For/Author</label>
         <input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>

toys/license/license.css

@@ -0,0 +1,69 @@
+#licenseContainer {
+  width: 600px;
+  height: 400px;
+  padding: 40px 10px 40px 40px;
+  position: absolute;
+  left: 50%;
+  bottom: 0%;
+  transform: translate(-50%, calc(-22px * var(--pxDensity)));
+  font-size: 0.75rem;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+}
+#picContainer {
+  margin-top: 40px;
+  width: 150px;
+  height: 150px;
+}
+#credits {
+  position: absolute;
+  bottom: 0%;
+  left: 0%;
+  margin: 0% 0% 0% 20px;
+  color: var(--navBarBtn_Inner);
+  font-size: 0.6rem;
+}
+#signatureContainer {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 5% 0% 0% 0%;
+}
+#signature {
+  margin: 0% 0% 0.2rem 0%;
+  text-align: center;
+  font-size: 1rem;
+}
+#signHere {
+  border-top: #000000 solid 6px;
+  margin: 0%;
+  padding: 0% 25px;
+  text-align: center;
+}
+#detailsContainer {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+}
+h2 {
+  margin: 5px;
+}
+#sillyValue {
+  height: 100%;
+  background-color: #FF0000;
+}
+.sillyGrid {
+  width: 99%;
+  aspect-ratio: 10 / 1;
+  height: auto;
+  background-image: repeating-linear-gradient(
+    to right, 
+    #000000 0px, 
+    #000000 3px,
+    transparent 3px, 
+    transparent 10%
+  );
+  border: 3px solid black;
+  border-radius: 8px;
+  align-self: center;
+}

toys/license/options.css

@@ -0,0 +1,101 @@
+#optionsContainer {
+  display: inline;
+  position: absolute;
+  top: 0%;
+  left: round(50%, var(--pxDensityPx));
+  transform: translate(-50%);
+  width: max-content;
+  padding: calc(2px * var(--pxDensity));
+}
+#optionsCredits {
+  margin: 0%;
+}
+label {
+  background-color: var(--navBarBtn_Inner);
+  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
+              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
+
+  padding: calc(1px * var(--pxDensity));
+  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+  box-sizing: border-box;
+  width: round(auto, var(--pxDensity));
+  height: round(auto, var(--pxDensity));
+}
+input {
+  background-color: var(--navBarBtn_Inner);
+  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
+              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
+
+  padding: calc(1px * var(--pxDensity));
+  border: none;
+  font-size: inherit;
+  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+  box-sizing: border-box;
+  width: round(auto, var(--pxDensity));
+  height: round(auto, var(--pxDensity));
+  color: inherit;
+}
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--navBarBtn_Border);
+  box-shadow: none;
+  filter: none;
+  border: none;
+  font-size: inherit;
+  box-sizing: border-box;
+  width: round(auto, var(--pxDensity));
+  height: calc(1px * var(--pxDensity));
+  margin: 0%;
+  outline: none;
+  padding: 0%;
+}
+
+.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--navBar_Inner);
+  border: none;
+  cursor: pointer;
+  border-radius: 0%;
+  width: calc(3px * var(--pxDensity));
+  height: calc(3px * var(--pxDensity));
+}
+.sliderDiv {
+  display: inline-block;
+  background-color: var(--navBarBtn_Inner);
+  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
+              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
+
+  padding: calc(1px * var(--pxDensity));
+  border: none;
+  font-size: inherit;
+  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+  box-sizing: border-box;
+  width: round(auto, var(--pxDensity));
+  height: round(auto, var(--pxDensity));
+  color: inherit;
+}
+#sillyNumberValue {
+  display: inline;
+  background-color: var(--navBarBtn_Inner);
+  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
+              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
+
+  padding: calc(1px * var(--pxDensity));
+  border: none;
+  font-size: inherit;
+  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+  box-sizing: border-box;
+  width: round(auto, var(--pxDensity));
+  height: auto;
+  aspect-ratio: 1 / 1;
+}

toys/license/style.css

@@ -1,68 +1,9 @@
-#optionsContainer {
-  display: inline;
-  position: absolute;
-  top: 0%;
-  left: round(50%, var(--pxDensityPx));
-  transform: translate(-50%);
-  width: max-content;
-  padding: calc(2px * var(--pxDensity));
-}
-#licenseContainer {
-  width: 600px;
-  height: 400px;
-  padding: 40px 10px 40px 40px;
-  position: absolute;
-  left: 50%;
-  bottom: 0%;
-  transform: translate(-50%, calc(-22px * var(--pxDensity)));
-  font-size: 0.75rem;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: auto auto;
-}
 .blackBorderRect {
   background-color: #FFFFFF;
   border: 10px #000000 solid;
   border-radius: 32px;
   color: #000000;
 }
-#picContainer {
-  margin-top: 40px;
-  width: 150px;
-  height: 150px;
-}
-#credits {
-  position: absolute;
-  bottom: 0%;
-  left: 0%;
-  margin: 0% 0% 0% 20px;
-  color: var(--navBarBtn_Inner);
-  font-size: 0.6rem;
-}
-#signatureContainer {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 5% 0% 0% 0%;
-}
-#signature {
-  margin: 0% 0% 0.2rem 0%;
-  text-align: center;
-  font-size: 1rem;
-}
-#signHere {
-  border-top: #000000 solid 6px;
-  margin: 0%;
-  padding: 0% 25px;
-  text-align: center;
-}
-#detailsContainer {
-  display: grid;
-  grid-template-columns: repeat(2, auto);
-}
-h2 {
-  margin: 5px;
-}
 a {
   cursor: pointer;
   color: #1010da;
@@ -71,115 +12,3 @@ a {
 a:visited {
   color: #551A8B;
 }
-#optionsCredits {
-  margin: 0%;
-}
-label {
-  background-color: var(--navBarBtn_Inner);
-  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
-              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
-
-  padding: calc(1px * var(--pxDensity));
-  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
-  box-sizing: border-box;
-  width: round(auto, var(--pxDensity));
-  height: round(auto, var(--pxDensity));
-}
-input {
-  background-color: var(--navBarBtn_Inner);
-  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
-              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
-
-  padding: calc(1px * var(--pxDensity));
-  border: none;
-  font-size: inherit;
-  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
-  box-sizing: border-box;
-  width: round(auto, var(--pxDensity));
-  height: round(auto, var(--pxDensity));
-  color: inherit;
-}
-.slider {
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: var(--navBarBtn_Border);
-  box-shadow: none;
-  filter: none;
-  border: none;
-  font-size: inherit;
-  box-sizing: border-box;
-  width: round(auto, var(--pxDensity));
-  height: calc(1px * var(--pxDensity));
-  margin: 0%;
-  outline: none;
-  padding: 0%;
-}
-
-.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: var(--navBar_Inner);
-  border: none;
-  cursor: pointer;
-  border-radius: 0%;
-  width: calc(3px * var(--pxDensity));
-  height: calc(3px * var(--pxDensity));
-}
-.sliderDiv {
-  display: inline-block;
-  background-color: var(--navBarBtn_Inner);
-  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
-              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
-
-  padding: calc(1px * var(--pxDensity));
-  border: none;
-  font-size: inherit;
-  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
-  box-sizing: border-box;
-  width: round(auto, var(--pxDensity));
-  height: round(auto, var(--pxDensity));
-  color: inherit;
-}
-#sillyNumberValue {
-  display: inline;
-  background-color: var(--navBarBtn_Inner);
-  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
-              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
-              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
-
-  padding: calc(1px * var(--pxDensity));
-  border: none;
-  font-size: inherit;
-  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
-  box-sizing: border-box;
-  width: round(auto, var(--pxDensity));
-  height: auto;
-  aspect-ratio: 1 / 1;
-}
-#sillyValue {
-  height: 100%;
-  background-color: #FF0000;
-
-}
-.sillyGrid {
-  width: 99%;
-  aspect-ratio: 10 / 1;
-  height: auto;
-  background-image: repeating-linear-gradient(
-    to right, 
-    #000000 0px, 
-    #000000 3px,
-    transparent 3px, 
-    transparent 10%
-  );
-  border: 3px solid black;
-  border-radius: 8px;
-  align-self: center;
-}