Redesign

2 files changed, 63 insertions, 103 deletions

diff --git a/_includes/site.scss b/_includes/site.scss
index c9760d8..f82396f 100644
--- a/_includes/site.scss
+++ b/_includes/site.scss
@@ -1,20 +1,21 @@
-$background-color: #091f2e;
-$base-text-color: #33859E;
-$muted-text-color: #245361;
-$light-gray: #ddd;
-$heading-color: #d26937;
-$link-color: #c23127;
-$emphasis-color: #99d1ce;
-
-$base-font-size: 20px;
+$background-color: #fafafa;
+$base-text-color: #1A364F;
+$muted-text-color: #687876;
+$light-gray: #9CA395;
+$heading-color: #9E1814;
+$link-color: #2A7F89;
+
+$unit: 9px;
 $monospace: monospace;
-$container-width: 1200px;
+$serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', 'Georgia', serif;
+
+$container-width: $unit * 100;
+$header-height: $unit * 5;
+$font-size: $unit * 2;
+$date-column-width: 200px;
 
 @mixin container {
 	max-width: $container-width;
-	padding: 0 1rem;
-	margin-left: auto;
-	margin-right: auto;
 }
 
 .muted {
@@ -24,30 +25,19 @@ $container-width: 1200px;
 body {
 	font-family: $monospace;
 	color: $base-text-color;
-	font-size: $base-font-size;
-	padding: 5rem 0 0 0;
+	font-size: $font-size;
+	padding: $font-size;
 	margin: 0;
   background-color: $background-color;
 }
 
 header {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 5rem;
-	padding: 0;
-	margin: 0;
-	text-align: center;
-	background-color: $background-color;
-	z-index: 10;
-	//border-bottom: 1px solid $light-gray;
+  @include container;
+  text-align: center;
 
   a.nav-up {
-    display: block;
     color: $base-text-color;
-    padding: 1rem;
-    font-size: 1.5rem;
+    font-size: 3 * $unit;
     font-weight: bold;
 
     &:hover,
@@ -59,7 +49,7 @@ header {
 
 footer {
 	@extend .muted;
-	padding: 2rem;
+	padding: $unit;
 	text-align: center;
 }
 
@@ -75,21 +65,11 @@ h2 {
 }
 
 h1 {
-	font-size: 2rem;
-}
-
-h1::before {
-  display: inline;
-  content: '# ';
+	font-size: 4 * $unit;
 }
 
 h2 {
-	font-size: 1.5rem;
-}
-
-h2::before {
-  display: inline;
-  content: '## ';
+	font-size: 2 * $unit;
 }
 
 table {
@@ -97,47 +77,50 @@ table {
 }
 
 td {
-	padding: 0.5rem;
+	padding: $unit;
 }
 
 p {
 	@include container;
-	line-height: 3rem;
-  margin-bottom: 3rem;
+	line-height: 1.5;
+  margin-bottom: $unit;
+  font-family: $serif;
 }
 
 ol, ul {
 	@include container;
+  font-family: $serif;
 }
 
 li {
-	margin-left: 4rem;
-	margin-right: 2rem;
-	padding: 1rem;
+	margin-left: 4 * $unit;
+	margin-right: 2 * $unit;
+	padding: $unit;
 }
 
 pre {
 	font-family: $monospace;
 	overflow: auto;
-	margin: 1rem 0;
+	margin: $unit 0;
 }
 
 kbd {
-	color: $emphasis-color;
+  font-family: $monospace;
 }
 
 code {
-	color: $emphasis-color;
+  font-family: $monospace;
 }
 
 hr {
 	border: none;
-	margin-top: $base-font-size;
-	margin-bottom: $base-font-size;
+	margin: $unit 0;
 	text-align: center;
+  width: $container-width;
+
 	&:after {
 		@extend .muted;
-		content: '##';
+		content: '~~~';
 	}
 }
 
@@ -149,7 +132,7 @@ blockquote {
 	font-style: italic;
 	p {
 		box-sizing: border-box;
-		padding: 0 3rem;
+		padding: 0 3 * $unit;
 	}
 }
 
@@ -160,7 +143,6 @@ a {
 	&:hover,
   &:focus {
 		color: $link-color;
-    border-bottom-color: $link-color;
     outline: none;
 	}
 }
@@ -172,17 +154,8 @@ time {
 aside {
 	@extend .muted;
 	@include container;
-	&:before {
-		display: block;
-		content: '/*';
-	}
-	&:after {
-		display: block;
-		white-space: pre;
-		content: ' */';
-	}
 	&>* {
-		margin-left: 1rem;
+		margin-left: 2 * $unit;
 	}
 	a {
 		color: $muted-text-color;
@@ -190,35 +163,31 @@ aside {
 }
 
 .text-center {
+  @include container;
 	text-align: center;
 }
 
-.flex-justify {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+.post {
+  @include container;
+  margin: 1em;
+  font-family: $serif;
+  clear: both;
 }
 
-.home {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	text-align: center;
-	pre {
-		margin-top: 2rem;
-		display: inline-block;
-		text-align: left;
-		line-height: 2rem;
-		overflow: auto;
-	}
+.post-date {
+  text-align: right;
+  width: $date-column-width;
+  float: left;
+}
+
+.post-title {
+  padding-left: $date-column-width + 2 * $unit;
 }
 
 .highlight {
 	margin: 0;
-	padding: 0 2rem;
-  font-size: 1rem;
+	padding: 0 $unit;
+  font-size: 2 * $unit;
 }
 
 .highlight pre {
@@ -233,16 +202,3 @@ aside {
   content: '';
 }
 
-.highlight {
-  .s {
-    color: #2aa889;
-  }
-
-  .nt {
-    color: #edb443;
-  }
-
-  .na {
-    color: $muted-text-color;
-  }
-}
diff --git a/posts/index.html b/posts/index.html
index 6d96cd0..6d0eff3 100644
--- a/posts/index.html
+++ b/posts/index.html
@@ -8,8 +8,12 @@ redirect_from: /writing/
 <h1>Posts</h1>
 
 {% for post in site.posts %}
-<p class="flex-justify">
-  <a href="{{ post.url }}">{{ post.title }}</a>
-  <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: "%-d %B %Y" }}</time>
-</p>
+<div class="post">
+  <div class="post-date">
+    <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: "%-d %B %Y" }}</time>
+  </div>
+  <div class="post-title">
+    <a href="{{ post.url }}">{{ post.title }}</a>
+  </div>
+</div>
 {% endfor %}