small improvements of mobile version

1 files changed, 19 insertions, 8 deletions

diff --git a/static/style.css b/static/style.css
index e8f2557..9ab0d83 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,7 +1,7 @@
 body {
   background: #ffffff;
   margin: 3rem;
-  font-family: monospace, sans-serif, serif;
+  font-family: sans-serif, monospace, serif;
   color: #352a2e;
 }
 
@@ -45,7 +45,7 @@ body {
 
 .menu a.active {
   text-decoration: none;
-  color: #00000088;
+  color: #000000aa;
 }
 
 .list {
@@ -80,7 +80,6 @@ body {
 }
 
 .tile .price {
-  font-weight: 500;
   margin-bottom: 0.25rem;
 }
 
@@ -112,6 +111,7 @@ body {
 .logo {
   margin-bottom: 2rem;
   width: 10rem;
+  height: 19.75rem;
 }
 
 .form {
@@ -167,7 +167,7 @@ body {
 
 @media screen and (max-width: 44.9rem) {
   body {
-    margin: 2rem;
+    margin: 1rem;
   }
 
   .menu {
@@ -180,6 +180,7 @@ body {
 
   .content {
     flex-direction: column;
+    gap: 1rem;
   }
 
   .aside {
@@ -193,12 +194,18 @@ body {
     background-position: left center;
     background-size: contain;
     width: 100%;
-    height: 8rem;
-    padding-left: calc(100vw - 4rem);
+    height: 5rem;
+    margin-bottom: 1rem;
+    padding-left: calc(100vw - 2rem);
+  }
+
+  .menu {
+    margin-bottom: 1rem;
   }
 
   .tile {
     width: calc(50% - 1rem);
+    overflow-wrap: break-word;
   }
 
   button,
@@ -240,12 +247,16 @@ body {
     width: 100%;
     height: 100%;
   }
+
+  .list {
+    gap: 1rem;
+  }
 }
 
 @media screen and (max-width: 30rem) {
   .tile .img-link,
   .tile .img {
-    height: 9rem;
-    width: 9rem;
+    height: 10rem;
+    width: 10rem;
   }
 }