Mobile view improvements

layouts/404.html

@@ -0,0 +1,37 @@
+ {{ partial "header.html" . }}
+
+<div class="container-fluid">
+    <div class="main">
+        <div class="page-head-box fade-in one">
+        <h1 class="list-title">404</h1>
+        
+            <div class="blognav">
+            <hr>
+            <a href="/">Main</a> | 
+            <a href="/#about">About</a> | 
+            {{ if .Site.Params.showprojects }}
+            <a href="/#projects">Projects</a> | 
+            {{ end }}
+            {{ if .Site.Params.showallposts }}
+            <a href="/#blog">Back to blog</a> |
+            {{ else }}
+            <a href="/blog">Back to blog</a> |
+            {{ end }}
+            <a href="/#contact">Contact</a> 
+            <hr>
+            </div>
+        </div>
+
+    <div class="content fade-in two">
+
+    <div class="container markdown">
+        Oops! Either you've found a bug (in which case, <a href="{{ .Site.Params.email }}">please tell me</a>) or you're just making things up. This page doesn't exist!
+    </div>
+            
+            <div class="blognav">
+            <hr>
+            </div>
+{{ partial "footer.html" . }}
+</div>
+</div>
+</div>

layouts/blog/single.html

@@ -1,11 +1,29 @@
 {{ partial "header.html" . }}
 
 <div class="container-fluid">
-    <div class="main fade-in one">
+    <div class="main">
+        <div class="page-head-box fade-in one">
+        <h1 class="list-title">{{ .Site.Params.firstname }}'s Blog</h1>
+        
+            <div class="nav">
+            <hr>
+            <a href="/">Main</a> | 
+            <a href="/#about">About</a> | 
+            {{ if .Site.Params.showprojects }}
+            <a href="/#projects">Projects</a> | 
+            {{ end }}
+            {{ if .Site.Params.showblog }}
+            <a href="/#blog">Blog</a> | 
+            {{ end }}
+            <a href="/#contact">Contact</a> 
+            <hr>
+            </div>
+        </div>
+
+    <div class="content fade-in two">
         <div class="blog-header">
             <a href="{{ .Permalink }}">{{ .Title }}</a>
             <div class="post-data">
