em is awesome with fonts

_data/navigation.yml

@@ -4,9 +4,6 @@
 - title: about
   url: /me
 
-- title: portfolio
-  url: /work
-
 - title: github
   url: https://github.com/getmicah
 

_data/websites.yml

@@ -9,11 +9,3 @@
 - title: GetPeppers
   category: website
   url: http://getpeppers.com
-
-- title: Fatso
-  category: theme
-  url: https://github.com/getmicah/fatso
-
-- title: Beam
-  category: theme
-  url: https://github.com/getmicah/beam

_includes/head.html

@@ -16,4 +16,5 @@
 {% endif %}
 
 <link rel="icon" href="/assets/img/favicon.png">
+<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
 <link rel="stylesheet" type="text/css" href="/assets/css/main.css">

_sass/_config.scss

@@ -1,3 +1,7 @@
 // COLORS
 $color-primary: #272727;
 $color-background: #FFFFFF;
+
+// FONT
+$font-url: "https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic";
+$font-family: "'Ubuntu Mono', ";

_sass/_reset.scss

@@ -15,7 +15,7 @@ time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
-	font-size: 100%;
+	font-size: 1em;
 	font: inherit;
 	vertical-align: baseline;
 }

assets/css/main.scss

@@ -7,6 +7,8 @@
 body {
     color: $color-primary;
     background: $color-background;
+    font-family: 'Inconsolata', ;
+    font-size: 100%;
 }
 h1, h2 {
     margin-bottom: 5px;
@@ -38,26 +40,25 @@ ul {
 .wrapper {
     max-width: 600px;
     margin: auto;
-    padding: 15px;
-    @media screen and (min-width: 570px) {
-        padding: 30px;
+    padding: 30px;
+    padding-top: 60px;
+    @media screen and (max-width: 570px) {
+        padding: 20px;
     }
 }
 
 
 .main {
-    margin-bottom: 30px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #000;
-    @media screen and (min-width: 570px) {
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-        padding-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding-bottom: 40px;
+    @media screen and (max-width: 570px) {
+        display: block;
     }
     h1 {
-        font-size: 36px;
-        margin-right: 20px;
+        font-size: 2em;
+        margin-bottom: 0;
     }
     ul {
         margin-top: 10px;
@@ -69,29 +70,38 @@ ul {
 }
 
 
-.blog {
+.work {
+    padding-bottom: 30px;
     h1 {
-        font-size: 26px;
+        font-size: 1.4em;
+        margin-bottom: 5px;
+    }
+}
+
+
+
+.blog {
+    padding-bottom: 30px;
+    h1 {
+        font-size: 1.4em;
+        margin-bottom: 5px;
     }
 }
 
 
 .post {
+    padding-bottom: 30px;
     h1 {
-        font-size: 26px;
-    }
-}
-
-
-.portfolio {
-    h1 {
-        font-size: 26px;
+        font-size: 1.4em;
+        margin-bottom: 5px;
     }
 }
 
 
 .about {
+    padding-bottom: 30px;
     h1 {
-        font-size: 26px;
+        font-size: 1.4em;
+        margin-bottom: 5px;
     }
 }

index.html

@@ -3,11 +3,24 @@ layout: default
 ---
 
 
-<div class="blog">
+<div class="work">
+    <h1>Web Design:</h1>
     <ul>
-        {% for post in site.posts %}
+        {% for websites in site.data.websites %}
         <li>
-            <span class="date">{{ post.date | date: '%b %d %Y' }}</span> | <a href="{{ post.url }}">{{ post.title }}</a>
+            <a href="{{ websites.url }}">{{ websites.url }}</a>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
+
+
+<div class="blog">
+    <h1>Blog Posts:</h1>
+    <ul>
+        {% for post in site.posts %}
+        <li>
+            <span class="date">{{ post.date | date: '%b %d %Y' }}</span> - <a href="{{ post.url }}">{{ post.title }}</a>
         </li>
         {% endfor %}
     </ul>

me/index.html

@@ -4,5 +4,5 @@ layout: default
 
 
 <div class="about">
-    <h1>About</h1>
+
 </div>

work/index.html

@@ -1,14 +0,0 @@
----
-layout: default
----
-
-
-<div class="portfolio">
-    <ul>
-        {% for project in site.data.projects %}
-        <li>
-            <a href="{{ project.url }}">{{ project.title }}</a>
-        </li>
-        {% endfor %}
-    </ul>
-</div>