issue #370 incorporate community mission statement (#380)

Co-authored-by: Tina Yip <98424339+tiyiprh@users.noreply.github.com>
Co-authored-by: Andrew Klychkov <34477873+Andersson007@users.noreply.github.com>

conf.py

@@ -164,6 +164,7 @@
             ("/how-ansible-works/", "How Ansible works", ""),
             ("/ecosystem/", "Ansible ecosystem", ""),
             ("/ansible-community-training/", "Ansible community training", ""),
+            ("/mission-statement/", "Our mission statement", ""),
             ("/contact-us/", "Contact us", ""),
           ),
           "Resources", ""

pages/community-mission-statement.md

@@ -0,0 +1,7 @@
+---
+description: ''
+slug: mission-statement
+title: Our mission
+type: text
+template: mission-statement.tmpl
+---

templates/mission-statement.tmpl

@@ -0,0 +1,36 @@
+{% extends "base.tmpl" %}
+{% block content %}
+  <div class="grid-wrapper mission-statement-title">
+    <div class="width-12-12 width-12-12-m">
+      <h1>Our mission</h1>
+    </div>
+  </div>
+  <div class="grid-wrapper mission-statement-body">
+    <div class="width-12-12 width-12-12-m">
+      <p>
+        In the Ansible community, our mission is to <b>produce</b>, <b>maintain</b>, and <b>popularize simple</b>, <b>flexible</b>, and <b>powerful open-source software tools</b> tailored to automating a large variety of tasks.
+      </p>
+      <p>
+        We strive to innovate in making infrastructure configuration and management as <b>effortless</b> and <b>efficient</b> as possible with automation, enabling people to focus on their core objectives.
+      </p>
+      <p>
+        We welcome members from all skill levels to participate in our open, inclusive, and vibrant community. Whether you are an expert or just beginning your journey with Ansible, you are encouraged to contribute, share insights, and collaborate with fellow enthusiasts!
+      </p>
+    </div>
+    <div class="mission-statement-image-row">
+      <img class="mascot-right-margin"
+           src="/images/mascot-picket-one.svg"
+           width="auto"
+           height="250px"
+           alt="Ansible community mascot" />
+      <img src="/images/mascot-picket-two.svg"
+           width="auto"
+           height="250px"
+           alt="Ansible community mascot" />
+      <img src="/images/mascot-picket-three.svg"
+           width="auto"
+           height="250px"
+           alt="Ansible community mascot" />
+    </div>
+  </div>
+{% endblock content %}

themes/ansible-community/sass/_homepage-contribute-band.scss

@@ -33,12 +33,9 @@
   }
 }
 
-
-
 .contribute-bull {
   display: flex;
   img {
-
     @media screen and (max-width: 768px) {
       display: none;
     }

themes/ansible-community/sass/_mission-statement.scss

@@ -0,0 +1,49 @@
+.mission-statement-title {
+  margin: 0 -13rem;
+  padding: 2rem 13rem;
+  background-color: $grey94;
+  h1 {
+    text-align: center;
+  }
+
+  @media screen and (max-width: 1170px) {
+    margin: 0 -6rem;
+    padding: 2rem 6rem;
+  }
+  @media screen and (max-width: 768px) {
+    margin: 0 -2rem;
+    padding: 1rem 2rem;
+  }
+}
+
+.mission-statement-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 2rem 13rem;
+
+  @media screen and (max-width: 1170px) {
+    padding: 1rem 6rem;
+  }
+  @media screen and (max-width: 768px) {
+    padding: 1rem 2rem;
+  }
+}
+
+.mission-statement-image-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2rem;
+  .mascot-right-margin {
+    margin-right: 1.25rem;
+  }
+  @media screen and (max-width: 990px) {
+    img {
+      display: none;
+    }
+  }
+}

themes/ansible-community/sass/main.scss

@@ -21,6 +21,7 @@
 @import "homepage-events-band";
 @import "homepage-platform-band";
 @import "ecosystem";
+@import "mission-statement";
 @import "ansible-content";
 
 body {

themes/ansible-community/templates/base.tmpl

@@ -24,7 +24,7 @@
   {% endif %}
   {% if permalink != '/' %}
     {% include "base_nav.tmpl" %}
-    <div class="body-content {% if permalink.startswith('/ecosystem/') %}full-width-band{% else %}center-band{% endif %}">
+    <div class="body-content {% if permalink.startswith('/ecosystem/')%}full-width-band{% elif permalink.startswith('/mission-statement/') %}{% else %}center-band{% endif %}">
         <!--Body content-->
         {{ template_hooks['page_header']() }}
         {% block extra_header %}{% endblock extra_header %}