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" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" style="margin: 0px">
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,10 +2,107 @@
|
||||
let { children } = $props();
|
||||
</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()}
|
||||
|
||||
<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