add new buttons

_sass/layout.scss

@@ -415,21 +415,48 @@ a:hover {
 
 /* Fourth button color */
 .flip-cards li:nth-child(4) > .button {
-  background-color: rgba(0, 80, 109, 1);
+  background-color: rgb(64, 109, 0);
 }
 .flip-cards li:nth-child(4) > .panel {
-  background-color: rgba(0, 80, 109, 0.8);
+  background-color: rgba(64, 109, 0, 0.8);
 }
 
 /* Fifth button color */
 .flip-cards li:nth-child(5) > .button {
-  background-color: rgba(0, 130, 161, 1);
+  background-color: rgb(161, 142, 0);
 }
 .flip-cards li:nth-child(5) > .panel {
-  background-color: rgba(0, 130, 161, 0.8);
+  background-color: rgba(161, 142, 161, 0.8);
 }
 
-/* Sixth (last) button color */
+/* Sixth button color */
+.flip-cards li:last-child > .button {
+  background-color: rgb(149, 147, 26);
+}
+.flip-cards li:last-child > .panel {
+  background-color: rgba(149, 147, 26, 0.8);
+  color: white;
+}
+
+/* 7th button color */
+.flip-cards li:last-child > .button {
+  background-color: rgba(40, 57, 77, 1);
+}
+.flip-cards li:last-child > .panel {
+  background-color: rgba(40, 57, 77, 0.8);
+  color: white;
+}
+
+/* 8th button color */
+.flip-cards li:last-child > .button {
+  background-color: rgba(40, 57, 77, 1);
+}
+.flip-cards li:last-child > .panel {
+  background-color: rgba(40, 57, 77, 0.8);
+  color: white;
+}
+
+/* Nineth (last) button color */
 .flip-cards li:last-child > .button {
   background-color: rgba(40, 57, 77, 1);
 }

index.md

@@ -44,7 +44,7 @@ The material shared here is written and maintained by an active community of WIN
 
 
       <ul class="small-block-grid-3 medium-block-grid-3 flip-cards">
-<!-->
+
          <li ontouchstart="this.classList.toggle('hover');">
           <div class="large button card-front">
             <a href="https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/getting-started/"><nobr>Getting Started</nobr></a>
@@ -59,7 +59,7 @@ The material shared here is written and maintained by an active community of WIN
             </div>
           </div>
         </li>
--->
+
         <li ontouchstart="this.classList.toggle('hover');">
           <div class="large button card-front">
             <a href="https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/protocols/"><nobr>MR Protocols</nobr></a>
@@ -140,7 +140,7 @@ The material shared here is written and maintained by an active community of WIN
             <!-- <small class="clear"><a href="http://git.fmrib.ox.ac.uk/">Use this tool</a></small> -->
           </div>
         </li>
-<!-->
+
          <li ontouchstart="this.classList.toggle('hover');">
           <div class="large button card-front">
             <a href="https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/preregistration/"><nobr>Preregistration</nobr></a>
@@ -170,7 +170,7 @@ The material shared here is written and maintained by an active community of WIN
             </div>
           </div>
         </li>
--->
+
         <li ontouchstart="this.classList.toggle('hover');">
           <div class="large button card-front">
             <a href="https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/community/">Community</a>
@@ -207,6 +207,8 @@ The material shared here is written and maintained by an active community of WIN
 </section>
 
 
+<!-- NOTE: to add new buttons, need to also add colors in layout.scss! -->
+
 
 <!-- [![tools](img/btn-tools.png)](https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/tools/)  [![community](img/btn-community.png)](https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/community/)  [![ambassadors](img/btn-ambass.png)](https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/ambassadors/)  [![events](img/btn-events.png)](https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/events/)  [![gitlab](img/btn-git.png)](https://open.win.ox.ac.uk/pages/open-science/community/Open-WIN-Community/docs/gitlab/) -->