reposition frontpage feature list on mobile

Author: dpatanin

src/components/Footer.js

@@ -1,32 +1,31 @@
-import React from 'react';
-import { graphql, Link, StaticQuery } from 'gatsby';
+import React from "react";
+import { graphql, Link, StaticQuery } from "gatsby";
 
 const Footer = props => (
   <div className="footer-strip">
     <div className="container">
       <div className="row">
         <div className="col-12">
           <div className="footer">
-            <h3 className="footer-title">{props.data.site.siteMetadata.title}</h3>
+            <h3 className="footer-title">
+              {props.data.site.siteMetadata.title}
+            </h3>
             <ul className="footer-menu">
               <li>
-                {' '}
+                {" "}
                 <Link to="/">Home</Link>
               </li>
               <li>
-                {' '}
+                {" "}
                 <Link to="/contact">Contact</Link>
               </li>
               <li>
-                {' '}
+                {" "}
                 <a href="https://www.iteratec.de/impressum/">Impressum</a>
               </li>
               <li className="copyright">
-                ©
-{' '}
-{new Date().getFullYear()}
-{' '}
-{props.data.site.siteMetadata.company}
+                © {new Date().getFullYear()}{" "}
+                {props.data.site.siteMetadata.company}
               </li>
             </ul>
           </div>

src/pages/index.js

@@ -58,7 +58,7 @@ const Home = (props) => {
           <div className="feature-list" >
             <ul className="pro">
               <li> <img src={approved}/>
-                Teams with a medium to advanced security program</li>
+                Teams with an already medium to advanced security program</li>
               <li> <img src={approved} />
                 Multi-team setups</li>
               <li> <img src={approved} />
@@ -67,7 +67,7 @@ const Home = (props) => {
 
             <ul className="con">
               <li> <img src={notApproved}/>
-                Teams just starting with a security program</li>
+                As the first security steps</li>
               <li><img src={notApproved} />
                 Teams with separate dev, ops and security teams</li>
             </ul >

src/scss/components/_feature.scss

@@ -51,6 +51,10 @@
       padding: 0;
       float: left;
       max-width: 45%;
+      @include media-breakpoint-up(sm) {
+        max-width: 90%;
+        float: unset;
+      }
       li {
         img {
           width: 40px;
@@ -74,6 +78,10 @@
       padding: 0;
       max-width: 40%;
       float: right;
+      @include media-breakpoint-up(sm) {
+        max-width: 90%;
+        float: unset;
+      }
       max-width: 45%;
       li {
         img {

src/scss/components/_main-menu-mobile.scss

@@ -1,4 +1,4 @@
-$color-main: $primary;
+$color-main: $iteragenta;
 $color-active: #fff;
 $color-link: #fff;