add contact form to accordion

app/static/css/partials/_contact.scss

@@ -1,7 +1,7 @@
-main > .contact {
+.contact {
   max-width: var(--container-lg-width);
   margin: 0 auto;
-  padding: var(--spacing-2);
+  padding: var(--spacing) 0;
 
   h1 {
     font-size: 22px;
@@ -26,8 +26,11 @@ main > .contact {
     border: 0;
     line-height: 1.3;
     display: block;
-    max-width: 500px;
     width: 100%;
+
+    @media screen and (min-width: 800px) {
+      width: 50%;
+    }
   }
 
   textarea {
@@ -43,6 +46,8 @@ main > .contact {
     font-weight: 700;
     padding: var(--spacing) var(--spacing-2);
     display: block;
+    background-size: 400% 100%;
+    animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
   }
 
 }

app/templates/about.html

@@ -128,6 +128,31 @@
                     </div>
                 </div>
             </li>
+            <li>
+                <label for="bio-contact" class="accordion-title">
+                   <h3>Contact 聯絡</h3>
+                   <span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
+                </label>
+                <input type="checkbox" id="bio-contact" class="accordion-checkbox">
+                <div class="accordion-content">
+                  <div class="contact">
+                    {% if submitted %}
+                        Thanks for your message
+                    {% else %}
+                    <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>
+                </div>
+            </li>
         </ul>
     </div>
     <br>
@@ -137,23 +162,6 @@
 
   <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 %}
 
 {% block end %}