refactor(cleanup): markup and style cleanup

fixes #10
sarbbottam · Oct 21, 2016 · 1f80566 · 1f80566
1 parent e2f2173
commit 1f80566
Show file tree

Hide file tree

Showing 17 changed files with 488 additions and 501 deletions.
diff --git a/_config.yml b/_config.yml
@@ -18,6 +18,9 @@ gems:
 # Build settings
 markdown: kramdown
 
+sass:
+  style: compressed
+
 # Blog Settings
 permalink: /blog/:year/:month/:day/:title
 paginate_path: /page:num/

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,17 +1,7 @@
 <footer class="site-footer">
 
-  <div class="wrap">
-
-    <!-- <h2 class="footer-heading">{{ site.title }}</h2> -->
-
-    <!-- <div class="footer-col-1 column">
-      <ul>
-        <li>{{ site.title }}</li>
-        <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
-      </ul>
-    </div> -->
-
-    <div class="footer-col-1 column">
+  <div class="wrap flex-wrap">
+    <div>
       <a href="https://github.com/{{ site.github.username }}">
         <span class="icon github">
           <svg version="1.1" class="github-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
@@ -30,7 +20,7 @@
         <span class="username">{{ site.github.username }}</span>
       </a>
     </div>
-    <div class="footer-col-1 column">
+    <div>
       <a href="https://twitter.com/{{ site.twitter.username }}">
         <span class="icon twitter">
           <svg version="1.1" class="twitter-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
@@ -47,6 +37,9 @@
         <span class="username">{{ site.twitter.username }}</span>
       </a>
     </div>
+    <div>
+      subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a>
+    </div>
   </div>
 
 </footer>
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,6 +1,12 @@
 <head>
     <meta charset="utf-8">
-    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+    <title>
+      {% assign title = page.title %}
+      {% if page.heading %}
+      {% assign title = page.heading %}
+      {% endif %}
+      {% if title %}{{ site.title }} - {{ title }} {% else %} {{ site.title }}{% endif %}
+    </title>
     {% seo title=false %}
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width">

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,6 +9,7 @@
 
     <div class="page-content">
       <div class="wrap">
