Update site theme

3 files changed, 117 insertions, 123 deletions

diff --git a/_includes/site.scss b/_includes/site.scss
index 42d1fa2..bce85b7 100644
--- a/_includes/site.scss
+++ b/_includes/site.scss
@@ -1,201 +1,194 @@
-$monokai-royal-blue: #204a87;
-$monokai-dark-blue: #243955;
-$monokai-gray-0: #272822;
-$monokai-gray-1: #31322c;
-$monokai-gray-2: #3c3d37;
-$monokai-forest: #46830c;
-$monokai-gray-3: #49483e;
-$monokai-gray-4: #64645e;
-$monokai-blue: #66d9ef;
-$monokai-tan: #75715e;
-$monokai-red: #8b0807;
-$monokai-gray-5: #90908a;
-$monokai-lime: #a6e22e;
-$monokai-violet: #ae81ff;
-$monokai-yellow: #e6db74;
-$monokai-light: #f8f8f0;
-$monokai-magenta: #f92672;
-$monokai-orange: #fd971f;
+$dark-gray: #444;
+$medium-gray: #888;
+$light-gray: #ddd;
+$primary-color: #FF6639;
+$link-color: #476AE0;
 
 $base-font-size: 22px;
 $monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 $container-width: 1200px;
 
 @mixin container {
-  max-width: $container-width;
-  padding: 0 1rem;
-  margin-left: auto;
-  margin-right: auto;
+	max-width: $container-width;
+	padding: 0 1rem;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .muted {
-  color: $monokai-gray-5;
+	color: $medium-gray;
 }
 
 body {
-  font-family: $monospace;
-  background-color: $monokai-gray-0;
-  color: $monokai-light;
-  font-size: $base-font-size;
-  padding: 5rem 0 0 0;
-  margin: 0;
+	font-family: $monospace;
+	color: $dark-gray;
+	font-size: $base-font-size;
+	padding: 5rem 0 0 0;
+	margin: 0;
 }
 
 header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 5rem;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  background-color: $monokai-gray-0;
-  box-shadow: 0 1rem 1rem $monokai-gray-0;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 5rem;
+	padding: 0;
+	margin: 0;
+	text-align: center;
+	background-color: rgba(255, 255, 255, 0.85);
+	z-index: 10;
+	border-bottom: 1px solid $light-gray;
 }
 
 footer {
-  @extend .muted;
-  padding: 2rem;
-  text-align: center;
+	@extend .muted;
+	padding: 2rem;
+	text-align: center;
 }
 
 section {
-  padding-left: 5rem;
+	padding-left: 5rem;
 }
 
 h1 {
-  @include container;
-  color: $monokai-orange;
-  font-size: 2rem;
-  font-weight: bold;
+	@include container;
+	color: $primary-color;
+	font-size: 2rem;
+	font-weight: bold;
 }
 
 h2 {
-  @include container;
-  color: $monokai-orange;
-  font-size: 1.5rem;
-  font-weight: bold;
+	@include container;
+	color: $primary-color;
+	font-size: 1.5rem;
+	font-weight: bold;
 }
 
 table {
-  width: 100%;
+	width: 100%;
 }
 
 td {
-  padding: 0.5rem;
+	padding: 0.5rem;
 }
 
 p {
-  @include container;
-  line-height: 2rem;
+	@include container;
+	line-height: 2rem;
 }
 
 ol, ul {
-  @include container;
+	@include container;
 }
 
 li {
-  margin-left: 2rem;
-  margin-right: 2rem;
-  padding: 1rem;
+	margin-left: 2rem;
+	margin-right: 2rem;
+	padding: 1rem;
 }
 
 pre {
-  font-family: $monospace;
-  overflow: auto;
-  margin: 1rem 0;
+	font-family: $monospace;
+	overflow: auto;
+	margin: 1rem 0;
 }
 
 kbd {
-  color: $monokai-lime;
+	color: $primary-color;
 }
 
 code {
-  color: $monokai-gray-5;
-  background-color: $monokai-gray-1;
+	color: $medium-gray;
 }
 
 hr {
-  border: none;
-  margin-top: $base-font-size;
-  margin-bottom: $base-font-size;
-  text-align: center;
-  &:after {
-    @extend .muted;
-    content: '~ ~ ~';
-  }
+	border: none;
+	margin-top: $base-font-size;
+	margin-bottom: $base-font-size;
+	text-align: center;
+	&:after {
+		@extend .muted;
+		content: '##';
+	}
 }
 
 .d3container {
-  text-align: center;
+	text-align: center;
 }
 
 blockquote {
-  font-style: italic;
-  p {
-    box-sizing: border-box;
-    border-left: 1rem solid $monokai-gray-1;
-    padding: 0 1rem;
-  }
+	font-style: italic;
+	p {
+		box-sizing: border-box;
+		padding: 0 3rem;
+	}
 }
 
 a {
-  color: $monokai-blue;
-  text-decoration: none;
-  &:hover {
-    color: $monokai-magenta;
-  }
-  &:focus {
-    background-color: $monokai-blue;
-    color: $monokai-gray-0;
-  }
+	color: $dark-gray;
+	text-decoration: underline;
+	&:hover {
+		color: $primary-color;
+	}
 }
 
 time {
-  @extend .muted;
+	@extend .muted;
 }
 
 aside {
-  @extend .muted;
+	@extend .muted;
+	@include container;
+	&:before {
+		display: block;
+		content: '/*';
+	}
+	&:after {
+		display: block;
+		white-space: pre;
+		content: ' */';
+	}
+	&>* {
+		margin-left: 1rem;
+	}
+	a {
+		color: $medium-gray;
+	}
 }
 
 .text-center {
-  text-align: center;
+	text-align: center;
 }
 
 .flex-justify {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
 }
 
 .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;
