Layout remodelled using bulma, css minified. Added responsive hamburger menu on mobile.

This commit is contained in:
Vicky 2017-03-26 13:23:50 +08:00
parent 7b198daf79
commit c1bd334f83
15 changed files with 387 additions and 575 deletions

View file

@ -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="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 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="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">
<div class="container fade-in two"><!-- Begin Nav bar -->
<hr>
</div>
<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><!-- End Nav bar -->
<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><!-- End blurb -->
{{ partial "footer.html" . }}
</div>
</div>
</div>
</div><!-- End parent section -->

View file

@ -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="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="fade-in two">
{{ if .Site.Params.showlatest }}
<h2 class="blog-header">Latest Post</h2>
<!-- 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>

View file

@ -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" . }}

View file

@ -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="section" id="top"><!-- Parent section -->
<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="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>
</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>

View file

@ -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! -->
<div class="section" id="top"> <!-- Where all the awesome begins -->
<!-- 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="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="section" id="about">
<div class="container">
<h2 class="title is-2 has-text-centered">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="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>
<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>
{{ 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 }}
{{ range .Data.Pages }}
{{if eq .Title "contact" }}
{{.Content}}
{{end}}
{{ end }}
{{ partial "social.html" . }}
</div><!-- End Contact container -->
{{ 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 has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div>
</div><!-- End Contact section -->
<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>

View file

@ -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>
</div><!-- End Blog container -->
<div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div>

View file

@ -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 }}
<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 -->

View file

@ -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}}

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>
</div><!-- End Projects container -->
<div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div>

View file

@ -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>

View file

@ -1,312 +0,0 @@
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fade-in.two {
-webkit-animation-delay: 1.4s;
-moz-animation-delay:1.4s;
animation-delay: 1.4s;
}
.fade-in.three {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
animation-delay: 1.8s;
}
body {
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #666;
}
a {
color: #00b8d4;
}
a:hover {
color: #000;
font-style: none;
}
a:active {
color: #00b8d4;
}
h1 {
color: #222;
font-family: 'Work Sans', sans-serif;
}
h2 {
color: #222;
font-family: 'Work Sans', sans-serif;
}
hr {
}
ul {
padding: 0;
}
.post-item {
display: block;
list-style: none;
list-style-position: outside;
margin-left: 0;
}
.main {
padding: 0px 40px 40px 40px;
width: 80%;
margin: 0 auto;
float: center;
}
@media (max-width: 600px) {
.main {
padding: 0px 20px 20px 20px;
width: 100%;
margin: 0 auto;
float: center;
}
}
.nav {
text-align: center;
text-transform: uppercase;
margin: 3% 0 3% 0;
}
.blognav {
text-align: left;
text-transform: uppercase;
margin: 3% 0 3% 0;
}
.content {
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: 600px) {
.list-title {
font-size: 3em;
font-weight:bold;
margin-left: 0;
}
}
.section-head {
font-size: 3em;
text-align: center;
margin: 1.5em 0em 1.5em 0em;
}
@media (max-width: 600px) {
.section-head {
font-size: 2em;
text-align: center;
margin: 1em 0em 1em 0em;
}
}
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: 600px) {
.intro {
font-size: 3em;
font-weight:bold;
}
}
.blurb {
font-size: 2em;
text-align: center;
}
@media (max-width: 600px) {
.blurb {
font-size: 1em;
text-align: center;
}
}
.social-icons {
text-align: center;
font-size: 2em;
margin: 1em;
}
.highlight-text {
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;
}
.project-title {
font-size: 1.5em;
font-weight: bold;
}
.thumbnail {
border: none;
}
.summary {
margin: 0 0 1.5em 0;
}
.bloglist {
text-align: center;
}
.blog-header {
margin: 3% 0 3% 0;
text-align: left;
font-size: 3em;
font-weight: bold;
}
@media (max-width: 600px) {
.blog-header {
margin: 3% 0 3% 0;
text-align: left;
font-size: 2em;
font-weight: bold;
}
}
.post-data {
font-size: 0.4em;
font-weight: normal;
}
.blog-share {
font-size: 0.35em;
font-weight: normal;
line-height: 2em;
}
#footer {
text-align: center;
color: #888;
padding: 2em;
font-size: 0.8em;
}
#footer a {
color: #888;
}

1
static/css/style.css Normal file

File diff suppressed because one or more lines are too long