Skip to content

Just Add style for footer is not end page #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KirobotDev wants to merge 1 commit into
base: new
Choose a base branch
from
Open

Just Add style for footer is not end page #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 22 additions & 16 deletions src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const {
image,
lang = "en",
ogType = "website",
hideFooter = false,
} = Astro.props;

const site = Astro.site ?? new URL(Astro.url.origin);
Expand All @@ -20,9 +21,11 @@ const metaDescription =
const pageTitle = title.includes("Legcord") ? title : `${title} | Legcord`;

let pathname = Astro.url.pathname;
if (pathname.length > 1 && pathname.endsWith("/")) pathname = pathname.slice(0, -1);
if (pathname.length > 1 && pathname.endsWith("/"))
pathname = pathname.slice(0, -1);
const canonicalPath = canonicalProp ?? (pathname || "/");
const canonicalURL = new URL(canonicalPath === "/" ? "/" : canonicalPath, site).href;
const canonicalURL = new URL(canonicalPath === "/" ? "/" : canonicalPath, site)
.href;

const ogImagePath = image ?? "/logo.png";
const ogImageURL = new URL(ogImagePath, site).href;
Expand Down Expand Up @@ -51,42 +54,45 @@ const ogImageURL = new URL(ogImagePath, site).href;
<meta name="twitter:description" content={metaDescription} />
<meta name="twitter:image" content={ogImageURL} />
<title>{pageTitle}</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<slot name="head" />
</head>
<body class="min-h-screen bg-slate-950 text-white">
<Header />
<main class="pt-20 flex-1">
<slot />
</main>
<Footer />
{!hideFooter && <Footer />}
<script>
document.querySelectorAll('[data-modal-target]').forEach((el) => {
el.addEventListener('click', () => {
const modalId = el.getAttribute('data-modal-target');
document.querySelectorAll("[data-modal-target]").forEach((el) => {
el.addEventListener("click", () => {
const modalId = el.getAttribute("data-modal-target");
if (!modalId) return;
const modal = document.getElementById(modalId);
if (modal) modal.classList.remove('hidden');
if (modal) modal.classList.remove("hidden");
});
});

document.querySelectorAll('[id^="modal-"]').forEach((modal) => {
const closeButton = modal.querySelector('button');
const closeButton = modal.querySelector("button");
if (closeButton) {
closeButton.addEventListener('click', () => {
modal.classList.add('hidden');
closeButton.addEventListener("click", () => {
modal.classList.add("hidden");
});
}

modal.addEventListener('click', (e) => {
if (e.target === modal) modal.classList.add('hidden');
modal.addEventListener("click", (e) => {
if (e.target === modal) modal.classList.add("hidden");
});
});

document.addEventListener('keydown', (e) => {
if (e.key !== 'Escape') return;
document.addEventListener("keydown", (e) => {
if (e.key !== "Escape") return;
document.querySelectorAll('[id^="modal-"]').forEach((modal) => {
modal.classList.add('hidden');
modal.classList.add("hidden");
});
});
</script>
Expand Down
37 changes: 33 additions & 4 deletions src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,49 @@ import BaseLayout from "@layouts/BaseLayout.astro";
title="Page Not Found – Legcord"
description="The page you are looking for does not exist. Return to the Legcord homepage."
canonical="/404"
hideFooter={true}
>
<div class="flex flex-col items-center justify-center min-h-[60vh] px-4 text-center">
<span class="text-8xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-200 to-purple-300">404</span>
<div
class="flex flex-col items-center justify-center min-h-[60vh] px-4 text-center"
>
<span
class="text-8xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-200 to-purple-300"
>404</span
>
<h1 class="text-3xl font-bold text-white mt-6 mb-4">Page Not Found</h1>
<p class="text-gray-400 text-lg max-w-md mb-8">
The page you are looking for does not exist or has been moved.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="/" class="inline-flex items-center justify-center rounded-full bg-white px-8 py-3 text-base font-semibold text-blue-700 shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition">
<a
href="/"
class="inline-flex items-center justify-center rounded-full bg-white px-8 py-3 text-base font-semibold text-blue-700 shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition"
>
Go Home
</a>
<a href="/download" class="inline-flex items-center justify-center rounded-full border border-white/20 px-8 py-3 text-base font-semibold text-white hover:bg-white/10 transition">
<a
href="/download"
class="inline-flex items-center justify-center rounded-full border border-white/20 px-8 py-3 text-base font-semibold text-white hover:bg-white/10 transition"
>
Download Legcord
</a>
</div>
</div>
<footer class="border-t border-white/10 bg-slate-950/40" style="position: relative; top: 7rem;">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col items-center gap-6">
<ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
<li><a href="/download" class="text-sm font-medium text-white/65 hover:text-white transition">Download</a></li>
<li><a href="/" class="text-sm font-medium text-white/65 hover:text-white transition">Features</a></li>
<li><a href="/faq" class="text-sm font-medium text-white/65 hover:text-white transition">FAQ</a></li>
<li><a href="https://github.com/Legcord/Legcord" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-white/65 hover:text-white transition">GitHub</a></li>
<li><a href="https://discord.gg/TnhxcqynZ2" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-white/65 hover:text-white transition">Discord</a></li>
</ul>
<div class="text-center text-xs text-white/55 leading-relaxed">
<p>Discord is a trademark of Discord Inc. Legcord is not affiliated with or endorsed by Discord Inc.</p>
<p>Legcord is not affiliated with or endorsed by ARM Limited.</p>
</div>
</div>
</div>
</footer>
</BaseLayout>