Add bookmark item search (#15)

- Implement form styling throughout
- Modify header links for narrower views
- Clean up CSS

src/public/assets/style.css

@@ -25,28 +25,28 @@ header {
     flex-flow: row wrap;
     justify-content: space-between;
     align-items: baseline;
-
-    div {
+    div, nav {
         margin-bottom: .25rem;
     }
-
     .title {
         font-size: 1.5rem;
     }
-
     .version {
         font-size: .85rem;
         padding-left: .5rem;
         color: rgba(255, 255, 255, .75);
     }
-
     a:link, a:visited {
         color: white;
     }
+    nav {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 0 .4rem;
+    }
 }
 main {
     padding: 0 .5rem;
-
     .refresh, .loading {
         font-style: italic;
         font-size: .9rem;
@@ -54,14 +54,12 @@ main {
     .htmx-request .refresh {
         display: none;
     }
-
     .loading {
         display: none;
     }
     .htmx-request .loading {
         display: inline;
     }
-
     .user_messages {
         display: flex;
         flex-flow: column;
@@ -74,11 +72,9 @@ main {
         background-color: rgba(255, 255, 255, .75);
         padding: .25rem;
     }
-
     .user_messages + h1 {
         margin-top: .25rem;
     }
-
     .item_published {
         margin-bottom: 1rem;
         line-height: 1.2;
@@ -87,35 +83,73 @@ main {
 article {
     max-width: 60rem;
     margin: auto;
-
     .item_content {
         border: solid 1px navy;
         border-radius: .5rem;
         background-color: white;
         padding: .5rem;
-
         img {
             max-width: 100%;
             object-fit: contain;
         }
     }
-
     .meta {
         font-size: .9rem;
     }
+    &.docs {
+        line-height: 1.4rem;
+    }
 }
-article.docs {
-    line-height: 1.4rem;
+form {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    gap: 0 2rem;
+    label {
+        font-size: .9rem;
+        font-weight: bold;
+        input, select {
+            display: block;
+        }
+    }
+    .break {
+        flex-basis: 100%;
+        height: 1rem;
+        width: 0;
+    }
+    input[type=url],
+    input[type=text],
+    input[type=email],
+    input[type=password],
+    select {
+        min-width: 12rem;
+        max-width: 100%;
+        font-size: 1rem;
+        padding: .25rem;
+        border-radius: .25rem;
+        background-color: white;
+        border: solid 2px navy;
+    }
+    select {
+        min-width: unset;
+        max-width: unset;
+    }
 }
-
-input[type=url],
-input[type=text],
-input[type=email],
-input[type=password] {
-    width: 40%;
-    font-size: 1rem;
-    padding: .25rem;
-    border-radius: .25rem;
+@media all and (min-width: 60rem) {
+    form {
+        input[type=url],
+        input[type=text],
+        input[type=email],
+        input[type=password] {
+            min-width: 25rem;
+        }
+    }
+}
+.action_buttons {
+    margin: 1rem 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
 }
 button,
 .action_buttons a:link,
@@ -128,18 +162,11 @@ button,
     border-radius: .25rem;
     cursor: pointer;
     border: none;
-}
-button:hover,
-.action_buttons a:hover {
-    text-decoration: none;
-    cursor: pointer;
-    background: linear-gradient(navy, #000032);
-}
-.action_buttons {
-    margin: 1rem 0;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-evenly;
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+        background: linear-gradient(navy, #000032);
+    }
 }
 code {
     font-size: .9rem;
@@ -149,12 +176,10 @@ p.back-link {
 }
 .item_heading {
     margin-bottom: 0;
-
     .bookmark {
         padding: 0;
         border: solid 1px black;
         border-radius: .5rem;
-
         &.add {
             background-color: lightgray;
             &:hover {
@@ -167,7 +192,6 @@ p.back-link {
                 background: linear-gradient(gray, lightgreen);
             }
         }
-
         img {
             max-width: 1.5rem;
             max-height: 1.5rem;