+      <h1>{{ page.heading }}</h1>
       {{ content }}
       </div>
     </div>

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -0,0 +1,126 @@
+/* Base */
+/* ----------------------------------------------------------*/
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html, body { height: 100%; }
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 20px;
+  line-height: 1.5;
+  font-weight: 300;
+  background-color: #fdfdfd;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #666;
+  font-weight: 300;
+  line-height: 1;
+}
+
+h1 {
+  font-size: 42px;
+  letter-spacing: -1.75px;
+  margin-bottom: 25px;
+}
+
+h2 {
+  font-size: 32px;
+  letter-spacing: -1.25px;
+}
+
+h3 {
+  font-size: 26px;
+  letter-spacing: -1px;
+}
+
+h4 {
+  font-size: 20px;
+  letter-spacing: -1px;
+}
+
+@media screen and (max-width: 600px) {
+  h1 {
+    font-size: 36px;
+  }
+
+  h2 {
+    font-size: 28px;
+  }
+
+  h3 {
+    font-size: 22px;
+  }
+
+  h4 {
+    font-size: 18px;
+  }
+}
+
+a {
+  color: #2a7ae2; text-decoration: none;
+}
+
+a:hover {
+  color: #000; text-decoration: underline;
+}
+
+a:visited {
+  color: #205caa;
+}
+
+blockquote {
+  border-left: 4px solid #888;
+  padding-left: 8px;
+  font-size: 18px;
+  color: #888;
+  letter-spacing: -1px;
+  font-style: italic;
+  margin: 30px 0;
+}
+
+@media screen and (max-width: 600px) {
+  blockquote {
+    padding-left: 10px;
+  }
+}
+
+pre,
+code {
+  border: 1px solid #ddd;
+  background-color: #eee;
+  color: #555;
+  padding: 8px 12px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  font-size: 15px;
+  overflow: auto;
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre code {
+  border: 0;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+p {
+  margin-top: 10px;
+}
+
+p:first-of-type {
+  margin-bottom: 10px;
+}
diff --git a/_sass/_icon.scss b/_sass/_icon.scss
@@ -0,0 +1,8 @@
+.github-icon-svg,
+.twitter-icon-svg {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: relative;
+  top: 3px;
+}
diff --git a/_sass/_image.scss b/_sass/_image.scss
@@ -0,0 +1,5 @@
+/* make this center-block */
+.center-image {
+  display: block;
+  margin: 0 auto;
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -0,0 +1,126 @@
+.wrap:before,
+.wrap:after { content:""; display:table; }
+.wrap:after { clear: both; }
+.wrap {
+  max-width: 800px;
+  padding: 0 30px;
+  margin: 0 auto;
+  zoom: 1;
+}
+
+.page-content {
+  padding: 30px 0;
+  background-color: #fff;
+}
+
+.site-header {
+  border-top: 5px solid #333;
+  border-bottom: 1px solid #e8e8e8;
+  min-height: 56px;
+  background-color: white;
+}
+
+.site-title,
+.site-title:hover,
+.site-title:visited {
+  display: block;
+  color: #333;
+  font-size: 26px;
+  letter-spacing: -1px;
+  float: left;
+  line-height: 56px;
+  position: relative;
+  z-index: 1;
+}
+
+.site-nav {
+  float: right;
+  line-height: 56px;
+}
+
+.site-nav .menu-icon { display: none; }
+
+.site-nav .page-link {
+  margin-left: 20px;
+  color: #727272;
+  letter-spacing: -.5px;
+}
+
+.site-footer {
+  border-top: 1px solid #e8e8e8;
+  padding: 30px 0;
+}
+
+.flex-wrap {
+  display: flex;
+  justify-content: space-around;
+}
+
+@media screen and (max-width: 750px) {
+  .flex-wrap {
+    flex-direction: column;
+  }
+
+  .flex-wrap > * {
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .wrap { padding: 0 12px; }
+
+  .site-nav {
+    position: fixed;
+    z-index: 10;
+    top: 14px; right: 8px;
+    background-color: white;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    border: 1px solid #e8e8e8;
+  }
+
+  .site-nav .menu-icon {
+    display: block;
+    font-size: 24px;
+    color: #505050;
+    float: right;
+    width: 36px;
+    text-align: center;
+    line-height: 36px;
+  }
+
+  .site-nav .menu-icon svg {
+    width: 18px;
+    height: 16px;
+  }
+
+  .site-nav .trigger {
+    clear: both;
+    margin-bottom: 5px;
+    display: none;
+  }
+
+  .site-nav:hover .trigger {
+    display: block;
+  }
+
+  .site-nav .page-link {
+    display: block;
+    text-align: right;
+    line-height: 1.25;
+    padding: 5px 10px;
+    margin: 0;
+  }
+
+  .site-footer .column {
+    float: none;
+    clear: both;
+    width: auto;
+    margin: 0 0 15px;
+  }
+}
+
+.pagination {
+  text-align: center;
+}
diff --git a/_sass/_post.scss b/_sass/_post.scss
@@ -0,0 +1,31 @@
+.post-header {
+  margin: 10px 0 30px;
+}
+
+.post-header .meta {
+  font-size: 15px;
+  color: #818181;
+  margin-top: 5px;
+}
+
+.post-content {
+  margin: 0 0 30px;
+}
+
+.post-content > * {
+  margin: 20px 0;
+}
+
+.post-content ul,
+.post-content ol {
+  padding-left: 20px;
+  margin-left: 1.35em;
+}
+
+@media screen and (max-width: 600px) {
+  .post-content ul,
+  .post-content ol {
+    padding-left: 10px;
+  }
+}
+