From 66c51b0e714fa8a1c80784108191270babc8525e Mon Sep 17 00:00:00 2001
From: unwox <me@unwox.com>
Date: Sun, 31 Aug 2025 17:51:57 +0600
Subject: implement shop

---
 static/glasses.png      | Bin 0 -> 14633 bytes
 static/logo-bg.png      | Bin 0 -> 74788 bytes
 static/logo-dark-bg.png | Bin 0 -> 31159 bytes
 static/style.css        | 402 ++++++++++++++++++++++++++++++++++++++++--------
 4 files changed, 335 insertions(+), 67 deletions(-)
 create mode 100644 static/glasses.png
 create mode 100644 static/logo-bg.png
 create mode 100644 static/logo-dark-bg.png

(limited to 'static')

diff --git a/static/glasses.png b/static/glasses.png
new file mode 100644
index 0000000..eaae9a4
Binary files /dev/null and b/static/glasses.png differ
diff --git a/static/logo-bg.png b/static/logo-bg.png
new file mode 100644
index 0000000..4762622
Binary files /dev/null and b/static/logo-bg.png differ
diff --git a/static/logo-dark-bg.png b/static/logo-dark-bg.png
new file mode 100644
index 0000000..36dbb9e
Binary files /dev/null and b/static/logo-dark-bg.png differ
diff --git a/static/style.css b/static/style.css
index fb3fb3a..e31e6d1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,97 +1,136 @@
 body {
   background: #ffffff;
   margin: 4rem;
-  font-family: sans-serif, monospace, serif;
-  line-height: 1.4;
+  font-family: sans, monospace, sans-serif;
+  line-height: 1.5;
+}
+
+@font-face {
+  font-family: "Bad Script";
+  src: local("Bad Script"),
+       url: ("/static/fonts/BadScript-Regular.ttf") format ("opentype");
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  color: #529b57;
+  font-weight: bold;
 }
 
 nav {
-  margin-bottom: 0.5rem;
+  margin-bottom: 2rem;
+  font-size: 1.25rem;
 }
 
