WIP shop

1 files changed, 84 insertions, 13 deletions

diff --git a/static/style.css b/static/style.css
index a152c1b..ea8243f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -131,7 +131,6 @@ a {
 }
 
 nav {
-  margin-bottom: 2rem;
   font-size: 1.25rem;
 }
 
@@ -143,7 +142,7 @@ nav a.active {
 .container {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem 2rem;
+  gap: 2rem;
 }
 
 @keyframes logo-rotation {
@@ -168,6 +167,7 @@ nav a.active {
 
 .logo h1 {
   font-weight: 900;
+  margin-bottom: -0.25rem;
 }
 
 .logo::before {
@@ -221,14 +221,21 @@ h3 {
   font-style: normal;
 }
 
-.side {
+aside {
   max-width: 23rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
-.side h2 {
+aside h2 {
   font-weight: 900;
 }
 
+aside p:last-child {
+  margin-bottom: 0;
+}
+
 .content {
   max-width: 56rem;
   width: 100%;
@@ -342,13 +349,12 @@ p {
 }
 
 .shop-item-price {
-  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .shop-item-title {
   font-size: 1.25rem;
-  margin-top: 0.25rem;;
+  margin-top: 0.375rem;
   margin-bottom: 0.25rem;
 }
 
@@ -378,39 +384,66 @@ p {
   display: none;
 }
 
+.order {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.order-line {
+  width: 15.5rem;
+}
+
+.order-line,
 .basket-item {
   display: flex;
   gap: 0.75rem;
+  line-height: 1.2;
 }
 
 .basket-item {
   margin-top: 1rem;
 }
 
+.order-line-title,
 .basket-item-title {
+  display: block;
   font-size: 1rem;
+  margin-bottom: 0.375rem;
+}
+
+.order-line,
+.basket-item-image {
+  font-size: 0;
 }
 
+.order-line img,
 .basket-item-image img {
-  width: 5.25rem;
-  height: 5.25rem;
+  width: 5rem;
+  height: 5rem;
   object-fit: cover;
   object-position: center;
 }
 
+.order-line-price,
 .basket-item-price {
   font-size: 1rem;
   font-style: italic;
+  margin-bottom: 0.25rem;
 }
 
 .basket-item-remove {
-  margin-top: 0.25rem;
+  margin-top: 0.375rem;
+}
+
+.back {
+  margin-bottom: 1rem;
 }
 
 .form {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
   max-width: 35rem;
 }
 
@@ -485,6 +518,32 @@ p {
   margin-top: 0.25rem;
 }
 
+.order-state {
+  padding: 0.125rem 0.375rem;
+}
+
+.order-state-cart {
+  background-color: #efefef;
+}
+
+.order-state-placed {
+  background-color: #ffed7a;
+}
+
+.order-state-done {
+  background-color: #529b57;
+  color: #ffffff;
+}
+
+.order-state-canceled {
+  background-color: #e65c5c;
+  color: #ffffff;
+}
+
+.font-size-0-875 {
+  font-size: 0.875rem;
+}
+
 .d-block {
   display: block !important;
 }
@@ -497,6 +556,10 @@ p {
   display: inline-block !important;
 }
 
+.gap-0-25 {
+  gap: 0.25rem !important;
+}
+
 .gap-1 {
   gap: 1rem !important;
 }
@@ -505,6 +568,10 @@ p {
   margin-bottom: 0 !important;
 }
 
+.mb-0-25 {
+  margin-bottom: 0.25rem !important;
+}
+
 .mb-0-5 {
   margin-bottom: 0.5rem !important;
 }
@@ -526,12 +593,12 @@ p {
     margin: 1rem;
   }
 
-  .side {
+  aside {
     max-width: 100%;
   }
 
   .content h2 {
-    font-size: 2.75rem;
+    font-size: 2.5rem;
   }
 
   .gallery {
@@ -567,6 +634,10 @@ p {
   .product-page-delimiter {
     display: none;
   }
+
+  .back {
+    margin-bottom: 0.25rem;
+  }
 }
 
 @media screen and (max-width: 41rem) {