Simplifies things
This commit is contained in:
DrMint
parent
cd69584b66
commit
04caf4c60b
5
TODO.md
5
TODO.md
|
|
@ -1,2 +1,3 @@
|
|||
- [ ] Check why I'm getting NS_BINDING_ABORTED on fonts when fetched in the network browser dev tool tab
|
||||
- [ ] Add a background when opening menus in mobile mode
|
||||
- Check why I'm getting NS_BINDING_ABORTED on fonts when fetched in the network browser dev tool tab
|
||||
- Add a background when opening menus in mobile mode
|
||||
- Strong is not bold...
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
---
|
||||
import Html from "pages/_components/Html.astro";
|
||||
import MenuPanel from "./components/MenuPanel.astro";
|
||||
import Navbar from "./components/Navbar.astro";
|
||||
import MenuPanelReduced from "./components/MenuPanelReduced.astro";
|
||||
import { parseCookie } from "utils/astro";
|
||||
import { CookieNames } from "utils/cookies";
|
||||
import MenuPanel from "./components/MenuPanel.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -35,7 +34,7 @@ const isMenuPanelReduced = parseCookie<boolean>(
|
|||
class:list={["texture-dots", { reduced: isMenuPanelReduced }]}
|
||||
>
|
||||
<div class="when-reduced">
|
||||
<MenuPanelReduced />
|
||||
<MenuPanel isReduced />
|
||||
</div>
|
||||
<div class="when-not-reduced">
|
||||
<MenuPanel />
|
||||
|
|
@ -131,8 +130,7 @@ const isMenuPanelReduced = parseCookie<boolean>(
|
|||
transition: 0.2s width;
|
||||
|
||||
&.reduced {
|
||||
width: auto;
|
||||
padding: 1rem;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
&.reduced > .when-not-reduced,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { getLocalizedUrl } from "utils/urls";
|
||||
import NavOption from "pages/_components/NavOption.astro";
|
||||
import HorizontalLine from "pages/_components/HorizontalLine.astro";
|
||||
import ReduceToggleButton from "./ReduceToggleButton.astro";
|
||||
import ThemeToggleButton from "./ThemeToggleButton.astro";
|
||||
import NavOption from "pages/_components/NavOption.astro";
|
||||
|
||||
interface Props {
|
||||
isReduced?: boolean;
|
||||
}
|
||||
|
||||
const { locale = "en" } = Astro.params;
|
||||
const { isReduced = false } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
|
|
@ -21,10 +26,10 @@ const { locale = "en" } = Astro.params;
|
|||
<Icon name="accords" />
|
||||
</a>
|
||||
|
||||
<p id="title">Accord’s Library</p>
|
||||
<p id="title" class:list={{ hidden: isReduced }}>Accord’s Library</p>
|
||||
|
||||
<div id="buttons">
|
||||
<ReduceToggleButton icon="material-symbols:chevron-left-rounded" />
|
||||
<div id="buttons" class:list={["when-js", { reduced: isReduced }]}>
|
||||
<ReduceToggleButton icon={isReduced ? "material-symbols:chevron-right": "material-symbols:chevron-left"} />
|
||||
<ThemeToggleButton />
|
||||
</div>
|
||||
|
||||
|
|
@ -35,6 +40,7 @@ const { locale = "en" } = Astro.params;
|
|||
icon="material-symbols:auto-stories"
|
||||
title="Library"
|
||||
subtitle="Browse all physical and digital media"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<NavOption
|
||||
|
|
@ -42,6 +48,7 @@ const { locale = "en" } = Astro.params;
|
|||
icon="material-symbols:workspaces"
|
||||
title="Content"
|
||||
subtitle="Explore all content and filter by type or category"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<NavOption
|
||||
|
|
@ -49,6 +56,7 @@ const { locale = "en" } = Astro.params;
|
|||
icon="material-symbols:travel-explore"
|
||||
title="Wiki"
|
||||
subtitle="An encyclopedia for everything related to DrakeNieR"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<NavOption
|
||||
|
|
@ -56,45 +64,64 @@ const { locale = "en" } = Astro.params;
|
|||
icon="material-symbols:schedule"
|
||||
title="Chronicles"
|
||||
subtitle="Experience all events and content in chronological order"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<HorizontalLine />
|
||||
|
||||
<NavOption href="/news" icon="material-symbols:newspaper" title="News" />
|
||||
<NavOption
|
||||
href="/news"
|
||||
icon="material-symbols:newspaper"
|
||||
title="News"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<NavOption
|
||||
href="https://gallery.accords-library.com/posts/"
|
||||
icon="material-symbols:perm-media"
|
||||
title="Gallery"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<NavOption href="/archives" icon="material-symbols:save" title="Archives" />
|
||||
<NavOption
|
||||
href="/archives"
|
||||
icon="material-symbols:save"
|
||||
title="Archives"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<NavOption href="/about-us" icon="material-symbols:info" title="About us" />
|
||||
<NavOption
|
||||
href="/about-us"
|
||||
icon="material-symbols:info"
|
||||
title="About us"
|
||||
mode={isReduced ? "iconOnly" : "default"}
|
||||
/>
|
||||
|
||||
<HorizontalLine />
|
||||
<div class:list={{ hidden: isReduced }}>
|
||||
<HorizontalLine />
|
||||
|
||||
<p>
|
||||
This website’s content is made available under <a
|
||||
href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a
|
||||
> unless otherwise noted.
|
||||
</p>
|
||||
<p>
|
||||
This website’s content is made available under <a
|
||||
href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a
|
||||
> unless otherwise noted.
|
||||
</p>
|
||||
|
||||
<div id="common-creative">
|
||||
<Icon name="creative-commons-brands" />
|
||||
<Icon name="creative-commons-by-brands" />
|
||||
<Icon name="creative-commons-sa-brands" />
|
||||
</div>
|
||||
<div id="common-creative">
|
||||
<Icon name="creative-commons-brands" />
|
||||
<Icon name="creative-commons-by-brands" />
|
||||
<Icon name="creative-commons-sa-brands" />
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<div id="social-links">
|
||||
<Icon name="github-brands" />
|
||||
<Icon name="x-brands" />
|
||||
<Icon name="discord-brands" />
|
||||
<div id="social-links">
|
||||
<Icon name="github-brands" />
|
||||
<Icon name="x-brands" />
|
||||
<Icon name="discord-brands" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
|
|
@ -102,6 +129,10 @@ const { locale = "en" } = Astro.params;
|
|||
}
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-family: var(--font-headers);
|
||||
font-size: 1.875rem;
|
||||
|
|
@ -130,6 +161,15 @@ const { locale = "en" } = Astro.params;
|
|||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.reduced {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& > #theme-toggle.dark > .when-light,
|
||||
& > #theme-toggle.light > .when-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#common-creative {
|
||||
|
|
@ -144,10 +184,6 @@ const { locale = "en" } = Astro.params;
|
|||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#social-links {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
|
@ -160,3 +196,35 @@ const { locale = "en" } = Astro.params;
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{
|
||||
/* -------------------------------------------- JS -------------------------------------------- */
|
||||
}
|
||||
|
||||
<script>
|
||||
import tippy, { createSingleton } from "tippy.js";
|
||||
import { onLoad } from "utils/turbo";
|
||||
|
||||
onLoad(() => {
|
||||
createSingleton(
|
||||
tippy("#menu-panel > .when-reduced > [data-tippy-template]", {
|
||||
content: (reference) => {
|
||||
const templateQuery = reference.getAttribute("data-tippy-template")!;
|
||||
const template = reference.querySelector(templateQuery)!;
|
||||
const container = document.createElement("div");
|
||||
container.append(template.cloneNode(true));
|
||||
container.style.fontSize = "90%";
|
||||
return container;
|
||||
},
|
||||
}),
|
||||
{
|
||||
allowHTML: true,
|
||||
placement: "right",
|
||||
delay: 250,
|
||||
moveTransition: "transform 0.2s ease",
|
||||
maxWidth: "18rem",
|
||||
inertia: true,
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,159 +0,0 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { getLocalizedUrl } from "utils/urls";
|
||||
import { CookieNames } from "utils/cookies";
|
||||
import NavOptionIcon from "pages/_components/NavOptionIcon.astro";
|
||||
import { parseCookie } from "utils/astro";
|
||||
import HorizontalLine from "pages/_components/HorizontalLine.astro";
|
||||
import ReduceToggleButton from "./ReduceToggleButton.astro";
|
||||
|
||||
const { locale = "en" } = Astro.params;
|
||||
|
||||
const themeColors = parseCookie<string>(
|
||||
Astro.cookies.get(CookieNames.THEME_COLOR),
|
||||
"theme-color-light"
|
||||
);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
|
||||
<a
|
||||
id="accords-logo"
|
||||
data-turbo-confirm="Do you want to leave this page?"
|
||||
href={getLocalizedUrl("/", locale)}
|
||||
>
|
||||
<Icon name="accords" />
|
||||
</a>
|
||||
|
||||
<div id="buttons">
|
||||
<ReduceToggleButton icon="material-symbols:chevron-right-rounded" />
|
||||
|
||||
<button
|
||||
class={themeColors === "theme-color-dark" ? "dark" : "light"}
|
||||
id="theme-toggle"
|
||||
>
|
||||
<Icon
|
||||
class="when-light"
|
||||
name="material-symbols:light-mode"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<Icon
|
||||
class="when-dark"
|
||||
name="material-symbols:dark-mode"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<HorizontalLine />
|
||||
|
||||
<NavOptionIcon
|
||||
href="/library"
|
||||
icon="material-symbols:auto-stories"
|
||||
title="Library"
|
||||
subtitle="Browse all physical and digital media"
|
||||
/>
|
||||
|
||||
<NavOptionIcon
|
||||
href="/contents"
|
||||
icon="material-symbols:workspaces"
|
||||
title="Content"
|
||||
subtitle="Explore all content and filter by type or category"
|
||||
/>
|
||||
|
||||
<NavOptionIcon
|
||||
href="/wiki"
|
||||
icon="material-symbols:travel-explore"
|
||||
title="Wiki"
|
||||
subtitle="An encyclopedia for everything related to DrakeNieR"
|
||||
/>
|
||||
|
||||
<NavOptionIcon
|
||||
href="/chronicles"
|
||||
icon="material-symbols:schedule"
|
||||
title="Chronicles"
|
||||
subtitle="Experience all events and content in chronological order"
|
||||
/>
|
||||
|
||||
<HorizontalLine />
|
||||
|
||||
<NavOptionIcon href="/news" icon="material-symbols:newspaper" title="News" />
|
||||
|
||||
<NavOptionIcon
|
||||
href="https://gallery.accords-library.com/posts/"
|
||||
icon="material-symbols:perm-media"
|
||||
title="Gallery"
|
||||
/>
|
||||
|
||||
<NavOptionIcon href="/archives" icon="material-symbols:save" title="Archives" />
|
||||
|
||||
<NavOptionIcon href="/about-us" icon="material-symbols:info" title="About us" />
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
|
||||
<style>
|
||||
#accords-logo {
|
||||
width: 3rem;
|
||||
aspect-ratio: 1/1;
|
||||
color: var(--color-base-1000);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-base-600);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > #theme-toggle.dark > .when-light,
|
||||
& > #theme-toggle.light > .when-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{
|
||||
/* -------------------------------------------- JS -------------------------------------------- */
|
||||
}
|
||||
|
||||
<script>
|
||||
import tippy, { createSingleton } from "tippy.js";
|
||||
import { onLoad } from "utils/turbo";
|
||||
|
||||
onLoad(() => {
|
||||
createSingleton(
|
||||
tippy(".menu-panel-content > [data-tippy-template]", {
|
||||
content: (reference) => {
|
||||
const templateQuery = reference.getAttribute("data-tippy-template")!;
|
||||
const template = reference.querySelector(templateQuery)!;
|
||||
const container = document.createElement("div");
|
||||
container.append(template.cloneNode(true));
|
||||
container.style.fontSize = "90%";
|
||||
return container;
|
||||
},
|
||||
}),
|
||||
{
|
||||
allowHTML: true,
|
||||
placement: "right",
|
||||
delay: 250,
|
||||
moveTransition: "transform 0.2s ease",
|
||||
maxWidth: "18rem",
|
||||
inertia: true,
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -12,25 +12,29 @@ const { title, showSubPanel } = Astro.props;
|
|||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
|
||||
<button id="toggle-menu-panel">
|
||||
<Icon
|
||||
class="when-off"
|
||||
name="material-symbols:menu-rounded"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<Icon
|
||||
class="when-on"
|
||||
name="material-symbols:close-rounded"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</button>
|
||||
<div>
|
||||
<button id="toggle-menu-panel" class="when-js">
|
||||
<Icon
|
||||
class="when-off"
|
||||
name="material-symbols:menu-rounded"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<Icon
|
||||
class="when-on"
|
||||
name="material-symbols:close-rounded"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p>{title}</p>
|
||||
|
||||
<div>
|
||||
{
|
||||
showSubPanel && (
|
||||
<button id="toggle-sub-panel">
|
||||
<button id="toggle-sub-panel" class="when-js">
|
||||
<Icon
|
||||
class="when-off"
|
||||
name="material-symbols:tune-rounded"
|
||||
|
|
|
|||
|
|
@ -26,6 +26,16 @@ const themeColors = parseCookie(
|
|||
<link href="/css/sanitize.min.css" rel="stylesheet" />
|
||||
<link href="/css/tippy.css" rel="stylesheet" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<noscript>
|
||||
<style>
|
||||
.when-js {
|
||||
display: none !important;
|
||||
}
|
||||
.when-no-js {
|
||||
display: initial !important;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
</head>
|
||||
|
||||
<body class={themeColors}>
|
||||
|
|
@ -33,6 +43,10 @@ const themeColors = parseCookie(
|
|||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
Turbo.setProgressBarDelay(0);
|
||||
</script>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
|
|
@ -376,8 +390,21 @@ const themeColors = parseCookie(
|
|||
}
|
||||
|
||||
.turbo-progress-bar {
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
background-color: #b07751;
|
||||
z-index: 2147483647;
|
||||
transition:
|
||||
width 1000ms ease-out,
|
||||
opacity 500ms 500ms ease-in;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.when-no-js {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@ interface Props {
|
|||
icon?: string;
|
||||
title: string | null | undefined;
|
||||
subtitle?: string | null | undefined;
|
||||
mode?: "iconOnly" | "default";
|
||||
}
|
||||
|
||||
const { locale } = Astro.params;
|
||||
const { href, icon, title, subtitle } = Astro.props;
|
||||
const { href, icon, title, subtitle, mode = "default" } = Astro.props;
|
||||
|
||||
const currentPath = new URL(Astro.request.url).pathname.slice(
|
||||
`/${locale}`.length
|
||||
|
|
@ -23,12 +24,12 @@ const isActive = currentPath.startsWith(href);
|
|||
}
|
||||
|
||||
<a
|
||||
id="component"
|
||||
href={getLocalizedUrl(href, locale)}
|
||||
class:list={{ active: isActive }}
|
||||
data-tippy-template="#text-content"
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
<div id="text-content">
|
||||
<div id="text-content" class:list={{ hidden: mode === "iconOnly" }}>
|
||||
<p class="font-headers">
|
||||
{title}
|
||||
</p>
|
||||
|
|
@ -41,7 +42,7 @@ const isActive = currentPath.startsWith(href);
|
|||
}
|
||||
|
||||
<style>
|
||||
#component {
|
||||
a {
|
||||
padding: 1rem;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
|
|
@ -71,12 +72,8 @@ const isActive = currentPath.startsWith(href);
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@container (max-width: 15rem) {
|
||||
width: 3.5rem;
|
||||
|
||||
& > #text-content {
|
||||
display: none;
|
||||
}
|
||||
& > #text-content.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { getLocalizedUrl } from "utils/urls";
|
||||
interface Props {
|
||||
href: string;
|
||||
icon?: string;
|
||||
title: string | null | undefined;
|
||||
subtitle?: string | null | undefined;
|
||||
}
|
||||
|
||||
const { locale } = Astro.params;
|
||||
const { href, icon, title, subtitle } = Astro.props;
|
||||
|
||||
const currentPath = new URL(Astro.request.url).pathname.slice(
|
||||
`/${locale}`.length
|
||||
);
|
||||
|
||||
const isActive = currentPath.startsWith(href);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
|
||||
<a
|
||||
id="component"
|
||||
href={getLocalizedUrl(href, locale)}
|
||||
class:list={{ active: isActive }}
|
||||
data-tippy-template="#text-content"
|
||||
>
|
||||
{icon && <Icon name={icon} />}
|
||||
<div id="text-content">
|
||||
<p class="font-headers">
|
||||
{title}
|
||||
</p>
|
||||
{subtitle && <p>{subtitle}</p>}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
|
||||
<style>
|
||||
#component {
|
||||
padding: 1rem;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 1.25rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
transition:
|
||||
0.15s background-color,
|
||||
0.15s box-shadow;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
box-shadow: inset 0 1px 4px -2px var(--color-shadow);
|
||||
background-color: var(--color-base-250);
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 2px 4px 0 var(--color-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
& > svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& > #text-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#text-content {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
gap: 0.25rem;
|
||||
|
||||
& > .font-headers {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
& > :not(.font-headers) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
// https://turbo.hotwired.dev/reference/drive
|
||||
declare namespace Turbo {
|
||||
const cache = {
|
||||
clear: () => null,
|
||||
const cache: {
|
||||
clear: () => void;
|
||||
};
|
||||
const setProgressBarDelay: (delayInMs: number) => void;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue