small html/styling improvements

2 files changed, 162 insertions, 12 deletions

diff --git a/static/logo-hor.svg b/static/logo-hor.svg
new file mode 100644
index 0000000..35082a1
--- /dev/null
+++ b/static/logo-hor.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="333.000000pt" height="161.000000pt" viewBox="0 0 333.000000 161.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,161.000000) scale(0.100000,-0.100000)"
+fill="#352a2e" stroke="none">
+<path d="M360 1568 c-41 -21 -51 -34 -108 -143 -34 -65 -85 -150 -112 -187
+-84 -115 -95 -150 -65 -208 18 -35 103 -86 157 -95 80 -14 188 68 249 186 l19
+38 462 3 c504 3 492 2 528 61 24 39 27 141 6 191 -27 64 -38 66 -469 66 l-385
+0 -19 38 c-21 43 -60 60 -158 68 -50 5 -68 2 -105 -18z"/>
+<path d="M2043 1571 c-19 -12 -34 -31 -38 -50 l-7 -31 -113 0 c-126 0 -156 -7
+-180 -43 -22 -34 -29 -114 -16 -165 18 -65 43 -76 185 -82 l120 -5 8 -32 c5
+-18 12 -33 16 -33 4 0 75 34 157 76 225 114 282 113 507 -13 65 -36 126 -66
+135 -67 13 -1 19 8 23 34 l5 35 120 5 c143 6 168 17 186 82 13 51 6 131 -16
+165 -24 36 -54 43 -179 43 l-113 0 -6 30 c-10 48 -57 70 -150 70 -101 0 -141
+-16 -157 -64 l-12 -36 -92 0 -92 0 -9 33 c-15 48 -61 67 -165 67 -66 0 -92 -4
+-117 -19z"/>
+<path d="M2355 1223 c-44 -11 -632 -319 -657 -344 -22 -21 -28 -37 -28 -69 0
+-78 68 -170 125 -170 19 0 32 30 40 94 12 92 63 116 242 116 l113 0 21 45 c29
+62 73 87 164 93 141 9 205 -17 243 -97 l17 -36 135 -5 c110 -4 141 -9 168 -25
+38 -23 72 -87 72 -136 0 -19 6 -43 13 -53 13 -18 15 -17 54 2 45 24 66 50 83
+109 28 91 -7 130 -203 229 -84 42 -211 110 -284 151 -169 95 -237 116 -318 96z"/>
+<path d="M534 1088 c-11 -13 -33 -42 -48 -66 -36 -53 -93 -105 -145 -132 -27
+-13 -46 -32 -55 -54 -14 -33 -16 -34 -80 -38 -46 -3 -74 -10 -93 -24 -62 -46
+-69 -189 -13 -246 24 -23 37 -28 78 -28 28 0 54 -6 60 -13 8 -9 7 -44 -4 -121
+-7 -60 -11 -127 -7 -150 8 -51 54 -100 108 -115 63 -17 889 -14 938 3 85 31
+107 77 118 245 9 133 12 140 64 141 63 1 85 41 85 153 0 102 -17 131 -83 144
+l-42 9 -5 111 c-4 93 -9 116 -26 140 -43 57 -46 58 -454 61 l-376 3 -20 -23z
+m302 -52 c77 -27 219 -102 251 -132 29 -27 33 -38 33 -80 0 -62 -44 -150 -90
+-181 -58 -40 -101 -32 -258 47 -94 47 -145 79 -158 97 -27 40 -23 99 12 163
+49 92 117 119 210 86z m67 -459 c185 -89 218 -145 155 -267 -41 -81 -85 -114
+-144 -107 -63 7 -314 137 -341 177 -41 59 -27 141 37 213 61 70 121 66 293
+-16z"/>
+<path d="M700 961 c-49 -52 -61 -101 -33 -139 22 -30 218 -131 270 -139 62
+-10 123 56 123 134 0 36 -5 46 -32 66 -55 42 -196 107 -243 114 -43 5 -47 4
+-85 -36z"/>
+<path d="M662 574 c-54 -37 -70 -134 -29 -171 40 -38 246 -133 288 -133 43 0
+79 35 99 95 25 75 -7 108 -167 181 -104 47 -154 54 -191 28z"/>
+<path d="M2324 929 c-42 -12 -63 -38 -72 -90 l-8 -44 -163 -5 c-182 -6 -184
+-6 -196 -81 -14 -81 12 -119 59 -84 32 24 102 29 150 11 50 -19 141 -102 157
+-143 6 -17 8 -53 4 -89 l-6 -62 -47 -5 c-30 -3 -52 -12 -63 -26 -37 -45 -35
+-165 2 -202 17 -17 35 -19 180 -19 176 0 216 9 238 56 7 15 11 87 11 188 0
+158 1 163 25 197 76 103 187 133 287 77 20 -12 43 -18 51 -15 34 13 28 135 -9
+172 -22 22 -43 25 -204 28 l-145 2 -3 30 c-6 65 -12 76 -55 95 -45 21 -138 25
+-193 9z"/>
+<path d="M1975 580 c-21 -8 -169 -157 -217 -218 -83 -104 35 -264 176 -238 48
+9 126 80 126 114 0 76 40 137 97 148 41 8 58 40 42 81 -13 35 -34 58 -83 94
+-40 30 -97 38 -141 19z"/>
+<path d="M2712 563 c-18 -8 -44 -29 -57 -45 -61 -72 -44 -129 76 -253 107
+-110 154 -145 207 -152 53 -7 96 17 133 75 34 54 38 113 11 152 -21 30 -197
+200 -232 223 -31 21 -95 21 -138 0z"/>
+</g>
+</svg>
diff --git a/static/style.css b/static/style.css
index 1dc0bc2..c08277e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,8 +5,12 @@ body {
   color: #352a2e;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 .container {
-  max-width: 76rem;
+  max-width: 82.5rem;
   margin: 0 auto;
 }
 
