Add get involved section styles for mobile

src/hbs/index.hbs

@@ -51,7 +51,7 @@ structure:
   header: 'Structure —'
   button:
     label: 'Floor / Elevation Plans'
-    icon: 'images/telegram-logo.svg'
+    icon: 'images/file.svg'
   content:
     upper:
       - 'The starting point to conceptualize the public art structure is the Mobius bridge, a pedestrian bridge over the Avon, designed by Hakes Associates of Bristol, UK. We found this bridge to be remarkably interesting as it explores the structure of the Mobius strip, providing a connection between point A and B while maintaining a single, unified surface.'
@@ -68,9 +68,9 @@ getInvolved:
     - 'We are looking to hear about your ideas, skills and passions. This project is about fostering collaborations with creators, thinkers, burners, makers, and people excited about technology and art. Get involved by communicating with the team (artproject@truebit.io), sharing your vision and affiliation to these ideas. Anything counts as long as there is passion, rigor and commitment!'
   buttons:
     - label: 'Collaborator Guidelines'
-      icon: 'images/notes-icon.svg'
+      icon: 'images/file.svg'
     - label: 'Faq'
-      icon: 'images/notes-icon.svg'
+      icon: 'images/file.svg'
   details:
     title: 'Some of the ideas gravitating around the project are (but not limited) to:'
     list:

src/hbs/partials/components/get-involved.hbs

@@ -22,22 +22,19 @@
     </div>
 
     <div class="get-involved__details">
-      <div class="get-involved__counter">
-        {{ getInvolved.counter }}
-      </div>
-
       <div class="get-involved__details-title text--small">
         {{ getInvolved.details.title }}
       </div>
 
-      <div>
-        <ul>
-          {{#each getInvolved.details.list as |listItem|}}
-            <li>{{ listItem }}</li>
-          {{/each}}
-        </ul>
-      </div>
+      <ul class="get-involved__list text-small">
+        {{#each getInvolved.details.list as |listItem|}}
+          <li class="get-involved__list-item">{{ listItem }}</li>
+        {{/each}}
+      </ul>
 
+      <div class="get-involved__counter">
+        {{ getInvolved.counter }}
+      </div>
     </div>
 
   </div>

src/hbs/partials/components/structure.hbs

@@ -13,6 +13,7 @@
           label=structure.button.label
           outlineColor="#ff3a00"
           backgroundColor="#000"
+          icon=(svg structure.button.icon)
         }}
       </div>
     </div>

src/images/notes-icon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
-  <path fill-rule="evenodd"  fill="currentColor" d="M193.2,4911.99v0.03l-5.19,5.02V4936h18v-24.01H193.2Zm10.745,22.02H190.072v-14.97h5.221v-5.05h8.65v20.02Z" transform="translate(-188 -4912)"/>
-</svg>

src/styles/components/_get-involved.scss

@@ -4,9 +4,50 @@
 
   &__container {
     @include container;
+
+    position: relative;
   }
 
   &__description {
     font-weight: 300;
   }
+
+  &__counter {
+    font-size: 24px;
+  }
+
+  &__content,
+  &__header,
+  &__description,
+  &__button,
+  &__details-title {
+    margin-top: 24px;
+  }
+
+  &__button + &__button {
+    margin-top: 20px;
+  }
+
+  &__list {
+    margin-bottom: 20px;
+    padding-left: 10px;
+    list-style: none;
+  }
+
+  &__list-item {
+    position: relative;
+    margin: 5px 0;
+
+    &::before {
+      position: absolute;
+      top: .5em;
+      left: -.5em;
+      display: block;
+      width: 4px;
+      height: 4px;
+      border: 1px solid $color-white;
+      border-radius: 50%;
+      content: '';
+    }
+  }
 }