From 7285356d64e08ec15e68d50fe4c762fc96a8831e Mon Sep 17 00:00:00 2001
From: Bill Niblock <niblock@oath.com>
Date: Thu, 11 Jan 2018 18:28:28 -0500
Subject: [PATCH] Continue redesign

---
 _layouts/default.html |  29 ++++----
 index.html            |  38 +++-------
 src/styles.css        | 157 ++++++++++++++++++++++++++++--------------
 3 files changed, 127 insertions(+), 97 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 8693097..f035c5e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -27,24 +27,19 @@
         </div>
     </div>
     <div class="pure-g pure-u-1-5 menu">
-        <div class="pure-u-1">
-            <ul>
-                <li><a href="/">Home</a></li>
-                <li>Projects</li>
-                    <ul id="projects">
-                        {% for pr in site.projects limit:3 %}
-                        <li>{{ pr.title }}</li>
-                        {% endfor %}
-                    </ul>
-                <li>Posts</li>
-                    <ul id="posts">
-                        {% for post in site.posts limit:3 %}
-                        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
-                        {% endfor %}
-                    </ul>
-            </ul>
-        </div> 
+        <div class="pure-u-1" id="tags">
+        </div>
         <div class="pure-g" id="footer">
+            <div class="pure-u-1" id="about">
+                <h2>The Site</h2>
+                <p>This site is a small slice of internet real-estate that I use for
+                    occasional writing. Nothing I say is visionary or profound. I
+                    will tend to focus on technology, gaming, and philosophy.</p>
+                <h2>The Vagabond</h2>
+                <p>My name is Bill Niblock. I'm a computer scientist by education, a
+                    technologist by trade, a gamer by hobby, and a philosopher by
+                    mistake.</p>
+            </div>
             <div class="pure-u-1-4">
                 <a href="https://github.com/VagabondAzulien">
                     <img src="{{ site.url }}/src/images/github_light.png"
diff --git a/index.html b/index.html
index acfcf08..e3c43f3 100644
--- a/index.html
+++ b/index.html
@@ -3,31 +3,13 @@
      tabtitle: Home
 ---
 
