Skip to content

Commit

Permalink
Layout remodelled using bulma, css minified. Added responsive hamburg…
Browse files Browse the repository at this point in the history 
…er menu on mobile.
  • Loading branch information
Vicky committed Mar 26, 2017
1 parent 7b198da commit c1bd334
Show file tree
Hide file tree
Showing 15 changed files with 386 additions and 574 deletions.
61 changes: 32 additions & 29 deletions layouts/404.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,40 @@
{{ 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="section"><!-- Parent section -->

<div class="hero fade-in one"><!-- Begin hero 404 -->
<div class="hero-body has text centered">
<h1 class="title bold-title is-1">404</h1>
</div>
</div><!-- End hero 404 -->

<div class="blognav">
<div class="container fade-in two"><!-- Begin Nav bar -->
<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>
<nav class="nav-center">
<a class="nav-item" href="/">Main</a> |
<a class="nav-item" href="/#about">About</a> |
{{ if .Site.Params.showprojects }}
<a class="nav-item" href="/#projects">Projects</a> |
{{ end }}
{{ if .Site.Params.showallposts }}
<a href="/#blog">Blog</a> |
{{ else }}
<a href="/blog">Blog</a> |
{{ end }}
<a class="nav-item" href="/#workwithme">Work With Me</a> |
<a class="nav-item" href="/#contact">Contact</a>
{{ if .Site.RSSLink }}
<a class="nav-item" href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a>
{{ end }}
</nav>
<hr>
</div>
</div>

<div class="content fade-in two">
</div><!-- End Nav bar -->

<div class="container markdown">
<div class="container markdown fade-in two"><!-- Begin blurb -->
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>
</div><!-- End blurb -->



{{ partial "footer.html" . }}
</div>
</div>
</div>
</div><!-- End parent section -->
74 changes: 51 additions & 23 deletions layouts/_default/list.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
{{ partial "header.html" . }}

<div class="container-fluid">
<div class="main">
<div class="list-head">
<h1 class="list-title fade-in one">Blog</h1>


<div class="fade-in two">
{{ if .Site.Params.showlatest }}
<h2 class="blog-header">Latest Post</h2>
{{ range first 1 .Data.Pages.ByPublishDate }}
<div class="section" id="top"><!-- Parent section -->

<div class="container hero fade-in one"><!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Site.Params.firstname }}'s Blog</h1>
</div><!-- End Title -->

<!-- Everything below fades in two! -->
<div class="section no-padding fade-in two">

<div class="container"><!-- Begin Nav bar -->
{{ partial "nav-list.html" . }}
</div><!-- End Nav bar -->

<div class="container"><!-- Begin Blog container -->

{{ if .Site.Params.showlatest }}
<h2 class="title is-2 top-pad">Latest Post</h2>
{{ range first 1 .Data.Pages.ByPublishDate }}
<div class="summary">{{ .Date.Format .Site.Params.dateform }}
<h4><span style="font-weight: bold"><a href="{{ .RelPermalink }}">{{ .Title }}</a></span></h4>
<h3 class="title is-3 strong-post-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<div class="markdown">
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link"><a href="{{ .RelPermalink }}">...Read More</a></div>
<a href="{{ .RelPermalink }}">...Read More</a>
{{ end }}
</div>
</div>
{{ end }}
{{ end }}

<h2 class="blog-header">All Posts</div>
{{ end }}

<h2 class="title is-2 top-pad">All Posts</h2>
<ul>
{{ range .Data.Pages.ByPublishDate }}
{{ if eq .Section "blog" }}
Expand All @@ -29,14 +39,32 @@ <h2 class="blog-header">All Posts</div>
{{ end }}
</ul>

</div>
</div>
</div><!-- End Blog container -->

<div class="nav">
<hr>
<a href="/">Back to Main</a>
<hr>
<div class="container has-text-centered top-pad">
<hr>
<a href="{{ .Permalink }}#top">TOP</a>
<hr>
</div>

{{ partial "footer.html" . }}
</div>
</div>
</div><!-- End fade in two -->
</div><!-- End parent section -->

<!-- Cool scroll effect from this guy: https://gist.github.com/flesler/ -->
<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="application/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<!-- Initialize the plugin, the contents of the script can be inlined here, of course -->
<script type="text/javascript" src={{ "js/init.js" | relURL }}></script>
<script>
// Bind to the click of all links with a #hash in the href
$('a[href^="{{ .Permalink }}#"]').click(function(e) {
// Prevent the jump and the #hash from appearing on the address bar
e.preventDefault();
// Scroll the window, stop any previous animation, stop on user manual scroll
// Check https://github.com/flesler/jquery.scrollTo for more customizability
$(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:false});
});
</script>
11 changes: 0 additions & 11 deletions layouts/_default/single.html
View file

This file was deleted.

80 changes: 44 additions & 36 deletions layouts/blog/single.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,20 @@
{{ partial "header.html" . }}

<div class="container-fluid">
<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="section" id="top"><!-- Parent section -->

<div class="container hero fade-in one"><!-- Begin Title -->
<h1 class="bold-title is-1">{{ .Site.Params.firstname }}'s Blog</h1>
</div><!-- End Title -->

<div class="content fade-in two">
<div class="blog-header">
<a href="{{ .Permalink }}">{{ .Title }}</a>
<!-- Everything below fades in two! -->
<div class="section fade-in two">

<div class="container"><!-- Begin Nav bar -->
{{ partial "nav-single.html" . }}
</div><!-- End Nav bar -->

<div class="container fade-in two"><!-- Begin blog title container -->
<h2 class="title is-1 top-pad strong-post-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<div class="post-data">
{{ .Date.Format .Site.Params.dateform }} |
{{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}
Expand Down Expand Up @@ -54,24 +46,40 @@ <h1 class="list-title">{{ .Site.Params.firstname }}'s Blog</h1>
</div>
{{ end }}

</div>
<div class="container markdown">
</div><!-- End blog title container -->

<div class="container markdown fade-in two top-pad"><!-- Begin blog post content -->
{{ .Content }}
</div><!-- End blog post content -->

<div class="disqus">
{{ template "_internal/disqus.html" . }}
</div>

<div class="nav">
<div class="container has-text-centered top-pad">
<hr>
{{ if .Site.Params.showallposts }}
<a href="/#blog">Back to blog</a> | <a href="/">Main</a>
{{ else }}
<a href="/blog">Back to blog</a> | <a href="/">Main</a>
{{ end }}
<a href="{{ .Permalink }}#top">TOP</a>
<hr>
</div>
<div class="disqus">
{{ template "_internal/disqus.html" . }}
</div>

{{ partial "footer.html" . }}
</div>
</div>
</div>
</div><!-- End fade in two -->
</div><!-- End parent section -->

<!-- Cool scroll effect from this guy: https://gist.github.com/flesler/ -->
<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="application/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<!-- Initialize the plugin, the contents of the script can be inlined here, of course -->
<script type="text/javascript" src={{ "js/init.js" | relURL }}></script>
<script>
// Bind to the click of all links with a #hash in the href
$('a[href^="{{ .Permalink }}#"]').click(function(e) {
// Prevent the jump and the #hash from appearing on the address bar
e.preventDefault();
// Scroll the window, stop any previous animation, stop on user manual scroll
// Check https://github.com/flesler/jquery.scrollTo for more customizability
$(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:false});
});
</script>
Loading

0 comments on commit c1bd334

Please sign in to comment.