mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-05-21 19:59:35 +05:00
feat: start of Kentai Radiquum Character Page
This commit is contained in:
parent
245a064556
commit
da0666897a
GPG key ID:
858E8EE696525EED
9 changed files with 225 additions and 71 deletions
1
static/assets/icon--cancel.svg
Normal file
1
static/assets/icon--cancel.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
|
||||
|
After Width: | Height: | Size: 507 B |
1
static/assets/icon--download.svg
Normal file
1
static/assets/icon--download.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
|
||||
|
After Width: | Height: | Size: 278 B |
1
static/assets/icon--image.svg
Normal file
1
static/assets/icon--image.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>
|
||||
|
After Width: | Height: | Size: 327 B |
1
static/assets/icon--picture_as_pdf.svg
Normal file
1
static/assets/icon--picture_as_pdf.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M360-460h40v-80h40q17 0 28.5-11.5T480-580v-40q0-17-11.5-28.5T440-660h-80v200Zm40-120v-40h40v40h-40Zm120 120h80q17 0 28.5-11.5T640-500v-120q0-17-11.5-28.5T600-660h-80v200Zm40-40v-120h40v120h-40Zm120 40h40v-80h40v-40h-40v-40h40v-40h-80v200ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"/></svg>
|
||||
|
After Width: | Height: | Size: 576 B |
17
static/charactersMenu.js
Normal file
17
static/charactersMenu.js
Normal file
|
|
@ -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")
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue