From 84c80ab632017a7fc0ce9df9f305c59ac14f495a Mon Sep 17 00:00:00 2001 From: imohkay Date: Wed, 27 Oct 2021 16:42:11 +0530 Subject: [PATCH 1/2] update styles for form --- app/static/css/partials/_ascroll.scss | 2 +- app/static/css/partials/_contact.scss | 31 ++++++++++++++++++++++----- app/static/css/partials/_layout.scss | 4 +++- app/templates/about.html | 18 +++++++++++++++- app/templates/contact.html | 15 ++++++------- 5 files changed, 53 insertions(+), 17 deletions(-) mode change 100644 => 100755 app/static/css/partials/_contact.scss mode change 100644 => 100755 app/templates/contact.html diff --git a/app/static/css/partials/_ascroll.scss b/app/static/css/partials/_ascroll.scss index 26f9df4..306b96c 100755 --- a/app/static/css/partials/_ascroll.scss +++ b/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; diff --git a/app/static/css/partials/_contact.scss b/app/static/css/partials/_contact.scss old mode 100644 new mode 100755 index 78cef1c..a8018f7 --- a/app/static/css/partials/_contact.scss +++ b/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; } } diff --git a/app/static/css/partials/_layout.scss b/app/static/css/partials/_layout.scss index a56be21..d975078 100755 --- a/app/static/css/partials/_layout.scss +++ b/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; diff --git a/app/templates/about.html b/app/templates/about.html index 81ae273..517e0e9 100755 --- a/app/templates/about.html +++ b/app/templates/about.html @@ -136,8 +136,24 @@

Project "Phantas.ma/polis" 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.

本計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。

- +
+ {% if submitted %} + Thanks for your message + {% else %} +

Contact 聯絡

+
+ + + + + + + + {% csrf_token %} +
+ {% endif %} +
{% endblock %} {% block end %} diff --git a/app/templates/contact.html b/app/templates/contact.html old mode 100644 new mode 100755 index cc6e84d..5e61c59 --- a/app/templates/contact.html +++ b/app/templates/contact.html @@ -8,15 +8,12 @@ {% else %}

Contact 聯絡

- -
- -
+ + + + + + {% csrf_token %}
From 6e13ac13b2547bdd24bca94b855ed30f50d0a584 Mon Sep 17 00:00:00 2001 From: imohkay Date: Wed, 27 Oct 2021 18:30:05 +0530 Subject: [PATCH 2/2] add contact form to accordion --- app/static/css/partials/_contact.scss | 11 +++++-- app/templates/about.html | 42 ++++++++++++++++----------- 2 files changed, 33 insertions(+), 20 deletions(-) diff --git a/app/static/css/partials/_contact.scss b/app/static/css/partials/_contact.scss index a8018f7..d325156 100755 --- a/app/static/css/partials/_contact.scss +++ b/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; } } diff --git a/app/templates/about.html b/app/templates/about.html index 517e0e9..a265763 100755 --- a/app/templates/about.html +++ b/app/templates/about.html @@ -128,6 +128,31 @@ +
  • + + +
    +
    + {% if submitted %} + Thanks for your message + {% else %} +
    + + + + + + + + {% csrf_token %} +
    + {% endif %} +
    +
    +

    • @@ -137,23 +162,6 @@

    本計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。

    -
    - {% if submitted %} - Thanks for your message - {% else %} -

    Contact 聯絡

    -
    - - - - - - - - {% csrf_token %} -
    - {% endif %} -
    {% endblock %} {% block end %}