diff options
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/404.html | 61 | ||||
| -rw-r--r-- | layouts/_default/list.html | 74 | ||||
| -rw-r--r-- | layouts/_default/single.html | 11 | ||||
| -rw-r--r-- | layouts/blog/single.html | 80 | ||||
| -rw-r--r-- | layouts/index.html | 179 | ||||
| -rw-r--r-- | layouts/partials/blogsection.html | 36 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 17 | ||||
| -rw-r--r-- | layouts/partials/header.html | 6 | ||||
| -rw-r--r-- | layouts/partials/li.html | 2 | ||||
| -rw-r--r-- | layouts/partials/nav-list.html | 30 | ||||
| -rw-r--r-- | layouts/partials/nav-single.html | 39 | ||||
| -rw-r--r-- | layouts/partials/projects.html | 60 | ||||
| -rw-r--r-- | layouts/partials/social.html | 52 |
13 files changed, 385 insertions, 262 deletions
diff --git a/layouts/404.html b/layouts/404.html index a5f3b19..b4ed8a5 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -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>
\ No newline at end of file +</div><!-- End parent section -->
\ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 5a39d0b..ecf0326 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -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" }} @@ -29,14 +39,32 @@ {{ 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>
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html deleted file mode 100644 index 8789cd6..0000000 --- a/layouts/_default/single.html +++ /dev/null @@ -1,11 +0,0 @@ -{{ partial "header.html" . }} -<section class="main"> - <div class="container-fluid"> - <div class="content"> - <div class="markdown"> - {{ .Content }} - </div> - </div> - </div> -</section> -{{ partial "footer.html" . }}
\ No newline at end of file diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 30e2c1a..5b84673 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -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 }} @@ -54,24 +46,40 @@ </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>
\ No newline at end of file +</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>
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index bd3ae6b..4e5d226 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,101 +1,130 @@ +<!-- + Hey! Thanks for looking at my code! You win a cookie. :) The nice kind with chocolate chips, not the sneaky spying kind. + + This page was originally created for the Personal Portfolio Webpage challenge on FreeCodeCamp's Front End Development Certification course. It's totally responsive, and the first web page I ever coded from scratch. + + Enjoy, and I hope you find what you're looking for! If you have questions or want to get in touch, please do: hello@vickylai.com. +--> + {{ partial "header.html" . }} -<div class="container-fluid" id="top"> -<!-- Awesome content begins here! --> - -<!-- Super sweet intro heading --> -<div class="pagehead"> -<h1 class="fade-in one intro">Hi, I'm {{ .Site.Params.firstname }}.</h1> -<p class="fade-in two blurb">{{ .Site.Params.tagline }}</p> -</div> -<!-- End of intro heading --> -<div class="fade-in three container-fluid main"> -<!-- Some social icons --> -{{ partial "social.html" . }} -<!-- End top social icons --> -<!-- Clean and simple nav section --> -<div class="nav"> -<hr> - <a href="#about">About</a> | +<div class="section" id="top"> <!-- Where all the awesome begins --> + +<div class="hero is-medium"> +<!-- Possible hero-head not used --> + <!-- Super sweet Hero body title --> + <div class="hero-body"> + <div class="container has-text-centered"> + <!-- Title and tagline --> + <h1 class="bold-title fade-in one">Hi, I'm {{ .Site.Params.firstname }}.</h1> + <h3 class="subtitle is-3 fade-in two">{{ .Site.Params.tagline }}</h3> + <!-- End title and tagline --> + <!-- Some social icons --> + <div class="fade-in three">{{ partial "social.html" . }}</div> + <!-- End top social icons --> + </div> + </div> <!-- Hero body title end --> + <!-- Hero foot has nav bar --> + <div class="hero-foot fade-in three"> + <hr> + <nav class="nav-center"> + <a class="nav-item" href="#about">About</a> {{ if .Site.Params.showprojects }} - <a href="#projects">Projects</a> | + <a class="nav-item" href="#projects">Projects</a> {{ end }} {{ if .Site.Params.showblog }} - <a href="#blog">Blog</a> | + <a class="nav-item" href="#blog">Blog</a> {{ end }} - <a href="#contact">Contact</a> -<hr> -</div> -<!-- Done with nav section --> + <a class="nav-item" href="#workwithme">Work With Me</a> + <a class="nav-item" href="#contact">Contact</a> + </nav> + <hr> + </div><!-- Done with nav bar --> +</div><!-- Done with Hero --> +</div><!-- End of top section --> + +<!-- Everything below fades in three! --> +<div class="section no-padding fade-in three"> + <!-- Tell them all about it! --> -<div class="content" id="about"> -<h2 class="section-head">About</h2> - -<div class="row"> - <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"> - +<div class="section" id="about"> + <div class="container"> + <h2 class="title is-2 has-text-centered">About</h2> + + <div class="columns"><!-- Avatar and about.md side by side except mobile --> + <div class="column is-one-third has-text-centered"><img class="img-responsive avatar" src="/{{ .Site.Params.avatar }}" alt="My profile picture."> + </div> + <div class="column markdown"> + {{ range .Data.Pages }} + {{if eq .Title "about" }} + {{.Content}} + {{end}} + {{ end }} + </div> + </div> + </div><!-- End About container--> + +<div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div> +</div><!-- End About section --> + +<div class="container"><hr></div> + + +<!-- Now for some cool projects --> + {{ if .Site.Params.showprojects }} + <div class="section" id="projects"> + {{ partial "projects.html" . }} + </div><!-- End Projects section --> + + <div class="container"><hr></div> + {{ end }} + + +<!-- Let's show some blog posts --> + {{ if .Site.Params.showblog }} + <div class="section" id="blog"> + {{ partial "blogsection.html" . }} + </div><!-- End Blog section --> + + <div class="container"><hr></div> + {{ end }} + +<!-- Let's chat, shall we? --> +<div class="section" id="contact"> + <div class="container has-text-centered"> + <h2 class="title is-2">Contact</h2> + <div class="markdown"> {{ range .Data.Pages }} - {{if eq .Title "about" }} + {{if eq .Title "contact" }} {{.Content}} {{end}} {{ end }} - - </div> -</div> - <div class="nav"><a href="#top"><i class="fa fa-arrow-up"></i></a></div> -</div> -<!-- End of About section --> -<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 --> -<!-- Let's chat, shall we? --> -<div class="content text-center" id="contact"> -<h2 class="section-head">Contact</h2> + </div> -{{ range .Data.Pages }} - {{if eq .Title "contact" }} - {{.Content}} - {{end}} - {{ end }} + {{ if .Site.Params.email }} + <h3 class="subtitle is-3 has-text-centered top-pad"><a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a></h3> + {{ end }} + + {{ partial "social.html" . }} + </div><!-- End Contact container --> + + <div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div> +</div><!-- End Contact section --> -{{ if .Site.Params.email }} -<p class="highlight-text text-center"><a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a></p> -{{ end }} +<div class="container"><hr></div> -{{ partial "social.html" . }} - <div class="nav"><a href="#top"><i class="fa fa-arrow-up"></i></a></div> -</div> -<!-- End of Contact section --> -<hr> <!-- Nice clean finish --> {{ partial "footer.html" . }} <!-- Footer done! --> -<!-- Awesome content ends here! --> -</div> -</div> +</div><!-- End of fade in three section --> +<!-- Where all the awesome ends. Aww. --> <!-- 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="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script> +<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> diff --git a/layouts/partials/blogsection.html b/layouts/partials/blogsection.html index 0b9a349..10ba7a4 100644 --- a/layouts/partials/blogsection.html +++ b/layouts/partials/blogsection.html @@ -1,21 +1,22 @@ -<div class="content" id="blog"> +<div class="container"><!-- Begin Blog container --> {{ if .Site.Params.showlatest }} -<h2 class="section-head">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> - {{ .Summary }} - {{ if .Truncated }} - <div class="read-more-link"><a href="{{ .RelPermalink }}">...Read More</a></div> - {{ end }} - </div> -{{ end }} +<h2 class="title is-2 has-text-centered">Latest Post</h2> + {{ range first 1 .Data.Pages.ByPublishDate }} + <div class="summary">{{ .Date.Format .Site.Params.dateform }} + <h3 class="title is-3 latest-post-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3> + <div class="markdown"> + {{ .Summary }} + {{ if .Truncated }} + <a href="{{ .RelPermalink }}">...Read More</a> + {{ end }} + </div> + </div> + {{ end }} {{ end }} {{ if .Site.Params.showallposts }} -<h2 class="section-head">All Posts</h2> -<div class="bloglist"> +<h2 class="title is-2 has-text-centered top-pad">All Posts</h2> <ul> {{ range .Data.Pages.ByPublishDate }} {{ if eq .Section "blog" }} @@ -23,9 +24,10 @@ {{ end }} {{ end }} </ul> -</div> {{ else }} -<div class="nav"><a href="/blog">All Blog Posts</a></div> +<div class="container has-text-centered top-pad"><a href="/blog">ALL BLOG POSTS</a></div> {{ end }} -<div class="nav"><a href="#top"><i class="fa fa-arrow-up"></i></a></div> -</div>
\ No newline at end of file + +</div><!-- End Blog container --> + +<div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div>
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 1967d70..ae74f22 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,8 +1,9 @@ -<div class="content" id="footer"> -{{ if .Site.Params.footertext }} - {{ .Site.Params.footertext }} -{{ else }} -<a href="https://github.com/vickylaixy/hugo-theme-introduction" target="_blank">Introduction</a> theme for <a href="http://gohugo.io/" target="_blank">Hugo</a> -</div> - -{{ end }}
\ No newline at end of file +<div class="section" id="footer"><!-- Begin Footer section --> + <div class="container has-text-centered"><!-- Begin Footer container --> + {{ if .Site.Params.footertext }} + {{ .Site.Params.footertext }} + {{ else }} + <span class="footer-text"><a href="https://github.com/vickylaixy/hugo-theme-introduction" target="_blank">Introduction</a> theme for <a href="http://gohugo.io/" target="_blank">Hugo</a>. Made with <i class="fa fa-heart"></i> and <i class="fa fa-coffee"></i>. <i class="fa fa-copyright"></i> <a href="https://vickylai.com" target="_blank">Vicky Lai</a> 2017</span> + {{ end }} + </div><!-- End Footer container --> +</div><!-- End Footer section -->
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7ff9ee1..3fa2ce9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -44,21 +44,21 @@ <!-- Fonts and icon CSS --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"> -<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> +<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Ubuntu+Mono:400,400i,700,700i|Raleway:500|Work+Sans"> {{ if .Site.Params.cachebuster }} {{ $t := .Now.Unix }} - <link rel="stylesheet" href="/css/main.css?t={{$t}}"> + <link rel="stylesheet" href="/css/style.css?t={{$t}}"> {{range .Site.Params.extracssfiles}} <link rel="stylesheet" href="{{.}}?t={{$t}}"> {{ end }} {{ else }} - <link rel="stylesheet" href="/css/main.css"> + <link rel="stylesheet" href="/css/style.css"> {{range .Site.Params.extracssfiles}} <link rel="stylesheet" href="{{.}}"> {{end}} diff --git a/layouts/partials/li.html b/layouts/partials/li.html index 5f46b0e..12ea89a 100644 --- a/layouts/partials/li.html +++ b/layouts/partials/li.html @@ -1,3 +1,3 @@ <li class="post-item"> - <span class="h4"><a href="{{ .Permalink }}">{{ .Title }}</a></span> - <span>{{ .Date.Format .Site.Params.dateform }}</span> + <span><a href="{{ .Permalink }}">{{ .Title }}</a></span> - <span>{{ .Date.Format .Site.Params.dateform }}</span> </li>
\ No newline at end of file diff --git a/layouts/partials/nav-list.html b/layouts/partials/nav-list.html new file mode 100644 index 0000000..45b3329 --- /dev/null +++ b/layouts/partials/nav-list.html @@ -0,0 +1,30 @@ +<hr> +<nav class="nav"> + <span id="nav-toggle" class="nav-toggle" onclick="document.getElementById('nav-menu').classList.toggle('is-active');"> + <span></span> + <span></span> + <span></span> + </span> + <div id="nav-menu" class="nav-left nav-menu"> + <span class="nav-item"> + <a href="/">Main</a> + </span> + <span class="nav-item"> + <a href="/#about">About</a> + </span> + {{ if .Site.Params.showprojects }} + <span class="nav-item"> + <a href="/#projects">Projects</a> + </span> + {{ end }} + <span class="nav-item"> + <a href="/#contact">Contact</a> + </span> + {{ if .Site.RSSLink }} + <span class="nav-item"> + <a href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a> + </span> + {{ end }} + </div> +</nav> +<hr>
\ No newline at end of file diff --git a/layouts/partials/nav-single.html b/layouts/partials/nav-single.html new file mode 100644 index 0000000..8bea737 --- /dev/null +++ b/layouts/partials/nav-single.html @@ -0,0 +1,39 @@ +<hr> +<nav class="nav"> + <span id="nav-toggle" class="nav-toggle" onclick="document.getElementById('nav-menu').classList.toggle('is-active');"> + <span></span> + <span></span> + <span></span> + </span> + <div id="nav-menu" class="nav-left nav-menu"> + <span class="nav-item"> + <a href="/">Main</a> + </span> + <span class="nav-item"> + <a href="/#about">About</a> + </span> + {{ if .Site.Params.showprojects }} + <span class="nav-item"> + <a href="/#projects">Projects</a> + </span> + {{ end }} + {{ if .Site.Params.showallposts }} + <span class="nav-item"> + <a href="/#blog">Back to blog</a> + </span> + {{ else }} + <span class="nav-item"> + <a href="/blog">Back to blog</a> + </span> + {{ end }} + <span class="nav-item"> + <a href="/#contact">Contact</a> + </span> + {{ if .Site.RSSLink }} + <span class="nav-item"> + <a href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a> + </span> + {{ end }} + </div> +</nav> +<hr>
\ No newline at end of file diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html index c886ff3..7164229 100644 --- a/layouts/partials/projects.html +++ b/layouts/partials/projects.html @@ -1,37 +1,33 @@ -<div class="content" id="projects"> -<h2 class="section-head">Projects</h2> +<div class="container"><!-- Begin Projects container --> +<h2 class="title is-2 has-text-centered">Projects</h2> -<div class="row project-grid"> - <div class="col-md-4 col-xs-12 text-center"> - <a href="{{ .Site.Params.project1link }}" class="thumbnail"> - {{ if .Site.Params.project1img }} - <img class="img-responsive" src="/{{ .Site.Params.project1img }}" alt="{{ .Site.Params.project1title }}"> - </a> - {{ end }} - <a href="{{ .Site.Params.project1link }}" class="thumbnail"> - <span class="project-title">{{ .Site.Params.project1title }}</span> - </a> +<div class="columns is-mobile"> + + <div class="column has-text-centered"> + <div class="thumbnail"> + <a href="{{ .Site.Params.project1link }}">{{ if .Site.Params.project1img }}<img class="img-responsive" src="/{{ .Site.Params.project1img }}" alt="{{ .Site.Params.project1title }}"></a>{{ end }} + </div> + <div class="thumbnail"><a href="{{ .Site.Params.project1link }}"><h4 class="title is-4 top-pad">{{ .Site.Params.project1title }}</h4></a> + </div> </div> - <div class="col-md-4 col-xs-12 text-center"> - <a href="{{ .Site.Params.project2link }}" class="thumbnail"> - {{ if .Site.Params.project2img }} - <img class="img-responsive" src="/{{ .Site.Params.project2img }}" alt="{{ .Site.Params.project2title }}"> - </a> - {{ end }} - <a href="{{ .Site.Params.project1link }}" class="thumbnail"> - <span class="project-title">{{ .Site.Params.project2title }}</span> - </a> + + <div class="column has-text-centered"> + <div class="thumbnail"> + <a href="{{ .Site.Params.project2link }}">{{ if .Site.Params.project2img }}<img class="img-responsive" src="/{{ .Site.Params.project2img }}" alt="{{ .Site.Params.project2title }}"></a>{{ end }} + </div> + <div class="thumbnail"><a href="{{ .Site.Params.project2link }}"><h4 class="title is-4 top-pad">{{ .Site.Params.project2title }}</h4></a> + </div> </div> - <div class="col-md-4 col-xs-12 text-center"> - <a href="{{ .Site.Params.project3link }}" class="thumbnail"> - {{ if .Site.Params.project3img }} - <img class="img-responsive" src="/{{ .Site.Params.project3img }}" alt="{{ .Site.Params.project3title }}"> - </a> - {{ end }} - <a href="{{ .Site.Params.project1link }}" class="thumbnail"> - <span class="project-title">{{ .Site.Params.project3title }}</span> - </a> + + <div class="column has-text-centered"> + <div class="thumbnail"> + <a href="{{ .Site.Params.project3link }}">{{ if .Site.Params.project3img }}<img class="img-responsive" src="/{{ .Site.Params.project3img }}" alt="{{ .Site.Params.project3title }}"></a>{{ end }} + </div> + <div class="thumbnail"><a href="{{ .Site.Params.project3link }}"><h4 class="title is-4 top-pad">{{ .Site.Params.project3title }}</h4></a> + </div> </div> + </div> - <div class="nav"><a href="#top"><i class="fa fa-arrow-up"></i></a></div> -</div>
\ No newline at end of file +</div><!-- End Projects container --> + +<div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div>
\ No newline at end of file diff --git a/layouts/partials/social.html b/layouts/partials/social.html index 8bced97..0ef389c 100644 --- a/layouts/partials/social.html +++ b/layouts/partials/social.html @@ -1,28 +1,26 @@ -<div class="social-icons row"> - <div class="col-md-4 col-md-offset-4"> - {{ if .Site.Params.twitter }} - <a href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank"><i class="fa fa-twitter"></i></a> - {{ end }} - {{ if .Site.Params.linkedin }} - <a href="https://linkedin.com/in/{{ .Site.Params.linkedin }}" target="_blank"><i class="fa fa-linkedin"></i></a> - {{ end }} - {{ if .Site.Params.github }} - <a href="https://github.com/{{ .Site.Params.github }}" target="_blank"><i class="fa fa-github"></i></a> - {{ end }} - {{ if .Site.Params.codepen }} - <a href="https://codepen.io/{{ .Site.Params.codepen }}" target="_blank"><i class="fa fa-codepen"></i></a> - {{ end }} - {{ if .Site.Params.pinterest }} - <a href="https://pinterest.com/{{ .Site.Params.pinterest }}" target="_blank"><i class="fa fa-pinterest"></i></a> - {{ end }} - {{ if .Site.Params.facebook }} - <a href="https://facebook.com/{{ .Site.Params.facebook }}" target="_blank"><i class="fa fa-facebook"></i></a> - {{ end }} - {{ 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 class="social-icons"> + {{ if .Site.Params.twitter }} + <a href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank"><i class="fa fa-twitter"></i></a> + {{ end }} + {{ if .Site.Params.linkedin }} + <a href="https://linkedin.com/in/{{ .Site.Params.linkedin }}" target="_blank"><i class="fa fa-linkedin"></i></a> + {{ end }} + {{ if .Site.Params.github }} + <a href="https://github.com/{{ .Site.Params.github }}" target="_blank"><i class="fa fa-github"></i></a> + {{ end }} + {{ if .Site.Params.codepen }} + <a href="https://codepen.io/{{ .Site.Params.codepen }}" target="_blank"><i class="fa fa-codepen"></i></a> + {{ end }} + {{ if .Site.Params.pinterest }} + <a href="https://pinterest.com/{{ .Site.Params.pinterest }}" target="_blank"><i class="fa fa-pinterest"></i></a> + {{ end }} + {{ if .Site.Params.facebook }} + <a href="https://facebook.com/{{ .Site.Params.facebook }}" target="_blank"><i class="fa fa-facebook"></i></a> + {{ end }} + {{ 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>
\ No newline at end of file |