web client v0.9 (restaurant view)

src/styles/Restaurant.scss

@@ -1,15 +1,19 @@
 .restaurant-container {
-  width: 100vw;
-  height: 100%;
+  min-width: 70%;
+  min-height: 600px;
+  max-height: 80vh;
+  max-width: 80%;
+  background-color: $dark-gray;
+  border-radius: 15px;
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: row;
+  overflow: auto;
   h1 {
     font-weight: 100;
     color: $gray;
     background-color: $dark-gray;
     padding: 15px;
-    font-size: 3rem;
+    font-size: 2rem;
     margin-bottom: 16px;
     margin-top: 0;
   }
@@ -22,11 +26,16 @@
   }
 }
 
+.restaurant-left {
+  max-width: 30%;
+  background-color: #1d1d1d;
+  height: 100%;
+}
+
 .restaurant-hero {
   width: 100%;
-  height: 500px;
+  height: 360px;
   border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
   background-size: cover;
 }
 
@@ -44,7 +53,7 @@
 .restaurant-dishes {
   min-width: 60%;
   h3 {
-    font-size: 1.6rem;
+    font-size: 1.2rem;
     font-weight: 400;
   }
 }
@@ -52,21 +61,18 @@
 .restaurant-content {
   padding-top: 10rem;
   padding-bottom: 10rem;
+  width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: flex-start;
-  min-width: 70%;
 }
 
 .restaurant-info {
   text-align: center;
-  max-width: 30%;
   background-color: #1d1d1d;
   box-shadow: -2px 10px 20px rgba(0, 0, 0, 0.212);
-  border-radius: 15px;
-
   p {
-    font-size: 1rem;
+    font-size: 0.9rem;
     font-weight: 300;
     margin-top: 8px;
     margin-bottom: 8px;
@@ -83,6 +89,6 @@
 }
 
 .restaurant-span {
-  font-weight: 500;
+  font-weight: 400;
   color: $gray;
 }