Merge pull request #106 from mbuchthal/newspapers

place newspapers into newspaper section with styling and mixin added

public/index.html

@@ -268,7 +268,7 @@ <h4>Our Apps Are Made By Professionals, Meet Them Here</h4>
     </div>
       <ul class="team">
         <li>
-          
+
             <figure class="profile">
               <a class="circular-frame">
                   <img src="images/grant.jpg" alt="Portrait of Ulysses S Grant"/>
@@ -318,32 +318,32 @@ <h4>Our Apps Are Made By Professionals, Meet Them Here</h4>
         </li>
       </ul>
     </section>
-    <section>
+    <section class="newspaper-section">
       <h1>AppBox Featured In ...</h1>
-        <ul>
+        <ul class="newspaper-list">
           <li>
-            <a href="http://www.nytimes.com/2009/09/10/technology/personaltech/10app.html?_r=0">The New York Times</a>
+            <a href="http://www.nytimes.com/2009/09/10/technology/personaltech/10app.html?_r=0"></a>
           </li>
           <li>
-            <a href="">Forbes</a>
+            <a href=""></a>
           </li>
           <li>
-            <a href="">Wall Street Journal</a>
+            <a href=""></a>
           </li>
           <li>
-            <a href="">the Guardian</a>
+            <a href=""></a>
           </li>
           <li>
-            <a href="">the Verge</a>
+            <a href=""></a>
           </li>
           <li>
-            <a href="">Tech Crunch</a>
+            <a href=""></a>
           </li>
           <li>
-            <a href="">lifehacker</a>
+            <a href=""></a>
           </li>
           <li>
-            <a href="">Mashable</a>
+            <a href=""></a>
           </li>
         </ul>
     </section>

public/sass/main.scss

@@ -6,6 +6,7 @@
 @import "modules/mixins/skewed_div";
 @import "modules/mixins/button-borders";
 @import "modules/mixins/flex-box";
+@import "modules/mixins/newspapers";
 @import "modules/animated-dots";
 
 @import "modules/icon-styles";
@@ -25,6 +26,7 @@
 @import "partials/form";
 @import "partials/circular-images";
 
+@import "partials/newspaper-section";
 @import "partials/best-way";
 @import "partials/get-it-free";
 @import "partials/paragraphs";

public/sass/modules/mixins/_newspapers.scss

@@ -0,0 +1,13 @@
+
+/* -- Adds newspaper svg/png --*/
+
+@mixin newspaper($url, $background-size) {
+  content: '';
+  height: 3em;
+  width: 12em;
+  background: $url;
+  background-size: $background-size;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: block;
+}

public/sass/partials/_newspaper-section.scss

@@ -0,0 +1,49 @@
+
+.newspaper-section {
+  h1 {
+    font: $head-big-light-font;
+    text-align: center;
+    margin-top: 2em;
+    margin-bottom: 1em;
+    color: $color-5;
+  }
+}
+
+
+
+.newspaper-list {
+  @include flexbox;
+  @media only screen and (min-width: 850px) {
+    margin: auto 8em;
+  }
+  @media only screen and (min-width: 1200px) {
+    margin: auto 12em;
+  }
+
+  li {
+    &:first-child {
+      @include newspaper(url("../images/NewYorkTimes.svg.png"), 90%)
+    }
+    &:nth-child(2) {
+      @include newspaper(url("../images/Forbes_logo.svg"), 40%)
+    }
+    &:nth-child(3) {
+      @include newspaper(url("../images/The_Wall_Street_Journal_Logo.svg.png"), 90%)
+    }
+    &:nth-child(4) {
+      @include newspaper(url("../images/The_Guardian.svg.png"), 75%)
+    }
+    &:nth-child(5) {
+      @include newspaper(url("../images/The_Verge_wordmark.svg"), 50%)
+    }
+    &:nth-child(6) {
+      @include newspaper(url("../images/tc-techcrunch.svg"), 60%)
+    }
+    &:nth-child(7) {
+      @include newspaper(url("../images/lifehacker-uk.svg"), 60%)
+    }
+    &:nth-child(8) {
+      @include newspaper(url("../images/Mashable.png"), 55%)
+    }
+  }
+}