diff options
| -rw-r--r-- | layouts/404.html | 37 | ||||
| -rw-r--r-- | layouts/blog/single.html | 25 | ||||
| -rw-r--r-- | layouts/index.html | 6 | ||||
| -rw-r--r-- | layouts/partials/social.html | 3 | ||||
| -rw-r--r-- | static/css/main.css | 137 |
5 files changed, 184 insertions, 24 deletions
diff --git a/layouts/404.html b/layouts/404.html index e69de29..a5f3b19 100644 --- a/layouts/404.html +++ b/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>
\ No newline at end of file diff --git a/layouts/blog/single.html b/layouts/blog/single.html index e233548..30e2c1a 100644 --- a/layouts/blog/single.html +++ b/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>
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 731ff3a..a099f4c 100644 --- a/layouts/index.html +++ b/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 --> diff --git a/layouts/partials/social.html b/layouts/partials/social.html index d159c59..8bced97 100644 --- a/layouts/partials/social.html +++ b/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>
\ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index 484c64e..610c948 100644 --- a/static/css/main.css +++ b/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; - padding: 20px; + margin: 0; + 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 { - display: flex; - justify-content: center; - align-items: center; - padding: 20px; +img { + max-width: 100%; + margin: 1em 0 1em 0; + border-radius: 5px; + 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; |