various styles

client/src/style/index.less

@@ -8,7 +8,7 @@ html {
   box-sizing: inherit;
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+body, h4, h5, h6, p, ol, ul {
   margin: 0;
   padding: 0;
   font-weight: normal;
@@ -100,9 +100,9 @@ html {
     --max-font-size: var(--large-font-size);
 
     --base-border-color: var(--secondary-font-color);
-    --base-border: 1px solid var(--base-border-color);
-    --hover-border: 1px solid var(--base-font-color);
-    --focus-border: 1px solid var(--base-font-color);
+    --base-border: 2px solid var(--base-border-color);
+    --hover-border: 2px solid var(--base-font-color);
+    --focus-border: 2px solid var(--base-font-color);
     --base-border-radius: .2rem;
     --base-focus: 2px solid var(--base-accent-color);
     --base-outline-offset: 0.25em;
@@ -158,6 +158,35 @@ button, [type=button], [type=reset], [type=submit] {
     }
 }
 
+h1, h2, h3, h4, h5, h6 {
+    margin-top:0;
+    line-height:var(--header-line-height);
+}
+
+h1 {
+    margin-bottom:var(--base-spacing);
+    font-size:var(--large-font-size)
+}
+
+h2 {
+    margin-bottom:var(--base-spacing);
+    font-size:var(--medium-font-size);
+}
+
+h3 {
+    margin-bottom:calc(var(--base-spacing)/2);
+    font-size:var(--smedium-font-size)
+}
+
+h4 {
+    margin-bottom:calc(var(--base-spacing)/3);
+    font-size:var(--base-font-size)
+}
+
+p {
+    margin:0 0 var(--base-spacing)
+}
+
 // ok actual styles
 
 body {
@@ -208,8 +237,11 @@ button, [type=submit] {
 
 article {
     background-color: var(--secondary-background-color);
-}
 
+    button {
+        border-color: var(--tertiary-background-color);
+    }
+}
 
 .search {
     display: grid;
@@ -241,14 +273,23 @@ article {
 
     article {
         display: grid;
+
+        // grid-template-rows:
+        //     1fr min-content min-content;
+
         grid-template-areas:
             "title img"
+            "details details"
             "remove remove";
 
         button {
             grid-area: remove
         }
 
+        .details {
+            grid-area: details;
+        }
+
         padding: var(--base-spacing);
         margin: var(--base-spacing-half);
     }
@@ -318,7 +359,6 @@ header {
         }
 
         .items {
-            // grid-column: 1 / -1;
             display: grid;
             grid-template-columns: repeat(5, 1fr);
 
@@ -327,7 +367,11 @@ header {
                 margin-bottom: var(--base-spacing);
 
                 display: grid;
-                // grid-template-rows: 1fr 1fr 1fr;
+
+                &.bold {
+                    font-weight: bold;
+                    background: var(--tertiary-background-color);
+                }
             }
         }
     }
@@ -339,6 +383,7 @@ header {
 
     .offer {
         display: grid;
+        grid-template-columns: 1fr min-content;
         grid-template-areas:
             "details img"
             "btn neg";
@@ -358,7 +403,9 @@ header {
         }
 
         button {
+            margin-top: var(--base-spacing-half);
             grid-area: btn;
+            border-color: var(--tertiary-background-color);
 
             &.accepted {
                 background: var(--color-accent-blue);