-ol {
-  padding-left: 0;
-  margin-top: 0;
+nav a.active {
+  text-decoration: none;
+  opacity: 0.5;
 }
 
 .container {
   display: flex;
   flex-wrap: wrap;
-  gap: 4rem;
+  gap: 1rem 2rem;
 }
 
-.button-wrapper {
-  display: block;
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
+.logo {
+  height: 95px;
+  position: relative;
+  display: flex;
+  gap: 1.25rem;
+  align-items: center;
+  margin-bottom: 1rem;
 }
 
-.button {
-  border: 0.1875rem solid;
-  box-shadow: 1px 1px 0 0, 2px 2px 0 0, 3px 3px 0 0, 4px 4px 0 0;
-  color: #000000;
-  display: inline-block;
-  font-size: 1rem;
-  font-weight: bold;
-  padding: 0.75rem 2.5rem;
-  position: relative;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: box-shadow 0.2s, top 0.2s, left: 0.2s;
+.logo::before {
+  background-image: url("/static/logo-bg.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  left: -50px;
+  top: -58px;
+  z-index: -1;
+  content: "";
+  width: 215px;
+  height: 215px;
 }
 
-.button:active {
-  box-shadow: 0px 0px 0px 0px;
-  top: 5px;
-  left: 5px;
+.logo-glasses {
+  position: absolute;
+  top: -10px;
+  left: 35px;
+  width: 70px;
+  object-fit: contain;
+  pointer-events: none;
 }
 
-.logo {
-  width: 227px;
-  height: 200px;
+.logo img,
+.logo a {
+  height: 95px;
 }
 
 h1,
-h2 {
-  font-weight: 900;
-  font-style: italic;
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
   margin-bottom: 0.5rem;
-  line-height: 1.1;
+  font-family: sans;
 }
 
 h1 {
-  font-size: 2rem;
+  font-size: 1.75rem;
+  line-height: 1.2;
 }
 
 h2 {
+  font-size: 1.75rem;
+}
+
+h3 {
   font-size: 1.375rem;
 }
 
+.h5 {
+  font-size: 1.125rem;
+  font-style: normal;
+}
+
+.side {
+  max-width: 23rem;
+}
+
+.side h2 {
+  font-weight: 900;
+}
+
 .content {
-  max-width: 30rem;
-  font-size: 1.25rem;
+  max-width: 56rem;
+  width: 100%;
 }
 
-.article + .article {
-  margin-top: 2rem;
+.content h2 {
+  font-size: 3.5rem;
+  font-weight: 900;
+  line-height: 1.2;
 }
 
 p {
   margin-top: 0;
 }
 
-.form-row {
-  display: block;
-  margin: 0.5rem 0;
-}
-
 .gallery {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-template-rows: repeat(16, 5rem);
   grid-gap: 1rem;
   max-width: calc(100vw - 6rem);
-  width: 56rem;
+  width: 100%;
 }
 
 .gallery > div {
@@ -139,52 +178,277 @@ p {
   object-fit: cover;
 }
 
-@media screen and (max-width: 50rem) {
-  body {
-    margin: 2rem;
-  }
+.shop-items {
+  display: flex;
+  gap: 2.5rem 1.5rem;
+  flex-wrap: wrap;
+}
 
-  ol {
-    counter: ol-counter;
-  }
+.shop-item {
+  width: 17.5rem;
+}
 
-  ol li {
-    counter-increment: ol-counter;
-  }
+.shop-item-not-published {
+  opacity: 0.5;
+}
 
-  ol li::before {
-    display: block;
-    content: counter(ol-counter) ".";
-  }
+.shop-item-imgs {
+  background-color: #00000011;
+  position: relative;
+  width: 17.5rem;
+  margin-bottom: 1rem;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.shop-item-img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+}
+
+.shop-item-img:first-child {
+  opacity: 1;
+}
 
-  ol li::marker {
-    content: '';
+.shop-item-img:hover {
+  opacity: 1;
+  left: 0 !important;
+  width: 100% !important;
+  z-index: 2 !important;
+}
+
+.shop-item-price {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.shop-item-title {
+  font-size: 1.25rem;
+  margin-top: 0.25rem;;
+  margin-bottom: 0.25rem;
+}
+
+.product-page-layout {
+  display: flex;
+  gap: 2rem;
+}
+
+.product-page-layout > div {
+  flex: 50%;
+}
+
+.product-page-imgs {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.product-page-img,
+.product-page-img-mobile {
+  max-width: 100%;
+  width: 100%;
+}
+
+.product-page-img-mobile {
+  display: none;
+}
+
+.basket-item {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.basket-item {
+  margin-top: 1rem;
+}
+
+.basket-item-title {
+  font-size: 1rem;
+}
+
+.basket-item-image img {
+  width: 5.25rem;
+  height: 5.25rem;
+  object-fit: cover;
+  object-position: center;
+}
+
+.basket-item-price {
+  font-size: 1rem;
+  font-style: italic;
+}
+
+.basket-item-remove {
+  margin-top: 0.25rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 35rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-row label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+}
+
+.form-row input[type=checkbox] {
+  vertical-align: middle;
+  margin-left: 0;
+}
+
+.form-row input[type=checkbox] + label {
+  display: inline;
+}
+
+.form-row select,
+.form-row textarea,
+.form-row input:not([type=checkbox]) {
+  width: 100%;
+}
+
+.form-row input:not([type=checkbox]),
+.form-row select {
+  height: 1.75rem;
+}
+
+.form-file-img {
+  width: 3.5rem;
+  height: 3.5rem;
+  object-fit: cover;
+  object-position: center;
+}
+
+.form textarea {
+  min-height: 4rem;
+}
+
+.form-required-marker {
+  font-size: 0.75rem;
+  opacity: 0.4;
+}
+
+.form-error {
+  font-style: italic;
+  color: crimson;
+  font-size: 0.75rem;
+  font-weight: bold;
+  margin-top: 0.375rem;
+}
+
+.form-subheader {
+  margin-bottom: -0.375rem;
+}
+
+.form-help {
+  opacity: 0.4;
+  font-size: 0.75rem;
+  margin-top: 0.375rem;
+}
+
+.form-error + .form-help {
+  margin-top: 0.25rem;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.d-inline-block {
+  display: inline-block;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-0-5 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 1rem;
+}
+
+.mb-1-5 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 50rem) {
+  body {
+    margin: 2rem;
   }
 
-  .content {
+  .side {
     max-width: 100%;
   }
 
+  .content h2 {
+    font-size: 3rem;
+  }
+
   .container {
-    gap: 2rem;
+    gap: 1rem;
   }
 
   .gallery {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    max-width: calc(100vw - 2rem);
   }
 
   .gallery img,
   .gallery video {
     position: static;
   }
+
+  .product-page-layout {
+    flex-direction: column;
+  }
+
+  .product-page-img-mobile {
+    display: block;
+  }
+
+  .product-page-imgs > *:first-child {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 41rem) {
+  .shop-item,
+  .shop-item-imgs,
+  .shop-item-img {
+    width: 100%;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
   body {
-    background-color: #000000;
+    background-color: #211e1c;
     color: #ffffff;
   }
 
@@ -196,7 +460,11 @@ p {
     background-color: #ffffff22;
   }
 
-  .button {
-    color: #ffffff;
+  .shop-item-imgs {
+    background-color: #ffffff22;
+  }
+
+  .logo::before {
+    background-image: url("/static/logo-dark-bg.png");
   }
 }
-- 
cgit v1.2.3