7 files changed, 231 insertions, 0 deletions
diff --git a/frontend/components/styles/CartStyles.js b/frontend/components/styles/CartStyles.js
new file mode 100644
index 0000000..d5ee93a
--- /dev/null
+++ b/frontend/components/styles/CartStyles.js
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+const CartStyles = styled.div`
+  padding: 20px;
+  position: relative;
+  background: white;
+  position: fixed;
+  height: 100%;
+  top: 0;
+  right: 0;
+  width: 40%;
+  min-width: 500px;
+  bottom: 0;
+  transform: translateX(100%);
+  transition: all 0.3s;
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  z-index: 5;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  ${props => props.open && `transform: translateX(0);`};
+  header {
+    border-bottom: 5px solid ${props => props.theme.black};
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+  }
+  footer {
+    border-top: 10px double ${props => props.theme.black};
+    margin-top: 2rem;
+    padding-top: 2rem;
+    display: grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    font-size: 3rem;
+    font-weight: 900;
+    p {
+      margin: 0;
+    }
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: scroll;
+  }
+`;
+
+export default CartStyles;
diff --git a/frontend/components/styles/CloseButton.js b/frontend/components/styles/CloseButton.js
new file mode 100644
index 0000000..69fd55c
--- /dev/null
+++ b/frontend/components/styles/CloseButton.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const CloseButton = styled.button`
+  background: black;
+  color: white;
+  font-size: 3rem;
+  border: 0;
+  position: absolute;
+  z-index: 2;
+  right: 0;
+`;
+
+export default CloseButton;
diff --git a/frontend/components/styles/ItemStyles.js b/frontend/components/styles/ItemStyles.js
new file mode 100644
index 0000000..8ae0836
--- /dev/null
+++ b/frontend/components/styles/ItemStyles.js
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const Item = styled.div`
+  background: white;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  position: relative;
+  display: grid;
+  align-content: start;
+  grid-auto-rows: fit-content;
+  img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+  }
+  p {
+    font-size: 14px;
+    line-height: 2;
+    font-weight: 600;
+    padding: 0 3rem;
+    font-size: 1.5rem;
+  }
+  .buttonList {
+    display: grid;
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-gap: 1px;
+    background: ${props => props.theme.lightgrey};
+    align-self: end;
+    & > * {
+      background: white;
+      border: 0;
+      font-size: 1rem;
+      padding: 1rem;
+    }
+  }
+`;
+
+export default Item;
diff --git a/frontend/components/styles/NavStyles.js b/frontend/components/styles/NavStyles.js
new file mode 100644
index 0000000..41523df
--- /dev/null
+++ b/frontend/components/styles/NavStyles.js
@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+const NavStyles = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-self: end;
+  font-size: 2rem;
+  a,
+  button {
+    padding: 1rem 3rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-transform: uppercase;
+    font-weight: 900;
+    font-size: 1em;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    @media (max-width: 700px) {
+      font-size: 10px;
+      padding: 0 10px;
+    }
+    &:before {
+      content: '';
+      width: 2px;
+      background: ${props => props.theme.lightgrey};
+      height: 100%;
+      left: 0;
+      position: absolute;
+      transform: skew(-20deg);
+      top: 0;
+      bottom: 0;
+    }
+    &:after {
+      height: 2px;
+      background: red;
+      content: '';
+      width: 0;
+      position: absolute;
+      transform: translateX(-50%);
+      transition: width 0.4s;
+      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
+      left: 50%;
+      margin-top: 2rem;
+    }
+    &:hover,
+    &:focus {
+      outline: none;
+      &:after {
+        width: calc(100% - 60px);
+      }
+    }
+  }
+  @media (max-width: 1300px) {
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    width: 100%;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+`;
+
+export default NavStyles;
diff --git a/frontend/components/styles/OrderStyles.js b/frontend/components/styles/OrderStyles.js
new file mode 100644
index 0000000..4a2d804
--- /dev/null
+++ b/frontend/components/styles/OrderStyles.js
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const OrderStyles = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  padding: 2rem;
+  border-top: 10px solid red;
+  & > p {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    margin: 0;
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    span {
+      padding: 1rem;
+      &:first-child {
+        font-weight: 900;
+        text-align: right;
+      }
+    }
+  }
+  .order-item {
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    align-items: center;
+    grid-gap: 2rem;
+    margin: 2rem 0;
+    padding-bottom: 2rem;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+`;
+export default OrderStyles;
diff --git a/frontend/components/styles/PriceTag.js b/frontend/components/styles/PriceTag.js
new file mode 100644
index 0000000..9116681
--- /dev/null
+++ b/frontend/components/styles/PriceTag.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const PriceTag = styled.span`
+  background: ${props => props.theme.red};
+  transform: rotate(3deg);
+  color: white;
+  font-weight: 600;
+  padding: 5px;
+  line-height: 1;
+  font-size: 3rem;
+  display: inline-block;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+`;
+
+export default PriceTag;
diff --git a/frontend/components/styles/Supreme.js b/frontend/components/styles/Supreme.js
new file mode 100644
index 0000000..d946ccd
--- /dev/null
+++ b/frontend/components/styles/Supreme.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Supreme = styled.h3`
+  background: ${props => props.theme.red};
+  color: white;
+  display: inline-block;
+  padding: 4px 5px;
+  transform: skew(-3deg);
+  margin: 0;
+  font-size: 4rem;
+`;
+
+export default Supreme;