Add link cards to homepage

README.md

@@ -49,7 +49,8 @@ CSS if desired with the `width` attribute.
 ```
 
 Columns stack up right to left. To force a column out of order all the way to
-the right use the `flow-opposite` class on the column.
+the right use the `flow-opposite` class on the column (but remain first on
+smaller screens).
 
 ```html
 <div class="container">
@@ -75,3 +76,13 @@ desktop, use `hide-desktop` instead.
 Another note: I use [box-sizing (as suggested by Paul
 Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think
 makes dealing with sizing elements a lot more sane.
+
+##Attributions##
+[Book](http://thenounproject.com/term/book/23611/) designed by [Nherwin
+Ardoña](http://thenounproject.com/nherwinma) from the Noun Project.
+
+[Profile](http://thenounproject.com/term/profile/20733/) designed by [Ryan
+Beck](http://thenounproject.com/RyanBeck) from the Noun Project.
+
+[Photos](http://thenounproject.com/term/photos/29898/) designed by [Ryan
+Beck](http://thenounproject.com/RyanBeck) from the Noun Project.

css/main.css

@@ -351,3 +351,36 @@ blockquote p {
     margin-top: 0;
   }
 }
+
+.link-card {
+  text-align: center;
+  text-decoration: none;
+}
+
+.link-card img {
+  max-width: 64px;
+  max-height: 64px;
+}
+
+.mobile-half {
+  padding: 0;
+  float: left;
+  width: 50%;
+}
+
+@media (min-width: 40rem) {
+  .mobile-half {
+    padding: 0;
+  }
+}
+
+a.no-decoration {
+  color: #444;
+}
+a.no-decoration:visited {
+  color: #444;
+}
+a.no-decoration:hover {
+  color: #444;
+  text-decoration: none;
+}

index.html

@@ -40,4 +40,38 @@ title: Tyler Hallada
       </div>
     </div>
   </div>
+  <div class="row clearfix">
+    <div class="column fourth mobile-half">
+      <a href="/blog" class="no-decoration">
+        <div class="link-card card">
+          <img src="img/book.png"/><br/>
+          <span>Blog</span>
+        </div>
+      </a>
+    </div>
+    <div class="column fourth mobile-half">
+      <a href="/resume.pdf" class="no-decoration">
+        <div class="link-card card">
+          <img src="img/resume.png"/><br/>
+          <span>Resume</span>
+        </div>
+      </a>
+    </div>
+    <div class="column fourth mobile-half">
+      <a href="http://github.com/thallada" class="no-decoration">
+        <div class="link-card card">
+          <img src="img/github.png"/><br/>
+          <span>Github</span>
+        </div>
+      </a>
+    </div>
+    <div class="column fourth mobile-half">
+      <a href="/photos" class="no-decoration">
+        <div class="link-card card">
+          <img src="img/photos.png"/></br>
+          <span>Photos</span>
+        </div>
+      </a>
+    </div>
+  </div>
 </div>