Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-05-22 19:34:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Start on Footer Design

Browse source 
Clean up some pages
Make style a bit less similar to BurgerKing... oops...
dab.jpg
This commit is contained in:
Michał Gdula 2024-04-23 18:45:40 +01:00
parent b56c3cc46d
commit 7907972e1c
13 changed files with 325 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

91
front/src/pages/PageIndex.svelte
View file

@ -1,38 +1,93 @@
<script>
import { link } from 'svelte-spa-router';
import { ArrowUpRight } from "phosphor-svelte";
import AnnouncementBanner from "%/pages/components/AnnouncementBanner.svelte";
import MenuList from "%/pages/components/MenuList.svelte";
const items = [
{name: "Breakfast", price: 69.99},
{name: "Dinner", price: 21},
{name: "Brick", price: 0},
{name: "Toast", price: 4382749832743},
{name: "water", price: 1},
{name: "half eaten mouldy bread", price: -9999},
{
name: "Breakfast",
price: 69.99,
labels: ["vegan", "spicy",],
},
{
name: "Dinner",
price: 21,
labels: ["vegan", "fish", "nut", "spicy",],
},
{
name: "Brick",
price: 0,
labels: ["spicy",],
},
{
name: "Toast",
price: 4382749832743,
},
{
name: "water",
price: 1,
labels: ["fish"],
},
{
name: "half eaten mouldy bread",
price: -9999,
labels: ["nut"],
},
{
name: "GwaGwa",
price: "Priceless",
labels: ["nut"],
image: "/dab.jpg",
}
];
</script>
<AnnouncementBanner />
<a href="/annoucements" use:link style="float: right">Learn More</a>
<div>
<AnnouncementBanner />
<a href="/annoucements" use:link style="float: right">Learn More <ArrowUpRight /></a>
<div class="spacer"></div>
<div class="spacer"></div>
<h2>Popular Today</h2>
<MenuList {items} />
<a href="/menu" use:link style="float: right">See All <ArrowUpRight /></a>
<div class="spacer"></div>
<h2>Menu</h2>
<MenuList {items} />
<a href="/menu" use:link style="float: right">See All</a>
<div class="spacer"></div>
<h2>About Us</h2>
<p>Want to know the story of the restaurant?</p>
<a href="/about" use:link style="float: right">Continue reading</a>
<h2>About Us</h2>
<p>Want to know the story of the restaurant?</p>
<a href="/about" use:link style="float: right">Continue reading <ArrowUpRight /></a>
</div>
<style lang="scss">
h2 {
margin-bottom: 16px;
}
.spacer {
height: 100px;
}
a {
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 9999px;
background-color: transparent;
color: #33251a;
&:hover {
background-color: #fffbf4;
color: #33251a;
}
}
</style>