From ab3cf2934bc7f723d9762e74bc38e15be5676a02 Mon Sep 17 00:00:00 2001
From: imohkay <karen.menezes@gmail.com>
Date: Wed, 27 Oct 2021 22:17:05 +0530
Subject: [PATCH] ensure play icon gradients aren't random on about

---
 app/static/css/partials/_about.scss          |  5 ++++-
 app/static/css/partials/_titleanimation.scss |  4 ++--
 app/templates/about.html                     | 10 +++++-----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/static/css/partials/_about.scss b/app/static/css/partials/_about.scss
index 9519d64..8238c6b 100755
--- a/app/static/css/partials/_about.scss
+++ b/app/static/css/partials/_about.scss
@@ -60,7 +60,6 @@
 }
 
 .about-bios {
-  //max-width: 670px;
   padding: var(--spacing-2) 0;
 }
 
@@ -72,6 +71,10 @@
   display: flex;
   align-items: center;
 
+  .text-about {
+    background-image: linear-gradient(to right, var(--animated-title-color-2), var(--animated-title-color-3), var(--animated-title-color-4), var(--animated-title-color-1));
+  }
+
   @media screen and (min-width: 800px) {
     width: 50%;
   }
diff --git a/app/static/css/partials/_titleanimation.scss b/app/static/css/partials/_titleanimation.scss
index c95285e..7fa8a33 100755
--- a/app/static/css/partials/_titleanimation.scss
+++ b/app/static/css/partials/_titleanimation.scss
@@ -15,8 +15,8 @@
 }
 
 .animated-title {
-  .text {
-    background: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4));
+  .text, .text-about {
+    background-image: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
diff --git a/app/templates/about.html b/app/templates/about.html
index 18c8be0..26cfb23 100755
--- a/app/templates/about.html
+++ b/app/templates/about.html
@@ -44,7 +44,7 @@
             <li>
                 <label for="bio-anushka" class="accordion-title">
                    <h3>Anushka Rajendran 安努舒卡．拉堅德蘭</h3>
-                   <span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
+                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
                 </label>
                 <input type="checkbox" id="bio-anushka" class="accordion-checkbox">
                 <div class="accordion-content">
@@ -63,7 +63,7 @@
             <li>
                 <label for="bio-padma" class="accordion-title">
                    <h3>Pad.ma</h3>
-                   <span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
+                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
                 </label>
                 <input type="checkbox" id="bio-padma" class="accordion-checkbox">
                 <div class="accordion-content">
@@ -90,7 +90,7 @@
             <li>
                 <label for="bio-annotation" class="accordion-title">
                    <h3>Annotation Collaborators 影片評論共筆</h3>
-                   <span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
+                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
                 </label>
                 <input type="checkbox" id="bio-annotation" class="accordion-checkbox">
                 <div class="accordion-content">
@@ -109,7 +109,7 @@
             <li>
                 <label for="bio-acknowledgements" class="accordion-title">
                    <h3>Acknowledgements 致謝</h3>
-                   <span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
+                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
                 </label>
                 <input type="checkbox" id="bio-acknowledgements" class="accordion-checkbox">
                 <div class="accordion-content">
@@ -126,7 +126,7 @@
             <li>
                 <label for="bio-contact" class="accordion-title">
                    <h3>Contact 聯絡</h3>
-                   <span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
+                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
                 </label>
                 <input type="checkbox" id="bio-contact" class="accordion-checkbox">
                 <div class="accordion-content">