feed: add inline form for writing new messages

Just a prototype, not functioning yet

src/form.css

@@ -3,7 +3,7 @@ form {
 
 input,
 textarea {
-  color: var(--bgcolor-accent);
+  color: var(--color);
   font-family: monospace;
   font-size: 1.6rem;
   margin-bottom: 1.2rem;
@@ -12,7 +12,6 @@ textarea {
 
 button,
 label {
-  color: var(--bgcolor-accent);
   display: block;
   font-family: monospace;
   font-size: 1.6rem;
@@ -21,12 +20,16 @@ label {
   text-indent: 0;
 }
 
+label {
+  color: var(--bgcolor-accent);
+}
+
 input[type="password"],
 input[type="text"] {
   border: .2rem solid #b7b7b7;
   border-radius: .2rem;
   display: block;
-  outline-color: rgb(102, 102, 102);
+  margin: 0;
   width: 100%;
 }
 input[type="password"]:focus,
@@ -39,16 +42,19 @@ input[type="text"]:focus {
   align-items: center;
   display: flex;
   justify-content: flex-end;
+  margin-top: 2rem;
   min-height: 3.2rem;
 }
-.buttons-bottombar {
+
-  bottom: 2rem;
+button {
-  padding: 0 1rem;
+  background-color: var(--bgcolor-accent);
-  position: sticky;
+  border: none;
+  border-radius: .2rem;
+  cursor: pointer;
+  outline-offset: 1px;
 }
-.buttons-bottombar button {
+
-  font-size: 2rem;
+button:focus {
-  margin: 1rem;
 }
 
 .button-inline {
@@ -58,14 +64,6 @@ input[type="text"]:focus {
   padding: .3rem;
 }
 
-button {
-  background-color: var(--bgcolor-accent);
-  border: none;
-  border-radius: .2rem;
-  color: white;
-  cursor: pointer;
-}
-
 button:disabled {
   background-color: var(--bgcolor-inactive);
   cursor: default;
@@ -80,3 +78,21 @@ button:disabled {
   flex-grow: 1;
   padding: 1rem 1.8rem;
 }
+
+.form-inline {
+  display: flex;
+  flex-grow: 1;
+  gap: 1rem;
+}
+
+.form-inline input[type=text] {
+  flex-grow: 1;
+}
+
+.form-inline button {
+  flex-grow: 0;
+}
+
+.focus-active {
+
+}

src/index.html

@@ -12,10 +12,16 @@
         <input type="radio" name="maintabs" id="homefeed" checked>
         <label for="homefeed">feed</label>
         <div class="content">
+          <article class="mbox">
+            <img class="mbox-img" src="bubble.svg">
+            <div class="mbox-body">
+              <form class="form-inline">
+                <input type="text" name="message">
+                <button type="button" id="publish">send</button>
+              </form>
+            </div>
+          </article>
           <div class="cards" id="feedlist"></div>
-          <div class="buttons buttons-bottombar">
-            <button type="button" class="button-big" id="publish">Write</button>
-          </div>
         </div>
       </div>