Improve(?) styles

bam/static/bookform.css

 .content {
-  align-self: flex-start;
+  width: var(--content-width);
 }
 
 form {
@@ -8,63 +8,76 @@ form {
 
 form {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
   min-width: min(90vw, 400px);
+  gap: var(--content-gap);
 }
 
-form > label {
-  padding-bottom: 5px;
+.field-group {
+  display: flex;
+  flex-direction: column;
 }
 
-input {
+.field-group > label {
+  padding-bottom: 10px;
+  font-weight: 500;
+  font-size: var(--input-label-fsize);
+}
+.field-group > input {
   font-family: Roboto;
-  font-size: 16px;
-  border-radius: 3px;
-  padding: 12px;
-  background-color: rgba(10, 10, 10, 0.5);
-  border: 1px solid #111;
+  font-size: var(--input-box-fsize);
+  font-weight: 300;
+  padding: 12px 18px;
+  background-color: rgba(15, 15, 15, 0.5);
+  border: none;
+  border-bottom: 7px solid #111;
   color: #eee;
-  transition: background 0.3s;
+  width: min(550px, 90vw);
+  transition: all 0.3s;
 }
-input:hover {
+.field-group > input:hover {
   --hcolor: rgba(10, 10, 10, 0.7);
   background-color: var(--hcolor);
-  border: 1px solid var(--hcolor);
+  /* border: 1px solid var(--hcolor); */
+  border-bottom: 7px solid #070707;
 }
-input:focus,
-input:active {
+.field-group > input:focus,
+.field-group > input:active {
   background-color: rgba(30, 30, 30, 0.5);
-  border: 1px solid grey;
+  border-bottom: 7px solid grey;
   outline: none;
 }
 
-label {
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: 0.9rem;
-  letter-spacing: 1px;
-}
-
 .field-error {
   font-style: oblique;
+  margin-top: calc(var(--content-gap) / 2);
   color: var(--red);
-  font-size: 0.9rem;
 }
 
-[type="submit"] {
+.submit-div {
+  flex-basis: 100%;
+  display: flex;
+  gap: var(--content-gap);
+}
+
+[type="submit"],
+.back {
+  font-family: Roboto;
+  color: white;
+  font-size: 18px;
+  border-radius: 3px;
+  padding: 12px 25px;
+  width: auto;
   background-color: var(--red);
   border: none;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
+  transition: all 0.3s;
 }
 
-[type="submit"]:hover {
+[type="submit"]:hover,
+.back:hover {
   background-color: var(--dark-red);
   cursor: pointer;
 }
-
-label,
-[type="submit"] {
-  margin-top: 10px;
-}

bam/static/dash.css

@@ -15,6 +15,10 @@ body {
   --nav-padding-side: 50px;
   --logo-height: 60px;
   --nav-gap: 20px;
+  --content-width: 80vw;
+  --content-gap: 20px;
+  --input-box-fsize: 3rem;
+  --input-label-fsize: 1.7rem;
 }
 
 @media screen and (max-width: 600px) {
@@ -22,6 +26,10 @@ body {
     --nav-padding-top: 15px;
     --nav-padding-side: 15px;
     --logo-height: 50px;
+    --content-width: 100vw;
+    --content-gap: 10px;
+    --input-box-fsize: 1.8rem;
+    --input-label-fsize: 1.3rem;
   }
   .navbar {
     flex-wrap: wrap;

bam/static/hometable.css

@@ -10,6 +10,11 @@ table {
 table a {
   color: #ccc;
   text-decoration: underline 1px dotted grey;
+  transition: all 0.3s ease;
+}
+
+table a:hover {
+  color: #fff;
 }
 
 thead tr {

bam/templates/add.html

@@ -4,21 +4,36 @@
   href="{{ url_for('static', filename='bookform.css') }}"
 />
 {% endblock %} {% block content %}
+
+<h1>Add a book</h1>
 <form class="addBookForm" action="" method="POST">
   {{ form.hidden_tag() }}
-  <h1>Add a Book</h1>
-  {{ form.title.label() }} {{ form.title }} {% for error in form.title.errors %}
+
+  <div class="field-group">
+    {{ form.title.label() }} {{ form.title }} {% for error in form.title.errors
+    %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.author.label() }} {{ form.author }} {% for error in
+    {% endfor %}
+  </div>
+
+  <div class="field-group">
+    {{ form.author.label() }} {{ form.author }} {% for error in
     form.author.errors %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.isbn.label() }} {{ form.isbn }} {% for error in
-  form.isbn.errors %}
+    {% endfor %}
+  </div>
+  <div class="field-group">
+    {{ form.isbn.label() }} {{ form.isbn }} {% for error in form.isbn.errors %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.price.label() }} {{ form.price }} {% for error in
-  form.price.errors %}
+    {% endfor %}
+  </div>
+  <div class="field-group">
+    {{ form.price.label() }} {{ form.price }} {% for error in form.price.errors
+    %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.submit() }}
+    {% endfor %}
+  </div>
+  <div class="submit-div">{{ form.submit() }}</div>
 </form>
 
 {% endblock %}

bam/templates/edit.html

-{% extends "dash.html" %} {% set active_page = "add" %} {% block head %}
+{% extends "dash.html" %} {% set active_page = "edit" %} {% block head %}
 <link
   rel="stylesheet"
   href="{{ url_for('static', filename='bookform.css') }}"
 />
 {% endblock %} {% block content %}
+
+<h1>Edit {{ book.title|e }}</h1>
 <form class="addBookForm" action="" method="POST">
   {{ form.hidden_tag() }}
 
-  <h1>Edit {{ book.title|e }}</h1>
+  <div class="field-group">
     {{ form.title.label() }} {{ form.title(value=book.title) }} {% for error in
     form.title.errors %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.author.label() }} {{ form.author(value=book.author) }} {%
-  for error in form.author.errors %}
+    {% endfor %}
+  </div>
+
+  <div class="field-group">
+    {{ form.author.label() }} {{ form.author(value=book.author) }} {% for error
+    in form.author.errors %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.isbn.label() }} {{ form.isbn(value=book.isbn) if
-  book.isbn else form.isbn }} {% for error in form.isbn.errors %}
+    {% endfor %}
+  </div>
+  <div class="field-group">
+    {{ form.isbn.label() }} {{ form.isbn(value=book.isbn) if book.isbn else
+    form.isbn }} {% for error in form.isbn.errors %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.price.label() }} {{ form.price(value=book.price) }} {%
-  for error in form.price.errors %}
+    {% endfor %}
+  </div>
+  <div class="field-group">
+    {{ form.price.label() }} {{ form.price(value=book.price) }} {% for error in
+    form.price.errors %}
     <div class="field-error">{{ error }}</div>
-  {% endfor %} {{ form.submit() }}
+    {% endfor %}
+  </div>
+  <div class="submit-div">
+    {{ form.submit() }}
+    <a href="{{ url_for('home') }}"><button class="back">Back</button></a>
+  </div>
 </form>
 
 {% endblock %}