-                {{ .Site.Params.author }} |
                 {{ .Date.Format .Site.Params.dateform }} |
                 {{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}
             </div>
@@ -37,7 +55,7 @@
             {{ end }}
             
         </div>
-    <div class="markdown">
+    <div class="container markdown">
         {{ .Content }}
     </div>
 
@@ -55,4 +73,5 @@
 </div>
 {{ partial "footer.html" . }}
 </div>
+</div>
 </div>

layouts/index.html

@@ -40,7 +40,7 @@
 <h2 class="section-head">About</h2>
 
 <div class="row">
-    <div class="profile-pic col-md-offset-1 col-md-3"><img class="img-responsive" src="/{{ .Site.Params.avatar }}" alt="My profile picture." width="200px">
+    <div class="col-md-offset-1 col-md-3"><img class="img-responsive avatar" src="/{{ .Site.Params.avatar }}" alt="My profile picture.">
     </div>
     <div class="col-md-7">
             
@@ -58,13 +58,17 @@
 <hr>
 <!-- Now for some cool projects -->
 {{ if .Site.Params.showprojects }}
+<div class="main section">
     {{ partial "projects.html" . }}
+</div>
 <hr>
 {{ end }}
 <!-- Done with projects section -->
 <!-- Let's show some blog posts -->
 {{ if .Site.Params.showblog }}
+<div class="main section">
     {{ partial "blogsection.html" . }}
+</div>
 <hr>
 {{ end }}
 <!-- End of blog section -->

layouts/partials/social.html

@@ -21,5 +21,8 @@
         {{ if .Site.Params.googleplus }}
         <a href="https://plus.google.com/+{{ .Site.Params.googleplus }}" target="_blank"><i class="fa fa-google-plus"></i></a> 
         {{ end }}
+        {{ if .Site.RSSLink }}
+        <a href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a>
+        {{ end }}
     </div>
 </div>

static/css/main.css

@@ -38,7 +38,7 @@ animation-delay: 1.8s;
 }
 body {
     font-size: 14px;
-    font-family: 'Work Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif;
     color: #666;    
 }
 a {
@@ -53,9 +53,11 @@ a:active {
 }
 h1 {
     color: #222;
+    font-family: 'Work Sans', sans-serif;
 }
 h2 {
     color: #222;
+    font-family: 'Work Sans', sans-serif;
 }
 hr {
 
@@ -63,7 +65,7 @@ hr {
 ul {
     padding: 0;
 }
-li {
+.post-item {
     display: block;
     list-style: none;
     list-style-position: outside;
@@ -86,29 +88,114 @@ li {
 .nav {
     text-align: center;
     text-transform: uppercase;
-    margin: 5% 0 5% 0;
+    margin: 3% 0 3% 0;
+}
+.blognav {
+    text-align: left;
+    text-transform: uppercase;
+    margin: 3% 0 3% 0;
 }
 .content {
-    margin: 0em 0em 4em 0em;
+    margin: 0;
-    padding: 20px;
+    padding: 0px;
+}
+.main .section {
+    width: 90%;
+    float: center;
+}
+@media (max-width: 800px) {
+    .main .section {
+        width: 100%;
+        float: center;
+    }
 }
 .markdown {
-
+    margin: 0;
+    padding: 0px;
+}
+.markdown ul {
+  margin-bottom: 1.25rem;
+  margin-left: 1.5em;
+  list-style: none;
+}
+.markdown li {
+  list-style-type: disc; 
+  margin-left: 1.5em;
+  list-style-position: outside;
+  padding-left: 1em;
+}
+.markdown em {
+  font-style: italic;
+}
+.markdown strong {
+  font-weight: 700;
+}
+.markdown hr {
+  position: relative;
+  margin: 1.75rem 0;
+  border: 0;
+  border-top: 1px solid #808080;
+  border-top: 1px solid #999999;
+}
+.markdown abbr {
+  font-size: 0.8rem;
+  font-weight: bold;
+  color: #666666;
+  text-transform: uppercase;
+}
+.markdown abbr[title] {
+  cursor: help;
+  border-bottom: 1px dotted #808080;
+}
+.markdown blockquote {
+  padding: .5rem 1rem;
+  margin: .8rem 0;
+  color: #7a7a7a;
+  border-left: .25rem solid #e5e5e5;
+}
+.markdown blockquote p:last-child {
+  margin-bottom: 0;
+}
+.markdown table {
+  margin: 2em 0 2em 0;
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-collapse: collapse;
+}
+.markdown td,
+.markdown th {
+  padding: .25rem .5rem;
+  border: 1px solid #e5e5e5;
+  text-align: center;
+}
+.markdown tbody tr:nth-child(odd) td,
+.markdown tbody tr:nth-child(odd) th {
+  background-color: #f7f7f7;
 }
 .pagehead {
 	margin: 20% 20% 5% 20%;
     text-align: center;
 }
+@media (max-width: 600px) {
+    .pagehead {
+        margin: 20% 10% 5% 10%;
+        text-align: center;
+    }
+}
 .list-head {
     text-align: left;
     margin: 20% 0 0 0;
 }
+.page-head-box {
+    text-align: left;
+    margin: 15% 0 0 0;
+}
 .list-title {
     font-size: 8em;
     font-weight: bold;
     margin-left: -10px;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .list-title {
         font-size: 3em;
         font-weight:bold;
@@ -120,28 +207,32 @@ li {
     text-align: center;
     margin: 1.5em 0em 1.5em 0em;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .section-head {
         font-size: 2em;
         text-align: center;
         margin: 1em 0em 1em 0em;
     }
 }
-.profile-pic {
+img {
-    display: flex;
+    max-width: 100%;
-    justify-content: center;
+    margin: 1em 0 1em 0;
-    align-items: center;
+    border-radius: 5px;
-    padding: 20px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
 }
 .img-responsive {
     border-radius: 5px;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
 }
+.avatar {
+    max-width: 300px;
+    margin: 0 0 1em 0;
+}
 .intro {
     font-size: 8em;
     font-weight: bold;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .intro {
         font-size: 3em;
         font-weight:bold;
@@ -151,7 +242,7 @@ li {
     font-size: 2em;
     text-align: center;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .blurb {
         font-size: 1em;
         text-align: center;
@@ -166,6 +257,11 @@ li {
     font-size: 2em;
     margin: 0.8em 0em 0.5em 0em;
 }
+@media (max-width: 600) {
+    .highlight-text {
+    font-size: 1.5em;
+    }
+}
 .project-grid {
     padding: 1.2em 0em 0em 0em;
 }
@@ -183,25 +279,25 @@ li {
     text-align: center;
 }
 .blog-header {
-    margin: 10% 0 5% 0;
+    margin: 3% 0 3% 0;
     text-align: left;
     font-size: 3em;
     font-weight: bold;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .blog-header {
-    margin: 10% 0 5% 0;
+    margin: 3% 0 3% 0;
     text-align: left;
     font-size: 2em;
     font-weight: bold;
     }
 }
 .post-data {
-    font-size: 0.5em;
+    font-size: 0.4em;
     font-weight: normal;
 }
 .blog-share {
-    font-size: 0.3em;
+    font-size: 0.35em;
     font-weight: normal;
     line-height: 2em;
 }
@@ -209,6 +305,7 @@ li {
     text-align: center;
     color: #888;
     padding: 2em;
+    font-size: 0.8em;
 }
 #footer a {
     color: #888;