generated from darkicewolf50/ssg-sveltekit-template
feat(layout): converted over header and footer to sveltekit from dioxus
This commit is contained in:
@ -6,7 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover" style="margin: 0px">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -2,10 +2,107 @@
|
|||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header></header>
|
<header>
|
||||||
|
<nav>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
<a href="/projects">Projects</a>
|
||||||
|
<a href="/blogs/0">Blogs</a>
|
||||||
|
<a href="/contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
{@render children()}
|
{@render children()}
|
||||||
|
|
||||||
<footer></footer>
|
<footer>
|
||||||
|
<p>Brock Tomlinson © 2025</p>
|
||||||
|
<div>
|
||||||
|
<a href="mailto:darkicewolf50@gmail.com">
|
||||||
|
<img src="https://www.svgrepo.com/show/491226/email.svg" alt="Email's logo/icon" />
|
||||||
|
<p>Email</p>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.youtube.com/@darkicewolf50">
|
||||||
|
<img src="https://www.svgrepo.com/show/521936/youtube.svg" alt="Youtube's logo/icon" />
|
||||||
|
<p>Youtube</p>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/in/brock-tomlinson/">
|
||||||
|
<img src="https://www.svgrepo.com/show/521725/linkedin.svg" alt="LinkedIn's logo/icon" />
|
||||||
|
<p>LinkedIn</p>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.twitch.tv/darkicewolf50">
|
||||||
|
<img src="https://www.svgrepo.com/show/519925/twitch.svg" alt="Twitch's logo/icon" />
|
||||||
|
<p>Twitch</p>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/darkicewolf50">
|
||||||
|
<img src="https://www.svgrepo.com/show/512317/github-142.svg" alt="Github's logo/icon" />
|
||||||
|
<p>Github</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<style></style>
|
<style>
|
||||||
|
:root {
|
||||||
|
--card-background-color: rgba(38, 38, 38, 0.5);
|
||||||
|
--card-border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
:global(body) {
|
||||||
|
background-color: #0f1116;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: #ffffff;
|
||||||
|
margin-right: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #91a4d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
background-color: var(--card-background-color);
|
||||||
|
border-radius: var(--card-border-radius);
|
||||||
|
|
||||||
|
/* background-color: #d3d3d3; */
|
||||||
|
}
|
||||||
|
|
||||||
|
footer div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1 1 2;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer img {
|
||||||
|
height: 60px;
|
||||||
|
filter: invert() hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover {
|
||||||
|
color: #91a4d2;
|
||||||
|
cursor: pointer;
|
||||||
|
filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) hue-rotate(187deg)
|
||||||
|
brightness(95%) contrast(90%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
0
src/routes/blog/[slug]/+page.svelte
Normal file
0
src/routes/blog/[slug]/+page.svelte
Normal file
0
src/routes/blogs/[slugs]/+page.svelte
Normal file
0
src/routes/blogs/[slugs]/+page.svelte
Normal file
0
src/routes/contact/+page.svelte
Normal file
0
src/routes/contact/+page.svelte
Normal file
0
src/routes/projects/+page.svelte
Normal file
0
src/routes/projects/+page.svelte
Normal file
@ -1,13 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { page } from '$app/state';
|
|
||||||
|
|
||||||
console.log(page.status);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<title>The Red Deer Market - Page Not Found</title>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1>{page.status} Page not found</h1>
|
|
||||||
<p>We are terribly sorry, but the page you requested doesn't exist.</p>
|
|
||||||
<a href="/"><button>Return Home Here</button></a>
|
|
||||||
</div>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export const prerender = true;
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export const prerender = true;
|
|
||||||
@ -1,184 +0,0 @@
|
|||||||
<script>
|
|
||||||
import FreeSite from '$lib/components/FreeSite.svelte';
|
|
||||||
import redDeerMarketLogo from '$lib/static/Red-Deer-Logo.webp';
|
|
||||||
|
|
||||||
const date = new Date();
|
|
||||||
|
|
||||||
let { children } = $props();
|
|
||||||
let isDropdownVisible = $state(false);
|
|
||||||
|
|
||||||
//makes the drop down menu visible when the mouse enters the Club Membership & Upcoming events button area
|
|
||||||
function handleMouseEnter() {
|
|
||||||
isDropdownVisible = true;
|
|
||||||
}
|
|
||||||
//makes the drop down menu invisible when the mouse leaves the Club Membership & Upcoming events button area
|
|
||||||
function handleMouseLeave() {
|
|
||||||
isDropdownVisible = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<meta name="keywords" content="Farmer's Market Red Deer" />
|
|
||||||
<!-- <meta name="author" content=""> -->
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<a href="/">
|
|
||||||
<img src={redDeerMarketLogo} alt="Red Deer Market logo" />
|
|
||||||
</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/market-history">Market History</a></li>
|
|
||||||
|
|
||||||
<li onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave} class="dropdown">
|
|
||||||
<a class="dropdown-header" href="/customer-faqs">FAQs</a>
|
|
||||||
<ul class="hide">
|
|
||||||
<li><a href="/customer-faqs">Customer FAQs</a></li>
|
|
||||||
<li><a href="/vendor-faqs">Vendor FAQs</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li><a href="/gallery">Gallery</a></li>
|
|
||||||
<li><a href="/contact-us">Contact Us</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{@render children()}
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>The Original Market at Red Deer {date.getFullYear()}</p>
|
|
||||||
<a href="https://g.co/kgs/hpy3hnb">
|
|
||||||
<p>Location: 100 Donald Blvd, Red Deer, AB T4N 5H5</p>
|
|
||||||
</a>
|
|
||||||
<div>
|
|
||||||
<a href="https://www.facebook.com/Marketatreddeer/">
|
|
||||||
<img src="https://www.svgrepo.com/show/452196/facebook-1.svg" alt="Facebook icon" />
|
|
||||||
Facebook
|
|
||||||
</a>
|
|
||||||
<a href="https://g.co/kgs/hpy3hnb">
|
|
||||||
<img
|
|
||||||
src="https://www.svgrepo.com/show/375444/google-maps-platform.svg"
|
|
||||||
alt="Google Maps icon"
|
|
||||||
/>
|
|
||||||
Google Maps
|
|
||||||
</a>
|
|
||||||
<a href="https://google.com">
|
|
||||||
<img src="https://www.svgrepo.com/show/491226/email.svg" alt="Email icon" />
|
|
||||||
Email
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<FreeSite />
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--nav-background-colour: rgb(101, 140, 96);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
background-color: var(--nav-background-colour);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding-left: 2svw;
|
|
||||||
overflow: visible;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
list-style-type: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
margin: 0svh auto;
|
|
||||||
padding: 0px;
|
|
||||||
column-gap: 1svw;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid white;
|
|
||||||
align-items: center;
|
|
||||||
padding: 2svh 1svw;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul a:hover {
|
|
||||||
background-color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li ul {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav img {
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
text-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown a {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 130px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide {
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
background-color: var(--nav-background-colour);
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* makes dropdown visible */
|
|
||||||
.dropdown:hover .hide {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
background-color: rgba(34, 34, 34, 0.9);
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
row-gap: 2svh;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-self: stretch;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer div a {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer div a img {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<title>The Red Deer Market - Home</title>
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Welcome to the home page of Red Deer Market. Proudly celebrating its 55th year. Great vendors and wonderful customers. See you at the Market!"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<h1>Welcome to SvelteKit</h1>
|
|
||||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
|
||||||
Reference in New Issue
Block a user