Merge pull request #55 from CodeWithGroup/feature/46-faq-page

Adds FAQ page

Author: KeiranWDigital

_data/questions/ad-hoc-help.yaml

@@ -0,0 +1,9 @@
+name: "ad-hoc-help"
+question: "Do I have to wait for drop-ins to ask for help?"
+answer: "            <p>
+                CodeWith isn't just a series of events, it's a community of people who do their best to help each other.
+                If you visit our <a target=\"_blank\" href=\"https://codewithpeople.slack.com\">Slack workspace</a>
+                or our <a target=\"_blank\" href=\"https://discord.gg/DrZ7B7q\">Discord server</a> there'll usually be
+                someone there. Most of the time they'll be able to help, or will at least know who to ask for an answer, 
+                but if not then at least you have some people you can talk to about the problem to try to find a way forward.
+            </p>"

_data/questions/how-to-mentor.yaml

@@ -0,0 +1,8 @@
+name: "how-to-mentor"
+question: "How do I become a mentor/event organiser?"
+answer: "            <p>
+                First of all, let someone know you're interested. Have a chat with one of the existing mentors or
+                someone on the committee so that we can get an idea of what you want to achieve and what support you
+                need. From there we'll be able to add you into the appropriate Slack channels, give you a folder
+                of your own in our Google Drive, show you how to set up events, and so on.
+              </p>"

_data/questions/recruiters.yaml

@@ -0,0 +1,13 @@
+name: "recruiters"
+question: "I'm a recruiter. Can I come and talk to your attendees?"
+answer: "            <p>
+                We're not against it, as long as it's done considerately. We have a #jobs channel in our 
+                <a target=\"_blank\" href=\"https://codewithpeople.slack.com\">Slack workspace</a> where recruiters can
+                post about jobs, employment opportunities and so on, but any discussions with attendees on those topics
+                outside of that channel must be done by explicit agreement of the attendee(s) involved.
+              </p>
+              <p>
+                The committee has talked about hosting an event specifically for recruiters, but the finer points still
+                need to be agreed. If you would like to be contacted regarding this, please email us at
+                <a href=\"mailto:contact@codewith.org.uk?subject=Recruiter Event\">contact@codewith.org.uk</a>.
+              </p>"

_data/questions/website-edits.yaml

@@ -0,0 +1,13 @@
+name: "website-edits"
+question: "I've spotted a problem/something missing on the website. Can I fix it myself?"
+answer: "            <p>
+                Yes! Our website is built from
+                <a href=\"https://github.com/CodeWithGroup/CodeWithGroup.github.io\">this GitHub repository</a>
+                and is yours to edit if you see a problem or want to make any additions. There are plenty of
+                instructions on the README page, so have a read through that and start editing.
+              </p>
+              <p>
+                If you've never used GitHub before and want someone to show you how it works, put a message in
+                the Slack workspace and someone should pick it up. There are also slides for a GitHub workshop 
+                available, so you could ask about those too.
+            </p>"

_data/questions/why-equity.yaml

@@ -0,0 +1,17 @@
+id: "why-equity"
+question: "Why do you have an equity officer and not an equality officer?"
+answer: "            <div class=\"row\">
+              <div class=\"col-md-6 text-center\">
+                  <img class=\"faq\" src=\"/images/equality.png\">
+              </div>
+              <div class=\"col-md-6 text-center\">
+                  <img class=\"faq\" src=\"/images/equity.png\">
+              </div>
+          </div>
+          <p>
+              <br />
+              Equality is where everyone is supported equally, and has the same access to support, whereas
+              equity is where people have the right support to get them to the same level as others even
+              when they start from a less advantageous position. We realise that some people are going to need more
+              help than others - for all sorts of reasons - and we wanted to make that clear from the outset.
+          </p>"

_includes/question.html

@@ -0,0 +1,16 @@
+<div class="card faq-question-card">
+    <div class="card-header" id="heading-{{ include.question.name }}">
+        <button class="btn btn-link faq-question collapsed" data-toggle="collapse" data-target="#collapse-{{ include.question.name }}" aria-expanded="false"
+            aria-controls="collapse-{{ include.question.name }}">
+            {{ include.question.question }}
+        </button>
+    </div>
+
+    <div id="collapse-{{ include.question.name }}" class="collapse" aria-labelledby="heading-{{ include.question.name }}" data-parent="#accordion">
+        <div class="card-body">
+            <p>
+                {{ include.question.answer }}
+            </p>
+        </div>
+    </div>
+</div>

_includes/sidebar.html

@@ -63,6 +63,12 @@
                         <span>Feedback</span>
                     </a>
                 </li>
+                <li class="sidebar-dropdown">
+                    <a href="{{site.url}}/faq">
+                        <i class="fas fa-question"></i>                       
+                         <span>FAQ</span>
+                    </a>
+                </li>
                 <li class="sidebar-dropdown">
                     <a href="{{site.url}}/branding">
                         <i class="fas fa-palette"></i>
@@ -78,4 +84,4 @@
             </ul>
         </div>
     </div>
-</nav>
+</nav>

contact.html

@@ -120,7 +120,7 @@ <h2>Social Media</h2>
         </p>
         <p>
             <span class="fab fa-slack text-green"></span>&nbsp;
-            <a target="_blank" href="https://Launchpass.com/codewithpeople">Slack Signup (Launchpass)</a>
+            <a target="_blank" href="https://launchpass.com/codewithpeople">Slack Signup (Launchpass)</a>
         </p>
         <p>
             <span class="fab fa-twitter text-green"></span>&nbsp;

css/style.css

@@ -290,17 +290,13 @@ iframe {
 
 /* Logo */
 
-.main-logo {
-    padding-right: 1em;
-}
-
 .main-logo img {
     height: 48pt;
 }
 
 .main-logo-title {
     text-align: center;
-    width: 92%;
+    width: 100%;
 }
 
 .main-logo-title h1 {
@@ -411,14 +407,31 @@ div.event-book-button {
     color: var(--colour-black);
 }
 
-
-
 /* Twitter */
 
 #twitterButton i {
     font-size: 1.2em;
 }
 
+/*FAQ*/
+
+.faq-question {
+    color: var(--colour-light-primary)
+}
+
+.faq-question:hover {
+    color: var(--colour-dark-primary)
+}
+
+.faq-question-card {
+    margin-left: 0;
+    padding: 0;
+}
+
+.faq-question-card img.faq {
+    max-height: 205px;
+}
+
 /* Branding */
 .white-asset {
     background-color: var(--colour-dark-primary);
@@ -479,6 +492,10 @@ div.event-book-button {
         width: 120px;
     }
 
+    .main-logo {
+        padding-right: 1em;
+    }
+
     span#small-screen-break {
         display: none;
     }
@@ -505,6 +522,7 @@ div.event-book-button {
 }
 
 @media screen and (min-width: 992px) {
+
     .masthead,
     .mastfoot,
     .cover-container {

faq.html

@@ -0,0 +1,22 @@
+---
+permalink: /faq/
+layout: default
+suffixes:
+- Help,
+- Questions,
+- Support,
+- Us
+title: Frequently Asked Questions
+---
+
+<h1>{{page.title}}</h1>
+
+<p>Below are some questions we often get asked. If you have any other questions you can reach us on the <a
+        href="{{site.url}}/contact">contact page</a>.</p>
+
+<div id="accordion">
+    {% for question_hash in site.data.questions %}
+    {% assign question = question_hash[1] %}
+    {% include_relative _includes/question.html question=question %}
+    {% endfor %}
+</div>