--- /dev/null
+---\r
+layout: post\r
+date: 2013-01-20\r
+title: Fem Freq Logo\r
+categories: design commercial\r
+---\r
+\r
+\r
+\r
+logotype spec\r
+\r
 
 <div class="nav">
   
+  <h2><a href="{{site.baseurl}}/">{{site.name}}</a></h2>
+
   <ul>
-    <li><a href="{{site.baseurl}}/">{{site.name}}</a></li>
+    <li></li>
     <li><a href="{{ site.baseurl }}/about/">about</a></li>
 
-    <li> </li>
 
     {% for category in site.categories %}
+      <li> </li>
+      <li><h3 class="header"><a href="/{{ category[0] }}/">{{ category[0] }}</a></h3></li>
+      {% for posts in category %}
+        {% for post in posts %}
+          <li class="indent"><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
+        {% endfor %}
+      {% endfor %}      
+    {% endfor %}  
+
+<!-- 
+
+{% for category in site.categories %}
+  <h3 class="date">{{ category | first }}</h3>  
+  <ul class="posts">
+    {% for posts in category %}
+      {% for post in posts %}
+        <li><h2><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h2></li>
+      {% endfor %}
+    {% endfor %}
+  </ul>  
+{% endfor %}
+
+  <h3 class="date">∞</h3>
   <li>
-    <a href="{{ site.baseurl }}/{{ category[0] }}/">
-      {{ category[0] }}
-    </a>
+  <h2><a href="/past/">PAST WORK</a></h2>
   </li>
 
-      {% endfor %}  
+ -->
+
   
     <li> </li>
     
     <label for="mce-EMAIL">email announce list</label><br />
     <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
       <div style="position: absolute; left: -5000px;"><input type="text" name="b_5f627417bdb5e6d2fe0b56ae3_ce46411f5e" tabindex="-1" value=""></div>
-      <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+      <div class="clear" style="margin-top:0.5em"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
       </div>
   </form>
   </div>
 
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>{{ site.name }} - {{ page.title }}</title>
       <meta name="viewport" content="width=device-width">
+
+      <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding" rel="stylesheet">
+
       <link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
       <link rel="stylesheet" href="{{ site.baseurl }}/css/marx.css">
       <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
 
 layout: default
 ---
 
-<h1>{{ page.title }}</h1>
-<h2>{{ page.date | date: "%Y" }}</h2>
+<h2><a href="/{{ page.categories[0] }}">{{ page.categories[0] }}</a> > {{ page.title }}</h2>
+<h3>{{ page.date | date: "%Y" }}</h3>
 
 <div class="post">
 {{ content }}
 
   font-family: lettergothic;
   src: url(letter_gothic.ttf);
 }
+@font-face
+{
+  font-family: lettergothic-bold;
+  src: url(letter_gothic-bold.ttf);
+}
 
 body {
   font-size:12px;
   text-transform: uppercase;
 }
 h1, h2, h3, h4, h5, h6 {
-  font-family:lettergothic;
+  font-family:lettergothic-bold;
   /*font-size: 1em;*/
   color:#000;
   font-weight:bold;
 {
   /*content:" ---- ";*/
 }
+.site > h1 {
+  margin:0.105em 0;
+}
 .site > h2 {
   margin:2em 0;
 }
   left: 1em;
 }
 
-.thumbs, .thumbs li {
+ul.thumbs {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+ul.thumbs, ul.thumbs li {
   margin:0;
   list-style-type:none;
   padding:0;
 }
+ul.thumbs li {
+  width:200px;  
+  margin:1em;
+}
+ul.thumbs .img {
+  background:#444;
+  min-width:100px;
+  min-height:100px;
+  display:inline-block;
+  line-height:0;
+  padding:0;
+  margin:0;
+}
+/*
 .thumbs li {
-  /*display:inline-block;*/
-  margin:2em 0 4em 0;
-  max-width:460px;
+  display:inline-block;
 }
 .thumbs li > a {
   display:block;
   min-height:100px;
   background:#aaa;
 }
+*/
 
 
 .posts {
 /*****************************************************************************/
 
 .site {
-  margin: 0em 0 3em 18em;
+  margin: 0em 0 5em 22em;
   padding: 0 0 0 0em;
   max-width: 800px;
   position:absolute;
   left:1em;
   display:block;
   height:2em;
+  font-size:1.0em;
+  font-weight:bold;
 }
 .nav ul {
   text-transform: uppercase;
-  font-family:lettergothic;
-  font-size:1.25em;
+  font-family:lettergothic-bold;
   line-height:1.4em;
 }
-.nav ul, .nav ul li {
+.nav ul, .nav li {
   margin:0;
   padding:0;
   list-style-type:none;
 }
+.nav h2 {
+  margin-bottom:0.1em;
+}
+.nav h3.header {
+  font-size:.8em;
+}
+.nav a {
+  
+}
+.nav .indent {
+  padding-left:0.5em;
+}
 
 
 
 
 /* Posts */
 .post {
-  margin-top:2em;
   padding-bottom:3em;
   margin-bottom:3em;
 }
 
 title: Projects
 ---
 
-<ul class="index thumbs">
+<ul class="thumbs">
   
 {% for post in site.categories.design %}
 {% if post.url %}
   
   <li>
   <a href="{{ site.baseurl }}{{ post.url }}">
-    <div class="img"><img src="{{ post.thumb }}" /></div>
-    <br />
-    {{ post.title }}
+    <span class="img"><img src="{{ post.thumb }}" /></span>
+<!--     <br />
+    {{ post.title }} -->
   </a>
   </li>    
   
 
 title: Projects
 ---
 
-<ul class="index thumbs">
+<ul class="thumbs">
   
 {% for post in site.categories.projects %}
 {% if post.url %}
   <li>
   <a href="{{ site.baseurl }}{{ post.url }}">
     <div class="img"><img src="{{ post.thumb }}" /></div>
-    <br />
-    {{ post.title }}
+<!--     <br />
+    {{ post.title }} -->
   </a>
   </li>    
   
 
 title: Works
 ---
 
-<ul class="index thumbs">
+<ul class="thumbs">
   
 {% for post in site.categories.works %}
 {% if post.url %}
   
   <li>
   <a href="{{ site.baseurl }}{{ post.url }}">
-    <div class="img"><img src="{{ post.thumb }}" /></div>
-    <br />
-    {{ post.title }}
+    <span class="img"><img src="{{ post.thumb }}" /></span>
+<!--     <br />
+    {{ post.title }} -->
   </a>
   </li>