mirror of
https://git.adityakumar.xyz/hugo-theme-introduction.git
synced 2024-11-21 19:42:52 +00:00
Layout remodelled using bulma, css minified. Added responsive hamburger menu on mobile.
This commit is contained in:
Vicky
parent
7b198daf79
commit
c1bd334f83
15 changed files with 387 additions and 575 deletions
|
|
@ -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">
|
||||
<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="container fade-in two"><!-- Begin Nav bar -->
|
||||
<hr>
|
||||
<a href="/">Main</a> |
|
||||
<a href="/#about">About</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 href="/#projects">Projects</a> |
|
||||
<a class="nav-item" href="/#projects">Projects</a> |
|
||||
{{ end }}
|
||||
{{ if .Site.Params.showallposts }}
|
||||
<a href="/#blog">Back to blog</a> |
|
||||
<a href="/#blog">Blog</a> |
|
||||
{{ else }}
|
||||
<a href="/blog">Back to blog</a> |
|
||||
<a href="/blog">Blog</a> |
|
||||
{{ end }}
|
||||
<a href="/#contact">Contact</a>
|
||||
<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><!-- End Nav bar -->
|
||||
|
||||
<div class="content fade-in two">
|
||||
|
||||
<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><!-- End blurb -->
|
||||
|
||||
|
||||
|
||||
<div class="blognav">
|
||||
<hr>
|
||||
</div>
|
||||
{{ partial "footer.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End parent section -->
|
||||
|
|
@ -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 -->
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
<div class="fade-in two">
|
||||
{{ if .Site.Params.showlatest }}
|
||||
<h2 class="blog-header">Latest Post</h2>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -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" . }}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 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="col-md-7">
|
||||
|
||||
<div class="column markdown">
|
||||
{{ range .Data.Pages }}
|
||||
{{if eq .Title "about" }}
|
||||
{{.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>
|
||||
</div><!-- End About container-->
|
||||
|
||||
{{ range .Data.Pages }}
|
||||
<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 "contact" }}
|
||||
{{.Content}}
|
||||
{{end}}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if .Site.Params.email }}
|
||||
<p class="highlight-text text-center"><a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a></p>
|
||||
{{ 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 -->
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
<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 }}
|
||||
<h4><span style="font-weight: bold"><a href="{{ .RelPermalink }}">{{ .Title }}</a></span></h4>
|
||||
<h3 class="title is-3 latest-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>
|
||||
{{ end }}
|
||||
</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>
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
<div class="content" id="footer">
|
||||
{{ if .Site.Params.footertext }}
|
||||
<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 }}
|
||||
<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 }}
|
||||
{{ 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 -->
|
||||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
30
layouts/partials/nav-list.html
Normal file
30
layouts/partials/nav-list.html
Normal 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>
|
||||
39
layouts/partials/nav-single.html
Normal file
39
layouts/partials/nav-single.html
Normal 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>
|
||||
|
|
@ -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="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="thumbnail"><a href="{{ .Site.Params.project1link }}"><h4 class="title is-4 top-pad">{{ .Site.Params.project1title }}</h4></a>
|
||||
</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>
|
||||
|
||||
<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="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>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<div class="social-icons row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<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 }}
|
||||
|
|
@ -24,5 +23,4 @@
|
|||
{{ if .Site.RSSLink }}
|
||||
<a href="{{ .Site.RSSLink }}"><i class="fa fa-rss"></i></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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
1
static/css/style.css
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue