diff --git a/Kentai_Radiquum.html b/Kentai_Radiquum.html new file mode 100644 index 0000000..549f634 --- /dev/null +++ b/Kentai_Radiquum.html @@ -0,0 +1,82 @@ + + + + + + + Kentai Radiquum + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +

KENTAI RADIQUUM

+
+ +
+ ABOUT + LINKS + CHARACTERS +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/characters.html b/characters.html index 822e7d2..8efdb5a 100644 --- a/characters.html +++ b/characters.html @@ -53,7 +53,7 @@
- +
diff --git a/static/assets/icon--cancel.svg b/static/assets/icon--cancel.svg new file mode 100644 index 0000000..12079c1 --- /dev/null +++ b/static/assets/icon--cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/icon--download.svg b/static/assets/icon--download.svg new file mode 100644 index 0000000..ab6fe91 --- /dev/null +++ b/static/assets/icon--download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/icon--image.svg b/static/assets/icon--image.svg new file mode 100644 index 0000000..4e50373 --- /dev/null +++ b/static/assets/icon--image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/assets/icon--picture_as_pdf.svg b/static/assets/icon--picture_as_pdf.svg new file mode 100644 index 0000000..576d97a --- /dev/null +++ b/static/assets/icon--picture_as_pdf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/charactersMenu.js b/static/charactersMenu.js new file mode 100644 index 0000000..900ea8e --- /dev/null +++ b/static/charactersMenu.js @@ -0,0 +1,17 @@ +function showMenu() { + const downloadBtn_icon = document.getElementById("downloadBtn_icon"); + const downloadMenu = document.getElementById("downloadMenu"); + + if ( + downloadBtn_icon.src == + `${window.location.origin}/static/assets/icon--download.svg` + ) { + downloadBtn_icon.src = `${window.location.origin}/static/assets/icon--cancel.svg`; + } else { + downloadBtn_icon.src = `${window.location.origin}/static/assets/icon--download.svg`; + } + + downloadMenu.classList.toggle("scale-0") + downloadMenu.classList.toggle("-rotate-90") + downloadMenu.classList.toggle("translate-x-4") +} diff --git a/static/tailwind.css b/static/tailwind.css index 5f1e4aa..b68086a 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -624,6 +624,10 @@ video { bottom: 0px; } +.bottom-8 { + bottom: 2rem; +} + .bottom-\[50\%\] { bottom: 50%; } @@ -636,6 +640,10 @@ video { right: 0px; } +.right-8 { + right: 2rem; +} + .right-\[15\%\] { right: 15%; } @@ -644,6 +652,22 @@ video { top: 0px; } +.bottom-12 { + bottom: 3rem; +} + +.-right-10 { + right: -2.5rem; +} + +.-right-6 { + right: -1.5rem; +} + +.-right-4 { + right: -1rem; +} + .-z-10 { z-index: -10; } @@ -656,6 +680,10 @@ video { z-index: 10; } +.z-50 { + z-index: 50; +} + .order-1 { order: 1; } @@ -698,6 +726,14 @@ video { margin-top: 0.25rem; } +.mt-4 { + margin-top: 1rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + .block { display: block; } @@ -738,6 +774,10 @@ video { height: 6rem; } +.h-8 { + height: 2rem; +} + .h-\[100px\] { height: 100px; } @@ -746,40 +786,12 @@ video { height: 100%; } -.h-screen { - height: 100vh; +.h-6 { + height: 1.5rem; } -.h-\[99vh\] { - height: 99vh; -} - -.h-\[98vh\] { - height: 98vh; -} - -.h-\[95vh\] { - height: 95vh; -} - -.h-\[90vh\] { - height: 90vh; -} - -.h-\[80vh\] { - height: 80vh; -} - -.h-\[85vh\] { - height: 85vh; -} - -.h-\[87vh\] { - height: 87vh; -} - -.h-\[89vh\] { - height: 89vh; +.h-12 { + height: 3rem; } .max-h-\[182px\] { @@ -790,10 +802,6 @@ video { max-height: 50vh; } -.max-h-screen { - max-height: 100vh; -} - .min-h-screen { min-height: 100vh; } @@ -810,6 +818,10 @@ video { width: 6rem; } +.w-8 { + width: 2rem; +} + .w-\[170px\] { width: 170px; } @@ -822,10 +834,6 @@ video { width: 256px; } -.w-\[50vw\] { - width: 50vw; -} - .w-\[64px\] { width: 64px; } @@ -834,12 +842,30 @@ video { width: 100%; } -.max-w-\[50vw\] { - max-width: 50vw; +.w-6 { + width: 1.5rem; } -.flex-1 { - flex: 1 1 0%; +.w-10 { + width: 2.5rem; +} + +.w-12 { + width: 3rem; +} + +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + +.w-max { + width: -moz-max-content; + width: max-content; +} + +.max-w-\[50vw\] { + max-width: 50vw; } .-translate-y-full { @@ -852,6 +878,37 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.-translate-x-12 { + --tw-translate-x: -3rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-12 { + --tw-translate-x: 3rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-10 { + --tw-translate-x: 2.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-x-4 { + --tw-translate-x: 1rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-rotate-90 { + --tw-rotate: -90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-0 { + --tw-scale-x: 0; + --tw-scale-y: 0; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + @keyframes bounce { 0%, 100% { transform: translateY(-25%); @@ -900,6 +957,10 @@ video { align-items: center; } +.justify-start { + justify-content: flex-start; +} + .justify-end { justify-content: flex-end; } @@ -953,6 +1014,10 @@ video { border-radius: 1.5rem; } +.rounded-full { + border-radius: 9999px; +} + .rounded-lg { border-radius: 0.5rem; } @@ -1105,22 +1170,6 @@ video { --tw-bg-opacity: 0.5; } -.bg-opacity-85 { - --tw-bg-opacity: 0.85; -} - -.bg-opacity-90 { - --tw-bg-opacity: 0.9; -} - -.bg-opacity-5 { - --tw-bg-opacity: 0.05; -} - -.bg-opacity-25 { - --tw-bg-opacity: 0.25; -} - .object-contain { -o-object-fit: contain; object-fit: contain; @@ -1177,6 +1226,11 @@ video { padding-bottom: 2rem; } +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + .text-center { text-align: center; } @@ -1185,10 +1239,6 @@ video { text-align: right; } -.align-bottom { - vertical-align: bottom; -} - .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1219,11 +1269,6 @@ video { line-height: 1.75rem; } -.text-6xl { - font-size: 3.75rem; - line-height: 1; -} - .font-bold { font-weight: 700; } @@ -1259,6 +1304,12 @@ video { text-decoration-line: underline; } +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .brightness-50 { --tw-brightness: brightness(.5); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); diff --git a/tailwind.config.js b/tailwind.config.js index f6ecc0f..5d18316 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./index.html", "./characters.html"], + content: ["./index.html", "./characters.html", "Kentai_Radiquum.html"], theme: { extend: { colors: {