Initial commit

2022-09-15 22:25:55 +03:00
commit 7582330b1b
70 changed files with 1094 additions and 0 deletions
--- a/static/css/catalog-style.css
+++ b/static/css/catalog-style.css
@@ -0,0 +1,80 @@
+body {
+    overflow: scroll;
+}
+.catalog-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    box-sizing: inherit;
+}
+
+.catalog-categories {
+    padding: 5px;
+    margin: 5px;
+    border: solid 1px gray;
+    border-radius: 5px;
+}
+
+.catalog-categories a {
+    text-decoration: none;
+}
+
+.catalog-products {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    align-items: stretch;
+    padding: 0 5px;
+}
+
+.product {
+    border: solid 1px gray;
+    border-radius: 5px;
+    padding: 8px;
+    margin: 4px;
+}
+
+.product img {
+    border-radius: 5%; /* Радиус скругления */
+    box-shadow: 0 0 0 3px transparent; /* Параметры теней */
+    width: 210px;
+    height: 210px;
+    margin-bottom: 5px;
+}
+
+/* для мобилок <= 700px */
+@media screen and (max-width: 701px) {
+    .catalog-container {
+        display: block;
+    }
+    .catalog-categories {
+        flex: 1;
+    }
+    .catalog-products {
+        grid-template-columns: repeat(1, 1fr);
+        display: grid;
+        grid-gap: 8px;
+    }
+    .product {
+        display: inline-flex;
+    }
+    .product img {
+        width: 8em;
+        height: 8em;
+        margin-bottom: 0;
+        margin-right: 5px;
+    }
+}
+
+/* для экранов > 700px */
+@media screen and (min-width: 700px) {
+    .product {
+        display: flex;
+        flex-direction: column;
+    }
+    .catalog-categories {
+        display: block;
+        min-width: 230px;
+    }
+}