mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2025-06-19 00:20:36 +00:00
Create Container style
Make some styles for mobile Create Logo for the website Clean up styles for the millionth time
This commit is contained in:
parent
7b4a40c861
commit
e8493d53f8
14 changed files with 199 additions and 153 deletions
|
|
@ -1,2 +1,18 @@
|
|||
<script>
|
||||
import { link } from 'svelte-spa-router';
|
||||
</script>
|
||||
|
||||
<h1>Shopping Cart</h1>
|
||||
<p>Empty....</p>
|
||||
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<p>Empty....</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<p>Looking past orders? Check out the <a href="/contact" use:link>commonly asked questions</a></p>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -4,22 +4,25 @@
|
|||
|
||||
<h1>Contact us</h1>
|
||||
|
||||
<div class="menu-filter">
|
||||
<div class="menu-filter-header">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2>Commonly Asked Questions</h2>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<div class="section">
|
||||
<DropDown name="Can I refund my order?">
|
||||
<p>If you ordered online, if we haven't started making your food yet, a refund is possible.</p>
|
||||
<p>If you reserved a table, you can refund upto 1 hour before your time.</p>
|
||||
</DropDown>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<div class="section">
|
||||
<DropDown name="Where can I find my past orders!">
|
||||
<p>Email....</p>
|
||||
</DropDown>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="section">
|
||||
<DropDown name="Deez nuts">
|
||||
<p>Gottem</p>
|
||||
</DropDown>
|
||||
|
|
@ -29,46 +32,6 @@
|
|||
<div class="spacer"></div>
|
||||
|
||||
<h2>Contact From</h2>
|
||||
<form>
|
||||
|
||||
<style lang="scss">
|
||||
@import "%/styles/vars";
|
||||
|
||||
h1, h2 {
|
||||
margin-bottom: $spacing-small;
|
||||
}
|
||||
.spacer {
|
||||
height: $spacing-large;
|
||||
}
|
||||
|
||||
.menu-filter {
|
||||
border-radius: $border-radius-normal;
|
||||
background-image: url('/BackgroundTextureAlt.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200px 250px;
|
||||
background-position: 5px -43px;
|
||||
background-color: $color-light;
|
||||
color: $color-on-light;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: 0 transparent;
|
||||
background-color: rgba($color-dark, 0.1);
|
||||
}
|
||||
|
||||
.menu-filter-header {
|
||||
padding: $spacing-normal;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-filter-section {
|
||||
padding: $spacing-normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</form>
|
||||
|
|
@ -29,13 +29,14 @@
|
|||
|
||||
<div>
|
||||
<AnnouncementBanner />
|
||||
<a href="/annoucements" use:link style="float: right">Learn More <ArrowUpRight /></a>
|
||||
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
|
||||
<div class="spacer"></div>
|
||||
|
||||
<h2>Where to find us</h2>
|
||||
<div class="contact">
|
||||
<div id="contact">
|
||||
<div id="map"></div>
|
||||
<div class="contact-detail">
|
||||
<div class="container">
|
||||
<h2>Some Title</h2>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis dolore maiores, dolorem unde, illo vero dolores magnam omnis, explicabo vel eos voluptatem libero ullam ipsa molestias laboriosam voluptas nisi sunt.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,40 +44,17 @@
|
|||
|
||||
<h2>Popular Today</h2>
|
||||
<MenuList {items} />
|
||||
<a href="/menu" use:link style="float: right">See All <ArrowUpRight /></a>
|
||||
<a href="/menu" use:link>See All <ArrowUpRight /></a>
|
||||
<div class="spacer"></div>
|
||||
|
||||
<h2>About Us</h2>
|
||||
<h2>About Us</h2>contact
|
||||
<p>Want to know the story of the restaurant?</p>
|
||||
<a href="/about" use:link style="float: right">Continue reading <ArrowUpRight /></a>
|
||||
<a href="/about" use:link>Continue reading <ArrowUpRight /></a>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import "%/styles/vars";
|
||||
|
||||
h2 {
|
||||
margin-bottom: $spacing-small;
|
||||
}
|
||||
.spacer {
|
||||
height: $spacing-large;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
#map {
|
||||
min-width: 600px;
|
||||
height: 400px;
|
||||
|
||||
border-radius: $border-radius-normal;
|
||||
}
|
||||
|
||||
.contact-detail {
|
||||
padding-left: $spacing-normal;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: 8px;
|
||||
|
||||
|
|
@ -89,6 +67,8 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
float: right;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border-radius: 9999px;
|
||||
|
|
@ -100,4 +80,43 @@
|
|||
color: $color-on-light;
|
||||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.container {
|
||||
margin-left: $spacing-normal;
|
||||
padding: $spacing-normal;
|
||||
}
|
||||
}
|
||||
|
||||
#map {
|
||||
min-width: 550px;
|
||||
height: 350px;
|
||||
|
||||
border-radius: $border-radius-normal;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
#map {
|
||||
min-width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 750px) {
|
||||
#contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.container {
|
||||
margin-left: 0;
|
||||
margin-top: $spacing-normal;
|
||||
}
|
||||
}
|
||||
#map {
|
||||
min-width: unset;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,13 @@
|
|||
</script>
|
||||
|
||||
<div class="menu">
|
||||
<div class="menu-filter">
|
||||
<div class="menu-filter-header">
|
||||
<div class="container" id="filter">
|
||||
<div class="header">
|
||||
<h2>Filters</h2>
|
||||
<button><ArrowClockwise /></button>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<div class="section">
|
||||
<DropDown name="Meal Prefrences" open={true}>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -39,10 +38,8 @@
|
|||
</ul>
|
||||
</DropDown>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<div class="section">
|
||||
<DropDown name="Allergies" open={true}>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -72,10 +69,8 @@
|
|||
</ul>
|
||||
</DropDown>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<div class="section">
|
||||
<DropDown name="Meal Types" open={true}>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -124,8 +119,7 @@
|
|||
</DropDown>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<div class="section">
|
||||
<DropDown name="Other">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -151,7 +145,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-list">
|
||||
<div id="menu-list">
|
||||
<h2>Main Menu</h2>
|
||||
<MenuList items={items} />
|
||||
<div class="spacer"></div>
|
||||
|
|
@ -168,13 +162,6 @@
|
|||
<style lang="scss">
|
||||
@import "%/styles/vars";
|
||||
|
||||
h2 {
|
||||
margin-bottom: $spacing-small;
|
||||
}
|
||||
.spacer {
|
||||
height: $spacing-large;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -182,35 +169,17 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
#menu-list {
|
||||
padding-left: $spacing-normal;
|
||||
}
|
||||
|
||||
.menu-filter {
|
||||
#filter {
|
||||
min-width: calc(300px - $spacing-normal);
|
||||
width: 100%;
|
||||
max-width: calc(300px - $spacing-normal);
|
||||
|
||||
position: sticky;
|
||||
top: calc($sizing-navigation-height + $spacing-normal);
|
||||
|
||||
border-radius: $border-radius-normal;
|
||||
background-image: url('/BackgroundTextureAlt.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200px 250px;
|
||||
background-position: 5px -43px;
|
||||
background-color: $color-light;
|
||||
color: $color-on-light;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: 0 transparent;
|
||||
background-color: rgba($color-dark, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
|
@ -232,18 +201,6 @@
|
|||
color: $color-on-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-filter-header {
|
||||
padding: $spacing-normal;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-filter-section {
|
||||
padding: $spacing-normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 670px) {
|
||||
|
|
@ -251,14 +208,14 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-normal;
|
||||
}
|
||||
|
||||
.menu-filter {
|
||||
#filter {
|
||||
max-width: unset;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
#menu-list {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import LoadingBar from "%/pages/elements/LoadingBar.svelte";
|
||||
// import LoadingBar from "%/pages/elements/LoadingBar.svelte";
|
||||
import LoadingImage from '/BannerLoading.svg';
|
||||
</script>
|
||||
|
||||
<div class="announcement-banner">
|
||||
<LoadingBar bottom={true} />
|
||||
<!-- <LoadingBar bottom={true} />-->
|
||||
<img src={LoadingImage} alt="">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import { link } from 'svelte-spa-router';
|
||||
import active from 'svelte-spa-router/active'
|
||||
import Logo from '/LogoAlt.svg';
|
||||
|
||||
export let scrolled = false;
|
||||
</script>
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<span>TastyBites</span>
|
||||
<span><img src={Logo} alt="TastyBites"></span>
|
||||
|
||||
<ul style="justify-content: flex-start">
|
||||
<li use:active={{path: '/contact', className: 'active'}}>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,26 @@
|
|||
.announcement-banner {
|
||||
padding: $spacing-large;
|
||||
|
||||
height: 400px;
|
||||
position: relative;
|
||||
|
||||
border-radius: $border-radius-normal;
|
||||
background-color: $color-light;
|
||||
color: $color-on-light;
|
||||
//border: 1px solid $color-dark;
|
||||
border-radius: $border-radius-normal;
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 400%;
|
||||
|
||||
display: block;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 670px) {
|
||||
.announcement-banner {
|
||||
margin: -$spacing-normal;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
25
front/src/styles/_container.scss
Normal file
25
front/src/styles/_container.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
.container {
|
||||
border-radius: $border-radius-normal;
|
||||
background-image: url('/BackgroundTextureAlt.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200px 250px;
|
||||
background-position: 5px -43px;
|
||||
background-color: $color-light;
|
||||
color: $color-on-light;
|
||||
|
||||
.header {
|
||||
padding: $spacing-normal;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: $spacing-normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
nav {
|
||||
padding: $spacing-normal;
|
||||
padding: $spacing-small;
|
||||
|
||||
width: 100%;
|
||||
height: $sizing-navigation-height;
|
||||
|
|
@ -51,6 +51,13 @@ nav {
|
|||
padding: 0 $spacing-normal;
|
||||
font-weight: $font-weight-black;
|
||||
font-size: $font-size-h1;
|
||||
|
||||
> img {
|
||||
height: calc($sizing-navigation-height - calc(2 * $spacing-small));
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.scrolled {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@ body {
|
|||
color: $color-on-background;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
padding-bottom: $spacing-small;
|
||||
}
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
font-weight: $font-weight-bolder;
|
||||
|
|
@ -53,6 +57,15 @@ small {
|
|||
font-weight: $font-weight-thin;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: 0 transparent;
|
||||
background-color: rgba($color-dark, 0.1);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: $spacing-large;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: auto;
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@
|
|||
@import "loading_bar";
|
||||
@import "navigation_bar";
|
||||
@import "announcement_banner";
|
||||
@import "container";
|
||||
@import "menu_item";
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default Items = [
|
|||
name: "GwaGwa",
|
||||
price: "Priceless",
|
||||
labels: ["nut"],
|
||||
image: "/dab.jpg",
|
||||
// image: "/dab.jpg",
|
||||
},
|
||||
{
|
||||
name: "Hogermellon",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue