moving github stars to their own div and adding css styles to _home.css

Author: Joseph Damiba

_posts/2015-07-26-index.html

@@ -47,9 +47,10 @@ <h2>Plotly's Open Source Graphing Libraries:</h2>
                                     <h2>Plotly Python Open Source Graphing Library</h2>
                                     <!--<p>Anyone making charts or dashboards online.</p>-->
                                 </div>
-                                <div class="category-meta">
-                                    <!-- Place this tag where you want the button to render. -->
-                                    <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=plotly.py&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>                                </div>
+                            </div>
+                            <div class="github-stars">
+                                <!-- Place this tag where you want the button to render. -->
+                                <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=plotly.py&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
                             </div>
                         </a>
                     </li>
@@ -63,9 +64,12 @@ <h2>Plotly Python Open Source Graphing Library</h2>
                                 <div class="category-meta">
                                     <h2>Plotly MATLAB Open Source Graphing Library</h2>
                                     <!--<p>Engineers and data scientists using Python, R, Matlab or Javascript.</p>-->
-                                    <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=MATLAB-Online&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
                                 </div>
                             </div>
+                            <div class="github-stars">
+                                <!-- Place this tag where you want the button to render. -->
+                                <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=MATLAB-Online&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+                            </div>
                         </a>
                     </li>
                     <li>
@@ -82,9 +86,12 @@ <h2>Plotly R Open Source Graphing Library</h2>
                                     <!--Upload Excel sheets to plotly to build best-practice charts, reports and-->
                                     <!--dashboards.-->
                                     <!--</p>-->
-                                    <iframe src="https://ghbtns.com/github-btn.html?user=ropensci&repo=plotly&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
                                 </div>
                             </div>
+                            <div class="github-stars">
+                                <!-- Place this tag where you want the button to render. -->
+                                <iframe src="https://ghbtns.com/github-btn.html?user=ropensci&repo=plotly&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+                            </div>
                         </a>
                     </li>
                     <li>
@@ -100,9 +107,12 @@ <h2>Plotly JavaScript Open Source Graphing Library</h2>
                                     <!--Upload Excel sheets to plotly to build best-practice charts, reports and-->
                                     <!--dashboards.-->
                                     <!--</p>-->
-                                    <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=plotly.js&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
                                 </div>
                             </div>
+                            <div class="github-stars">
+                                <!-- Place this tag where you want the button to render. -->
+                                <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=plotly.js&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+                            </div>
                         </a>
                     </li>
                     <li>
@@ -114,9 +124,12 @@ <h2>Plotly JavaScript Open Source Graphing Library</h2>
                                         alt="Plotly DASH Open Source Graphing Library"></div>
                                 <div class="category-meta">
                                     <h2>Plotly Dash Open Source Graphing Library</h2>
-                                    <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=dash&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
                                 </div>
                             </div>
+                            <div class="github-stars">
+                                <!-- Place this tag where you want the button to render. -->
+                                <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=dash&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+                            </div>
                         </a>
                     </li>
                 </ul>

scss/_pages/_home.scss

@@ -118,6 +118,14 @@
         padding: $unit*3;
         max-width: 100%;
         //margin-top:$unit*2.5;
+        .github-stars{
+          padding-top: 20px;
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+          flex-wrap: wrap;
+          max-width: 100%;
+        }
       }
 
       ul {
@@ -224,4 +232,4 @@
       }
     }
   }
-}
+}