-
-
{props.icon}
-
{props.title}
- {props.subtitle &&
{props.subtitle}
}
-
-
- );
+ if (props.reduced) {
+ return (
+
+
+ {props.icon}
+
+
+ );
+ } else {
+ return (
+
+
+
{props.icon}
+
{props.title}
+ {props.subtitle &&
{props.subtitle}
}
+
+
+ );
+ }
} else {
return (
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 94746ec..3b2d209 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -10,38 +10,64 @@ import Markdown from "markdown-to-jsx";
type MainPanelProps = {
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
setLanguagePanelOpen: Function;
+ reduced: boolean;
};
export default function MainPanel(props: MainPanelProps): JSX.Element {
const langui = props.langui;
const router = useRouter();
+ const reduced = props.reduced;
+
return (
-
-
+ {reduced ? (
+
-
+
-
props.setLanguagePanelOpen(true)}>
- {router.locale ? (
-
- ) : (
- ""
- )}
-
Accord’s Library
+ {router.locale ? (
+
props.setLanguagePanelOpen(true)}>
+
+
+ ) : (
+ ""
+ )}
+
+ ) : (
+
+
+
+
+
+
+
+
props.setLanguagePanelOpen(true)}
+ >
+ {router.locale ? (
+
+ ) : (
+ ""
+ )}
+
Accord’s Library
+
-
+ )}
@@ -50,6 +76,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
icon="library_books"
title={langui.main_library}
subtitle={langui.main_library_description}
+ reduced={reduced}
/>
-
-
+
+
+
+
+
-
-
+
-
+ {reduced ? "" :
}
+
+
{langui.main_licensing ? (
{langui.main_licensing}
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..af83360
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+export default function useMediaQuery(query: string): boolean {
+ const getMatches = (query: string): boolean => {
+ // Prevents SSR issues
+ if (typeof window !== "undefined") {
+ return window.matchMedia(query).matches;
+ }
+ return false;
+ };
+
+ const [matches, setMatches] = useState(getMatches(query));
+
+ function handleChange() {
+ setMatches(getMatches(query));
+ }
+
+ useEffect(() => {
+ const matchMedia = window.matchMedia(query);
+
+ // Triggered at the first client-side load and if query changes
+ handleChange();
+
+ // Listen matchMedia
+ matchMedia.addEventListener("change", handleChange);
+
+ return () => {
+ matchMedia.removeEventListener("change", handleChange);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [query]);
+
+ return matches;
+}
+
+export function useMediaThin() {
+ return useMediaQuery("(max-width: 50ch)");
+}
+
+export function useMediaMobile() {
+ return useMediaQuery("(max-width: 150ch)");
+}
+
+export function useMediaDesktop() {
+ return useMediaQuery("(min-width: 150ch)");
+}
+
diff --git a/src/tailwind.css b/src/tailwind.css
index f8d407c..b06e320 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -56,6 +56,18 @@
.prose {
--tw-prose-bullets: theme("colors.dark") !important;
+ --tw-prose-quote-borders: theme("colors.dark") !important;
}
+ .prose footer {
+ @apply border-t-[3px] border-dotted pt-6;
+ }
+
+ .prose footer > div {
+ @apply my-2 px-6 py-4 rounded-xl;
+ }
+
+ .prose footer > div:target {
+ @apply bg-mid shadow-inner-sm shadow-dark;
+ }
}