-<article>
-     <h1>Welcome</h1>
-     <p>Welcome to The Internet Vagabond, a small slice of Internet
-     real-estate for Bill Niblock. Nothing I say is visionary or
-     profound, and sometimes it makes sense. You can find a list of
-     any posts and projects I've made available in the menu on the right.
-     Just click the menu button in the upper-right to view it.</p>
-     
-     <h2>About the Site</h2>
-     <p>The Internet Vagabond is a simple website I use for the rare
-     blog posts I make, information about me and the projects I work
-     on, and a digital plot of e-land. It is programmed as much in
-     HTML and CSS as possible, and designed with a small footprint.
-     The site is hosted on GitHub, and utilizes Jekyll for further
-     organization and optimization. If you're interested in more 
-     technical details, check out the GitHub Project page for this
-     repository [WIP]. You can easily get to it via the menu on the right.</p>
-
-     <h2>About the Vagabond</h2>
-     <p>I'm a computer scientist by education, a technologist by
-     trade, a gamer by hobby, a philosopher by choice, and the list goes
-     on. I'm quite fond of Linux, in particular the command line, and the myriad
-     of fascinating and intricate programs which call them home. I'm an avid
-     gamer, though I tend to shy away from the AAA releases. I am actively
-     pursuing a better understanding of Stoicism, and, more generally, our
-     universe. Learning is my ultimate passion, and I act accordingly to live my
-     passions every day.</p>
-</article>
+{% for post in site.posts %}
+    <div id="posts">
+        <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
+        <div class="pure-g" id="details">
+            <div class="pure-u-1-2" id="date">Published: {{ post.date }}</div>
+            <div class="pure-u-1-2" id="tags">Tagged: {{ post.tags }}</div>
+        </div>
+        <div id="desc">{{ post.short_desc }}</div>
+    </div>
+{% endfor %}
diff --git a/src/styles.css b/src/styles.css
index 89dcab0..f941eca 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7,16 +7,16 @@
 /* General */
 
 body {
-     background-color: #3b3b3b;
+    background-color: #3b3b3b;
 }
 
 a,a:visited,a:link,a:focus {
-     text-decoration: underline;
-     color: white;
+    text-decoration: underline;
+    color: white;
 }
 
 a:hover {
-    font-weight: bold;
+    font-style: italic;
 }
 
 /**********
@@ -26,28 +26,28 @@ a:hover {
  **********/
 
 .header {
-     position: fixed; top: 0px; left: 0px; right: 0px;
-     margin: 0px; padding: 10px; z-index: 1;
-     background-color: #202020;
-     border-bottom: 1px solid #8D3FC5;
-     box-shadow: 0px 5px 30px -5px #8D3FC5;
+    position: fixed; top: 0px; left: 0px; right: 0px;
+    margin: 0px; padding: 10px; z-index: 1;
+    background-color: #202020;
+    border-bottom: 1px solid #8D3FC5;
+    box-shadow: 0px 5px 30px -5px #8D3FC5;
 }
 
 .title {
     display: flex;
-     margin: 0px 25px; padding: 0px;
+    margin: 0px 25px; padding: 0px;
 }
 
 .title div {
-     margin: 0px; padding: 0px;
-     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-     color: darkgrey; letter-spacing: 1.2em;
+    margin: 0px; padding: 0px;
+    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 1.2em;
 }
 
 .title div::first-letter {
-     margin: 0px; padding: 0px 2px;
-     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-     color: white;
+    margin: 0px; padding: 0px 2px;
+    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: white;
 }
 
 /***********
@@ -78,6 +78,26 @@ a:hover {
     color: darkgrey;
 }
 
+#about {
+    display: flex;
+    flex-flow: column;
+    padding-bottom: 1em;
+}
+
+#about p {
+    line-height: 1.5em; letter-spacing: 0.1em;
+    text-align: left;
+    padding: 0em 1em;
+    color: white;
+}
+
+#about h2 {
+    text-align: right;
+    padding: 10px;
+    font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.6em;
+}
+
 #footer {
     position: absolute; bottom: 1em; left: 0px; right: 0px;
     text-align: center;
@@ -89,57 +109,90 @@ a:hover {
     color: darkgrey;
 }
 
+/*********
+ * Index *
+ ********/
+
+#posts a,a:visited,a:link,a:focus {
+    color: darkgrey;
+    text-decoration: none;
+}
+
+#posts a:hover {
+    font-style: normal;
+    color: white;
+}
+
+#posts #details {
+    text-align: center;
+    padding: 10px;
+    border-top: 1px solid darkgrey;
+    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.4em;
+}
+
+#posts #date {
+    text-align: left;
+    color: grey;
+}
+
+#posts #tags {
+    text-align: right;
+    color: grey;
+}
+
+#posts #desc {
+    padding: 0em 2em 2em 2em;
+    color: white;
+}
+
 /********
  *      *
- * Body *
+ * Blog *
  *      *
  ********/
 #content {
-    margin: 0em 5em;
+    margin: 5em;
+    line-height: 1.5em; letter-spacing: 0.1em;
 }
 
-article {
-     margin: 50px auto; padding: 10px;
-     line-height: 1.5em; letter-spacing: 0.1em;
+#content h1 {
+    padding: 10px;
+    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.5em;
 }
 
-article h1 {
-     padding: 10px;
-     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-     color: darkgrey; letter-spacing: 0.5em;
+#content h1::first-letter {
+    margin: 0px; padding: 0px;
+    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: white;
 }
 
-article h1::first-letter {
-     margin: 0px; padding: 0px;
-     font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-     color: white;
+#content h2 {
+    text-align: left;
+    padding: 10px;
+    border-bottom: 1px solid darkgrey;
+    font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.6em;
 }
 
-article h2 {
-     text-align: left;
-     padding: 10px;
-     border-bottom: 1px solid darkgrey;
-     font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-     color: darkgrey; letter-spacing: 0.6em;
+#content h3 {
+    text-align: right;
+    padding: 10px;
+    border-bottom: 1px solid darkgrey;
+    font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.6em;
 }
 
-article h3 {
-     text-align: right;
-     padding: 10px;
-     border-bottom: 1px solid darkgrey;
-     font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-     color: darkgrey; letter-spacing: 0.6em;
+#content h4 {
+    text-align: center;
+    padding: 10px;
+    border-top: 1px solid darkgrey;
+    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    color: darkgrey; letter-spacing: 0.4em;
 }
 
-article h4 {
-     text-align: center;
-     padding: 10px;
-     border-top: 1px solid darkgrey;
-     font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-     color: darkgrey; letter-spacing: 0.4em;
-}
-
-article p {
-     padding: 0px 25px;
-     color: white;
+#content p {
+    padding: 0em 2em;
+    color: white;
 }