@@ -31,10 +35,18 @@ body {
   margin-bottom: 2rem;
 }
 
+.menu-mobile {
+  display: none;
+}
+
 .menu a {
   color: blue;
 }
 
+.menu a.active {
+  text-decoration: none;
+}
+
 .list {
   display: flex;
   flex-wrap: wrap;
@@ -53,8 +65,8 @@ body {
   margin-top: 0;
 }
 
-.tile img {
-  width: 100%;
+.tile .img {
+  width: 12.5rem;
   height: 12.5rem;
   object-fit: cover;
   object-position: center;
@@ -65,24 +77,25 @@ body {
   margin-bottom: 0.25rem;
 }
 
-.paginator-numbers {
-  width: 100%;
-}
-
-.paginator-numbers a {
-  text-decoration: none;
-}
-
 .paginator {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
+  max-width: 50rem;
 }
 
 .paginator a {
   color: blue;
 }
 
+.paginator-numbers {
+  width: 100%;
+}
+
+.paginator-numbers a {
+  text-decoration: none;
+}
+
 .paginator-active {
   font-weight: bold;
   text-decoration: none;
@@ -118,7 +131,7 @@ body {
 
 .form-price input {
   flex: 1;
-  max-width: calc(50% - 1rem);
+  max-width: calc(50% - 0.5rem);
 }
 
 .form-price-per input {
@@ -139,3 +152,85 @@ body {
   width: auto;
   object-fit: contain;
 }
+
+.description {
+  max-width: 50rem;
+  margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 44.9rem) {
+  body {
+    margin: 2rem;
+  }
+
+  .menu {
+    display: none;
+  }
+
+  .menu-mobile {
+    display: flex;
+  }
+
+  .content {
+    flex-direction: column;
+  }
+
+  .aside {
+    width: 100%;
+  }
+
+  .logo {
+    display: block;
+    box-sizing: border-box;
+    background: url("/static/logo-hor.svg") no-repeat;
+    background-position: left center;
+    background-size: contain;
+    width: 100%;
+    height: 8rem;
+    padding-left: calc(100vw - 4rem);
+  }
+
+  .tile {
+    width: calc(50% - 1rem);
+  }
+
+  .tile .img {
+    height: 12.5rem;
+  }
+
+  button,
+  select,
+  input {
+    padding: 0 0.5rem;
+    height: 2rem;
+  }
+
+  .aside .paginator {
+    display: none;
+  }
+
+  .paginator-numbers {
+    font-size: 1.25rem;
+  }
+
+  .form {
+    margin-bottom: 0;
+  }
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .form-price-per {
+    position: relative;
+  }
+
+  .form-price-per label {
+    position: absolute;
+    top: 0;
+    padding: 0.5rem 2rem;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}