📝 updating faq

Author: clevernyyyy

config/content/faq.json

@@ -25,7 +25,7 @@
   },
   {
     "question": "I can't or don't want to register online (technical issue, privacy issue, etc), can I still attend? Can I pay at the door?",
-    "answer": "<span className='flex-override'>Yes!  If you have an issue but still want to register early, please contact us at <a class='gold' href='mailto:info@kernelcon.org'>info@kernelcon.org</a>.  We will be accepting cash at the door.  Keep in mind that registering early guarantees you swag, that clothing is appropriate size, that workshops you want aren't full, etc.</span>"
+    "answer": "<span className='flex-override'>Yes!  If you have an issue but still want to register early, please contact us at <a href='mailto:info@kernelcon.org'>info@kernelcon.org</a>.  We will be accepting cash at the door.  Keep in mind that registering early guarantees you swag, that clothing is appropriate size, that workshops you want aren't full, etc.</span>"
   },
   {
     "question": "Does the payment name need to match the attendee name?",
@@ -37,7 +37,7 @@
   },
   {
     "question": "Do you offer a group discount?",
-    "answer": "<span className='flex-override'>We do!  Please contact <a class='gold' href='mailto:info@kernelcon.org'>info@kernelcon.org</a> for group orders of 10 or more!</span>"
+    "answer": "<span className='flex-override'>We do!  Please contact <a href='mailto:info@kernelcon.org'>info@kernelcon.org</a> for group orders of 10 or more!</span>"
   },
   {
     "question": "Do you offer CPEs?",
@@ -49,7 +49,7 @@
   },
   {
     "question": "Does Kernelcon provide American Sign Language (ASL) interpretation?",
-    "answer": "Kernelcon does not currently offer on-site American Sign Language (ASL) interpretation or other scheduled sign-language services as a standard part of the event. We state that plainly so you can plan with accurate expectations — not because access is unimportant to us, but because we do not want anyone to assume services we have not committed to providing.<p>If ASL interpretation or another accessibility-related accommodation would help you attend or participate, please email <a class='gold' href='mailto:info@kernelcon.org'>info@kernelcon.org</a> as early as you can. Describe what would help, and we will do our best to explore options and work with you to accommodate reasonable requests when possible. Advance notice matters: the more lead time we have, the more we may be able to arrange, though we cannot guarantee every request.</p>"
+    "answer": "<p>Kernelcon does not currently offer on-site American Sign Language (ASL) interpretation or other scheduled sign-language services as a standard part of the event. We state that plainly so you can plan with accurate expectations - not because access is unimportant to us, but because we do not want anyone to assume services we have not committed to providing.<br><br>If ASL interpretation or another accessibility-related accommodation would help you attend or participate, please email <a href='mailto:info@kernelcon.org'>info@kernelcon.org</a> as early as you can. Describe what would help, and we will do our best to explore options and work with you to accommodate reasonable requests when possible. Advance notice matters: the more lead time we have, the more we may be able to arrange, though we cannot guarantee every request.</p>"
   },
   {
     "question": "How does Kernelcon ensure the health and safety of attendees?",

src/pages/About/About.scss

@@ -85,7 +85,7 @@
       display: flex;
       font-size: 16px;
       font-weight: 300;
-      align-items: center;
+      align-items: flex-start;
     }
     .faq-q,
     .faq-a {
@@ -99,14 +99,25 @@
       padding-left: 10px;
       min-height: 30px;
       border-left: 3px solid $boston-blue;
-      align-items: center;
-      display: flex;
       ul {
         padding-left: 20px;
       }
     }
     .question {
       display: flex;
+      align-items: center;
+    }
+    .answer {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      a[href^='mailto:'] {
+        color: $light-highlight;
+        text-decoration: underline;
+      }
+      p {
+        margin: 0;
+      }
     }
   }
 }

src/pages/About/FAQ.js

@@ -40,7 +40,7 @@ class FAQ extends Component {
       const answer = (
         <div className='faq-answer'>
           <span className='faq-a'>A</span>
-          <span className='answer' dangerouslySetInnerHTML={{ __html: ele.answer }} />
+          <div className='answer' dangerouslySetInnerHTML={{ __html: ele.answer }} />
         </div>
       );