Korbs/Glee-Mirror
1
Fork 0
Code Issues Pull requests Activity

Add configuration for Header and Footer to use

Browse source
This commit is contained in:
Korbs 2025-03-13 20:59:33 -04:00
parent f8bfd97a1e
commit f90bb0165b
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
3 changed files with 82 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/global/Footer.astro
View file

@ -1,9 +1,15 @@
---
// Configuration
import { Meta, Menu, Logo } from "../../../config.json"
---
<footer>
<div class="footer-top">
<div class="top-footer-start">
<img src="/logo.png"/>
<h2>Company Name</h2>
<p>A company slogan goes here.</p>
<img class="footer-site-logo light" src={Logo.FooterLight}/>
<img class="footer-site-logo dark" src={Logo.FooterDark}/>
<h2>{Meta.Name}</h2>
<p>{Meta.Slogan}</p>
</div>
<div class="top-footer-end">
<div>
@ -29,12 +35,10 @@
</div>
<div class="footer-bottom">
<div class="bottom-footer-start">
<p>© 2025 Company Name LLC</p>
<p>© {Meta.CopyrightDate} {Meta.LegalName}</p>
</div>
<div class="bottom-footer-end">
<a href="#">Legal Document</a>
<a href="#">Privacy Policy</a>
<a href="#">Cookies Policy</a>
{Menu.FooterBottom.map((Link) => <a href={Link.Link}>{Link.Name}</a>)}
</div>
</div>
</footer>
@ -54,8 +58,8 @@ footer {
gap: 24px;
* {margin: 0px}
img {
width: 64px;
height: 64px;
height: 48px;
object-position: left;
object-fit: contain;
}
}
@ -79,7 +83,10 @@ footer {
padding-top: 24px;
.bottom-footer-end {
display: flex;
gap: 12px;
gap: 24px;
a {
text-decoration: none;
}
}
}
}

17
src/components/global/Header.astro
View file

@ -1,17 +1,20 @@
---
// Configuration
import { Meta, Menu, Logo } from "../../../config.json"
---
<header>
<div class="header-start">
<a href="/">
<img class="header-site-logo" src="/logo.png"/>
<h2>Company Name</h2>
<img class="header-site-logo light" src={Logo.HeaderLight}/>
<img class="header-site-logo dark" src={Logo.HeaderDark}/>
<h2>{Meta.Name}</h2>
</a>
</div>
<div class="header-middle">
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
{Menu.Center.map((Link) => <a href={Link.Link}>{Link.Name}</a>)}
</div>
<div class="header-end">
<a href="#">Contact Us</a>
{Menu.End.map((Link) => <a href={Link.Link}>{Link.Name}</a>)}
</div>
</header>