update styles for form

app/static/css/partials/_ascroll.scss

@@ -78,7 +78,7 @@
   .annotation-icon-wrapper {
     border: 3px solid rgba(#fff, 0.8);
     border-radius: 50%;
-    background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+    background: var(--gradient-body);
     background-size: 300% 100%;
     width: 52px;
     height: 52px;

app/static/css/partials/_contact.scss

@@ -5,23 +5,44 @@ main > .contact {
 
   h1 {
     font-size: 22px;
-    margin: 0 0 var(--spacing) 0;
+    font-weight: 700;
+    margin: 0 0 var(--spacing-2) 0;
+  }
+
+  label {
+    font-size: 18px;
+    display: block;
+    padding: 0 0 calc(var(--spacing) / 2) 0;
   }
 
   input[type=email], textarea {
-    border: 0;
     background: blue;
     color: red;
     font-size: 20px;
-    line-height: 1.3;
+    margin-bottom: var(--spacing-2);
   }
+
+  input[type=email], input[type=email], textarea {
+    border: 0;
+    line-height: 1.3;
+    display: block;
+    max-width: 500px;
+    width: 100%;
+  }
+
   textarea {
-    width: 500px;
     height: 300px;
   }
+
   input[type=submit] {
     border: 0;
-    background: green;
+    color: #fff;
+    background: var(--gradient-body);
+    font-size: 18px;
+    font-family: "noto_sans", sans-serif;
+    font-weight: 700;
+    padding: var(--spacing) var(--spacing-2);
+    display: block;
   }
 
 }

app/static/css/partials/_layout.scss

@@ -4,6 +4,8 @@
 	--bg-color-3: #ffff00;
 	--bg-color-4: #ff3399;
 
+    --gradient-body: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+
     --color-link: #ee0;
 
     --spacing: 8px;
@@ -34,7 +36,7 @@
 }
 
 body.animated {
-    background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+    background: var(--gradient-body);
     animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
     color: #ddd;

app/templates/about.html

@@ -136,7 +136,23 @@
   <p>Project "<a href="/polis">Phantas.ma/polis</a>" is organized by National Taiwan Museum of Fine Arts, supervised by the Ministry of Culture, and is co-organized by the Cultural Taiwan Foundation and in partnership with SEA Plateau.</p>
 
   <p>本計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p>
+</div>
+  <div class="contact">
+    {% if submitted %}
+        Thanks for your message
+    {% else %}
+    <h1>Contact 聯絡</h1>
+    <form method="post">
+        <label for="input-email">Your Email</label>
+        <input name="email" type="email" id="input-email" required>
         
+        <label for="input-msg">Message 訊息</label>
+        <textarea name="message" id="input-msg" required></textarea>
+        
+        <input type="submit" value="Send Message 傳送訊息">
+        {% csrf_token %}
+    </form>
+    {% endif %}
   </div>
 {% endblock %}
 

app/templates/contact.html

@@ -8,15 +8,12 @@
 	{% else %}
 	<h1>Contact 聯絡</h1>
 	<form method="post">
-		<label>
+		<label for="input-email">Your Email</label>
-			Your Email:
+		<input name="email" type="email" id="input-email" required>
-			<input name="email" type="email" required>
+		
-		</label>
+		<label for="input-msg">Message 訊息</label>
-		<br>
+		<textarea name="message" id="input-msg" required></textarea>
-		<label>Message 訊息:<br>
+		
-			<textarea name="message" required></textarea>
-		</label>
-		<br>
 		<input type="submit" value="Send Message 傳送訊息">
 		{% csrf_token %}
 	</form>