Add some featured-in references

LocalData · Jan 22, 2014 · e021895 · e021895
1 parent 5ba9bf0
commit e021895
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -15,6 +15,10 @@ url: http://localhost/~username/path/localdata.com/_site
 
 Watch the directory for changes:
 
+`sass --watch css/sass/styles.scss:css/app.css`
+
+and
+
 `jekyll build -w --config _config.yml,_localconfig.yml --drafts`
 
 View through your local server: [http://localhost/~username/path/localdata.com/_site/](http://localhost/~username/path/localdata.com/_site/)
diff --git a/css/app.css b/css/app.css
@@ -746,6 +746,51 @@ footer .social {
 footer .social a:last-child {
   margin-right: 0; }
 
+/* Featured-in/Accolades ---------------------------------------------------- */
+.featured {
+  padding-top: 50px;
+  text-align: center;
+  overflow: auto;
+  padding-bottom: 50px; }
+  @media all and (max-width: 768px) {
+    .featured {
+      white-space: nowrap;
+      overflow-y: hidden;
+      overflow: scroll;
+      height: 200px; } }
+
+.featured-item {
+  display: inline-block;
+  width: 42%;
+  float: left;
+  height: 150px;
+  margin: 10px 4%;
+  font-size: 17px; }
+  @media all and (max-width: 768px) {
+    .featured-item {
+      height: auto;
+      width: 200px;
+      *display: inline;
+      /* For IE7*/
+      *zoom: 1;
+      /* For IE7*/
+      float: none;
+      white-space: normal; } }
+
+.featured-item a {
+  display: block;
+  text-align: center; }
+
+.featured-item .quote {
+  text-align: center;
+  padding-bottom: 15px; }
+
+#psfk img {
+  max-height: 148px; }
+
+#bestapps img {
+  max-height: 40px; }
+
 /* Partners------------------------------------------------------------------ */
 .partners {
   text-align: center; }

diff --git a/css/sass/components.scss b/css/sass/components.scss
@@ -374,6 +374,56 @@ header .spacer {
 /* Footer ------------------------------------------------------------------- */
 @import "shared/footer";
 
+/* Featured-in/Accolades ---------------------------------------------------- */
+.featured {
+  padding-top: 50px;
+  text-align: center;
+  overflow: auto;
+  padding-bottom: 50px;
+
+  @media all and (max-width: 768px) {
+    white-space: nowrap;
+
+    overflow-y: hidden;
+    overflow: scroll;
+    height: 200px;
+  }
+}
+
+.featured-item {
+  display: inline-block;
+  width: 42%;
+  float: left;
+  height: 150px;
+  margin: 10px 4%;
+  font-size: 17px;
+
+  @media all and (max-width: 768px) {
+    height: auto;
+    width: 200px;
+    *display:inline;/* For IE7*/
+    *zoom:1;/* For IE7*/
+    float: none;
+    white-space: normal;
+  }
+}
+
+.featured-item a {
+  display: block;
+  text-align: center;
+}
+
+.featured-item .quote {
+  text-align: center;
+  padding-bottom: 15px;
+}
+
+#psfk img {
+  max-height: 148px;
+}
+#bestapps img {
+  max-height:40px;
+}
 
 /* Partners------------------------------------------------------------------ */
 .partners {

diff --git a/index.html b/index.html
@@ -99,6 +99,26 @@ <h2>Custom survey builder</h2>
       </div>
     </div>
 
+    <div class="out contrast">
+      <div class="in rule featured">
+
+          <div class="featured-item" id="psfk">
+            <div class="quote">Featured in PSFK&apos;s Future of Cities report</div>
+            <a href="http://www.psfk.com/publishing/future-of-cities">
+              <img class="press-logo" src="img/press/future-of-cities.png"></img>
+            </a>
+          </div> <!-- /press-item -->
+
+          <div class="featured-item" id="bestapps">
+            <div class="quote">Planetizen Best Planning Apps for 2014</div>
+            <a href="http://www.planetizen.com/node/66853">
+              <img class="press-logo" src="img/press/planetizen-logo_lightened.png"></img>
+            </a>
+          </div> <!-- /press-item -->
+
+      </div> <!-- /in -->
+    </div> <!-- /out -->
+
     <div class="out contrast">
       <div class="in rule partners">
         <h3>LocalData is used by:</h3>
@@ -154,7 +174,7 @@ <h3>LocalData is used by:</h3>
     </div>
 
     <div class="out contrast">
-      <div class="in">
+      <div class="in rule">
         <h3>What people are saying about LocalData:</h3>
 
             <div class="press-box">