changed the language selection button + replaced css with tailwind applies
This commit is contained in:
DrMint
parent
4f575f77c0
commit
994518bd3a
@ -1,26 +1,31 @@
|
||||
import Link from "next/link";
|
||||
import NavOption from "components/PanelComponents/NavOption";
|
||||
import SVG from "components/SVG";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export default function MainPanel(): JSX.Element {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black w-80 max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
|
||||
<div className="transition-[filter] hover:colorize-dark">
|
||||
<Link href="/" passHref>
|
||||
<div className="grid place-items-center cursor-pointer">
|
||||
<div className="w-1/2">
|
||||
<div className="">
|
||||
<div className="grid place-items-center">
|
||||
<div className="w-1/2 cursor-pointer transition-[filter] hover:colorize-dark">
|
||||
<Link href="/" passHref>
|
||||
<SVG
|
||||
src={"/icons/accords.svg"}
|
||||
alt={"Logo of Accord's Library"}
|
||||
/>
|
||||
</div>
|
||||
<h2 className="my-5 text-3xl">Accord's Library</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="relative mt-5">
|
||||
<button className="absolute right-0 top-[-1em] text-xs py-0">
|
||||
{router.locale?.toUpperCase()}
|
||||
</button>
|
||||
<h2 className="text-3xl">Accord’s Library</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button>Change language</button>
|
||||
|
||||
<hr />
|
||||
|
||||
<NavOption
|
||||
@ -84,19 +89,23 @@ export default function MainPanel(): JSX.Element {
|
||||
</a>
|
||||
<p>
|
||||
Accord’s Library is not affiliated with or endorsed by SQUARE
|
||||
ENIX CO. LTD. All game assets and promotional materials belongs to ©
|
||||
SQUARE ENIX CO. LTD.
|
||||
ENIX CO. LTD. All game assets and promotional materials belongs to
|
||||
© SQUARE ENIX CO. LTD.
|
||||
</p>
|
||||
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
|
||||
<a
|
||||
className="transition-[filter] hover:colorize-dark"
|
||||
href="https://github.com/Accords-Library"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<SVG className="w-10" src={"/icons/github-brands.svg"} alt={""} />
|
||||
</a>
|
||||
<a
|
||||
className="transition-[filter] hover:colorize-dark"
|
||||
href="https://accords-library.com/discord"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<SVG className="w-10" src={"/icons/discord-brands.svg"} alt={""} />
|
||||
</a>
|
||||
|
||||
@ -29,7 +29,6 @@ applyCustomAppProps(Library, {
|
||||
});
|
||||
|
||||
export default function Library(props: Props): JSX.Element {
|
||||
const router = useRouter();
|
||||
const libraryItem = props.libraryItem.libraryItems.data[0];
|
||||
|
||||
return (
|
||||
@ -38,36 +37,6 @@ export default function Library(props: Props): JSX.Element {
|
||||
<ReturnButton title="Library" url="/library" />
|
||||
<hr />
|
||||
|
||||
<div className="grid place-items-center">
|
||||
<div className="cursor-pointer grid items-end relative hover:rounded-3xl w-[80%] max-w-full mb-8">
|
||||
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-lg"></div>
|
||||
{libraryItem.attributes.thumbnail.data ? (
|
||||
<Image
|
||||
src={getAssetURL(
|
||||
libraryItem.attributes.thumbnail.data.attributes.url
|
||||
)}
|
||||
alt={
|
||||
libraryItem.attributes.thumbnail.data.attributes
|
||||
.alternativeText
|
||||
}
|
||||
width={libraryItem.attributes.thumbnail.data.attributes.width}
|
||||
height={libraryItem.attributes.thumbnail.data.attributes.height}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full aspect-[21/29.7]"></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl">{libraryItem.attributes.title}</h1>
|
||||
{libraryItem.attributes.subtitle ? (
|
||||
<h2 className="text-1xl">{libraryItem.attributes.subtitle}</h2>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<NavOption title="Summary" url="#summary" border={true} />
|
||||
|
||||
{libraryItem.attributes.gallery.data.length > 0 ? (
|
||||
@ -157,18 +126,25 @@ export default function Library(props: Props): JSX.Element {
|
||||
</div>
|
||||
|
||||
{libraryItem.attributes.gallery.data.length > 0 ? (
|
||||
<div id="gallery" className="grid place-items-center gap-8">
|
||||
<div id="gallery" className="grid place-items-center gap-8 w-full">
|
||||
<h2 className="text-2xl">Gallery</h2>
|
||||
<div className="grid grid-flow-col place-items-center gap-4">
|
||||
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
|
||||
{libraryItem.attributes.gallery.data.map((galleryItem) => (
|
||||
<Image
|
||||
<div
|
||||
key={galleryItem.id}
|
||||
className="rounded-lg"
|
||||
src={getAssetURL(galleryItem.attributes.url)}
|
||||
alt={galleryItem.attributes.alternativeText}
|
||||
width={galleryItem.attributes.width}
|
||||
height={galleryItem.attributes.height}
|
||||
/>
|
||||
className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
|
||||
>
|
||||
<div className="bg-light absolute inset-0 rounded-lg shadow-md"></div>
|
||||
<Image
|
||||
className="rounded-lg"
|
||||
src={getAssetURL(galleryItem.attributes.url)}
|
||||
alt={galleryItem.attributes.alternativeText}
|
||||
width={galleryItem.attributes.width}
|
||||
height={galleryItem.attributes.height}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,50 +5,19 @@
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: theme("colors.light");
|
||||
color: theme("colors.black");
|
||||
@apply p-0 m-0 bg-light text-black;
|
||||
}
|
||||
|
||||
/* HORIZONTAL LINE */
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-top: 0.3rem dotted theme("colors.black");;
|
||||
margin: 2rem;
|
||||
@apply h-0 w-full my-8 border-t-[3px] border-dotted border-black;
|
||||
}
|
||||
|
||||
/* MATERIAL ICONS */
|
||||
|
||||
/* BUTTONS */
|
||||
|
||||
button {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
border: 0.1rem solid theme("colors.dark");
|
||||
color: theme("colors.dark");
|
||||
background: inherit;
|
||||
border-radius: 100vmax;
|
||||
padding: 0.4em 1em;
|
||||
cursor: pointer;
|
||||
transition: 0.1s color, 0.1s background-color;
|
||||
@apply grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 py-2 transition-colors hover:text-light hover:bg-dark;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: theme("colors.dark");
|
||||
color: theme("colors.light");
|
||||
}
|
||||
|
||||
/* FONT SETTING */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: "Zen Maru Gothic";
|
||||
font-weight: 500;
|
||||
@apply box-border font-body font-medium scroll-smooth;
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -57,20 +26,19 @@
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Vollkorn";
|
||||
font-weight: 900;
|
||||
@apply font-headers font-black;
|
||||
}
|
||||
|
||||
/* LINKS */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted theme("colors.dark");
|
||||
transition: 0.1s color;
|
||||
text-underline-offset: 0.15em;
|
||||
@apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: theme("colors.dark");
|
||||
*:target {
|
||||
@apply scroll-mt-4;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
@apply bg-dark text-light;
|
||||
}
|
||||
|
||||
/* SCROLLBARS STYLING */
|
||||
@ -78,29 +46,17 @@
|
||||
* {
|
||||
scrollbar-color: theme("colors.dark") transparent;
|
||||
scrollbar-width: thin;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background-color: theme("colors.dark");
|
||||
color: theme("colors.light");
|
||||
}
|
||||
|
||||
*:target {
|
||||
scroll-margin-top: 1em;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 12px; /* width of the entire scrollbar */
|
||||
@apply w-3;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent; /* color of the tracking area */
|
||||
@apply bg-[transparent];
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: theme("colors.dark"); /* color of the scroll thumb */
|
||||
border-radius: 100vmax; /* roundness of the scroll thumb */
|
||||
border: 3px solid theme("colors.light"); /* creates padding around scroll thumb */
|
||||
@apply bg-dark rounded-full border-[3px] border-solid border-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,10 @@ module.exports = {
|
||||
dark: "#9c6644",
|
||||
black: "#1B1811",
|
||||
},
|
||||
fontFamily: {
|
||||
body: ["Zen Maru Gothic"],
|
||||
headers: ["Vollkorn"],
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("@tailwindcss/typography"),
|
||||
@ -53,6 +57,5 @@ module.exports = {
|
||||
},
|
||||
});
|
||||
}),
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user