diff --git a/assets/boykisserLicenseEmpty.png b/assets/boykisserLicenseEmpty.png new file mode 100644 index 0000000..dec25f3 Binary files /dev/null and b/assets/boykisserLicenseEmpty.png differ diff --git a/assets/icons/dice3_8x8.png b/assets/icons/dice3_8x8.png new file mode 100644 index 0000000..cf559e6 Binary files /dev/null and b/assets/icons/dice3_8x8.png differ diff --git a/global/globalScript.js b/global/globalScript.js index cd8dc69..b3b67d2 100644 --- a/global/globalScript.js +++ b/global/globalScript.js @@ -1,7 +1,8 @@ const PAGES = { null: -1, SYNTHWAVE: 0, - LICENSE: 1, + TOYS: 1, + LICENSE: 2, } const CONSOLE_COLORS = { red: "color: #FF0000;", diff --git a/global/globalStyle.css b/global/globalStyle.css index da41c87..1dffcc9 100644 --- a/global/globalStyle.css +++ b/global/globalStyle.css @@ -1,13 +1,13 @@ :root { --navBar_Inner: #43608D; --navBar_Border: #2F3E56; + --navBar_SecondInner: #344b6c; --navBarBtn_Inner: #474747; --navBarBtn_Border: #232323; --pxDensity: 1; --pxDensityPx: 1px; --bottomPxMargin: 1px; } - html { font-family: "Roboto", sans-serif; font-size: 1rem; @@ -15,17 +15,29 @@ html { background-color: #323232; overflow: hidden; } - canvas { position: absolute; } - .pxFont { font-family: "Roboto", sans-serif; font-size: 1rem; } - @keyframes slide-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } +} +.borderedRect { + background-color: var(--navBar_Inner); + box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border), + calc(-1px * var(--pxDensity)) 0px var(--navBar_Border), + 0px calc(1px * var(--pxDensity)) var(--navBar_Border), + 0px calc(-1px * var(--pxDensity)) var(--navBar_Border); + + filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); + padding: 0%; +} +.invisible { + background-color: transparent; + border: none; + color: inherit; } \ No newline at end of file diff --git a/global/navBar.css b/global/navBar.css index d7e000d..d9f355d 100644 --- a/global/navBar.css +++ b/global/navBar.css @@ -6,14 +6,6 @@ li { } .navBar { - background-color: var(--navBar_Inner); - box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border), - calc(-1px * var(--pxDensity)) 0px var(--navBar_Border), - 0px calc(1px * var(--pxDensity)) var(--navBar_Border), - 0px calc(-1px * var(--pxDensity)) var(--navBar_Border); - - filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); - padding: 0%; display: inline; position: absolute; top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx)); @@ -29,11 +21,11 @@ li { border: none; filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); } -.navBtn:hover { +button:hover { filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); cursor: pointer; } -.navBtn:active { +button:active { filter: brightness(0.75); transform: translateY(calc(1px * var(--pxDensity))); } diff --git a/global/navBar.js b/global/navBar.js index dc8f3dd..7660abf 100644 --- a/global/navBar.js +++ b/global/navBar.js @@ -12,7 +12,7 @@ function onLoadNavBar() { navBarAligner.className = "navBarAligner" const navBar = document.createElement("ul") - navBar.className = "navBar" + navBar.className = "navBar borderedRect" for (let btn of navBarJson) { diff --git a/toys/index.html b/toys/index.html new file mode 100644 index 0000000..f774d23 --- /dev/null +++ b/toys/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + Byte Dice - Toys + + + +
+ + + +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/toys/license/index.html b/toys/license/index.html new file mode 100644 index 0000000..e223e0d --- /dev/null +++ b/toys/license/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + Byte Dice - Boykisser license + + + +
+ +
aaaaaaaaaaaaaaaaaaaaaaa
+
+
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/toys/license/script.js b/toys/license/script.js new file mode 100644 index 0000000..f320fbe --- /dev/null +++ b/toys/license/script.js @@ -0,0 +1 @@ +CURRENT_PAGE = PAGES.LICENSE \ No newline at end of file diff --git a/toys/license/style.css b/toys/license/style.css new file mode 100644 index 0000000..30a14a4 --- /dev/null +++ b/toys/license/style.css @@ -0,0 +1,9 @@ +.optionsContainer { + display: inline; + position: absolute; + top: 0%; + left: round(50%, var(--pxDensityPx)); + transform: translate(-50%); + width: max-content; + padding: calc(1px * var(--pxDensity)); +} \ No newline at end of file diff --git a/toys/script.js b/toys/script.js new file mode 100644 index 0000000..41bc735 --- /dev/null +++ b/toys/script.js @@ -0,0 +1 @@ +CURRENT_PAGE = PAGES.TOYS \ No newline at end of file diff --git a/toys/style.css b/toys/style.css new file mode 100644 index 0000000..5774fd1 --- /dev/null +++ b/toys/style.css @@ -0,0 +1,41 @@ +.toyContainer { + border: none; + width: calc(64px * var(--pxDensity)); + height: calc(48px * var(--pxDensity)); + display: grid; + grid-template-columns: 1fr; + grid-template-rows: calc(32px * var(--pxDensity)) 1fr; +} +.toyImg { + image-rendering: pixelated; + overflow: hidden; + max-width: calc(62px * var(--pxDensity)); + height: calc(32px * var(--pxDensity)); + margin: 0% auto; +} +.toyTextContainer { + background-color: var(--navBar_SecondInner); + padding: calc(1px * var(--pxDensity)); + border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border); + text-align: left; + overflow: scroll; +} +h1 { + margin: 0%; + margin-bottom: calc(1px * var(--pxDensity)); +} +p { + font-size: 1.3rem; + margin: 0%; +} +button:hover { + filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); + cursor: pointer; +} +button:active { + filter: brightness(0.85); + transform: translateY(calc(1px * var(--pxDensity))); +} +.toyLi { + margin: calc(3px * var(--pxDensity)); +} \ No newline at end of file