-  }
+	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;
+	}
 }
 
 .highlight {
-  margin: 0;
-  padding: 1rem;
-  background-color: $monokai-gray-1;
+	margin: 0;
+	padding: 1rem;
+	background-color: $dark-gray;
 }
 
 .highlight pre {
-  @include container;
-}
-
-.hl.string {
-  color: $monokai-yellow;
+	@include container;
 }
diff --git a/_posts/2014-10-11-configuring-cloudflare-universal-ssl.markdown b/_posts/2014-10-11-configuring-cloudflare-universal-ssl.markdown
index 347216a..96f23e1 100644
--- a/_posts/2014-10-11-configuring-cloudflare-universal-ssl.markdown
+++ b/_posts/2014-10-11-configuring-cloudflare-universal-ssl.markdown
@@ -29,11 +29,12 @@ To get started, head over to [CloudFlare](https://www.cloudflare.com/sign-up) an
 
 Next, head over to your registrar and and change your authoritative name servers to the ones listed in CloudFlare to start routing your traffic through their network. This will take some time to propagate through the DNS network, but should be effective within a few hours. In the meantime, you can take a look at the three Settings pages. There are many options for optimization, redirects, caching, security, and more. The important one is to go down to the SSL option and set it to Flexible SSL. Note that even though you can access your GitHub pages site over SSL, trying to do so with full SSL through CloudFlare will result in an “Unknown Site” error from GitHub.
 
-<hr>
-
-_Update on 22 May, 2015:_ Since this article was published, CloudFlare has [updated their dashboard](https://support.cloudflare.com/hc/en-us/articles/205075117-FAQ-New-CloudFlare-Dashboard). Now, the settings for SSL are located under the ["Crypto" tab](https://www.cloudflare.com/a/crypto) for your website. The Page Rules as described below are still configured the same way, but now found under the ["Page Rules" tab](https://www.cloudflare.com/a/page-rules).
-
-<hr>
+<aside>
+	<p>
+		<em>Update on 22 May, 2015:</em>
+		Since this article was published, CloudFlare has <a href="https://support.cloudflare.com/hc/en-us/articles/205075117-FAQ-New-CloudFlare-Dashboard">updated their dashboard</a>. Now, the settings for SSL are located under the <a href="https://www.cloudflare.com/a/crypto">"Crypto" tab</a> for your website. The page rules as described below are still configured the same way, but now found under the <a href="https://www.cloudflare.com/a/page-rules">"Page Rules" tab</a>.
+	</p>
+</aside>
 
 On the free tier, CloudFlare states that it will take up to 24 hours to provision the SSL certificate for your site. In my case, it only took a few hours. Using one of their paid plans will result in immediate provision. You can check in on whether the certificate has been provisioned by trying to navigate to https://yoursite.com. You’ll likely get a domain mismatch SSL error as CloudFlare defaults to a different certificate until yours has been provisioned. Once you stop receiving the error, you’re good to go!
 
diff --git a/projects/index.html b/projects/index.html
index 79461a4..9dbf78e 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -15,11 +15,11 @@ description: Projects I’ve done.
   {% endif %}
 </h2>
 <section>
-  <p class="muted sans">
+  <p class="muted">
     {{ project.tech }}
     {% if project.github %}
       &bull;
-      <a href="https://github.com/{{ project.github }}">{{ project.github }}</a>
+      <a class="muted" href="https://github.com/{{ project.github }}">{{ project.github }}</a>
     {% endif %}
   </p>
   <p>{{ project.description }}</p>