Permalink
Browse files

more visual compatibility with original casper

  • Loading branch information...
eueung committed Jan 6, 2018
1 parent 44aecad commit dc592fb0a3c4fd387091d2931d8a4f9fa1f9133f
View
@@ -1,19 +1,19 @@
# Casper Two
[Casper Two](https://github.com/eueung/hugo-casper-two) is a port of the [Casper](https://github.com/TryGhost/Casper), the default personal blogging theme for Ghost. While a legacy version (v1.x) has [already been ported](https://github.com/vjeantet/hugo-theme-casper) to Hugo years ago, it is incompatible with the recent 2.x version. So I ended up porting this new Casper version. It is currently functional, but not covered all page templates yet. They may be added in the future updates.
[Casper Two](https://github.com/eueung/hugo-casper-two) is a port of the [Casper](https://github.com/TryGhost/Casper), the default personal blogging theme for Ghost. While a legacy version (v1.x) has [already been ported](https://github.com/vjeantet/hugo-theme-casper) to Hugo years ago, it is incompatible with the recent 2.x version. So I ended up porting this new Casper version.
![Screenshot](https://raw.githubusercontent.com/eueung/hugo-casper-two/master/images/screenshot.png)
## Theme Demo
- [Sample Site](//eueung.github.io/hugo-casper-two/)
- [Sample Site](//eueung.github.io/hugo-casper-new/)
## Installation
Inside the folder of your Hugo site run:
$ cd themes
$ git clone https://github.com/eueung/hugo-casper-two.git casper-two
$ git clone https://github.com/eueung/hugo-casper-new.git casper-new
For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
@@ -57,6 +57,9 @@ paginate = 6
pageNotFoundTitle = "404 - Page not found"
#casper or caspertwo
singleViewStyle = "casper"
[permalinks]
post = "/:slug/"
@@ -83,6 +86,7 @@ paginate = 6
Sample content structure is given in the `exampleSite` folder. Have fun!
![Screenshot](https://raw.githubusercontent.com/eueung/hugo-casper-two/master/images/single.jpg)
## License
View
@@ -9,7 +9,7 @@ canonifyurls = true
[params]
title = "Hugo Casper Two"
subtitle = "Port of Casper 2.x for Hugo"
copyright = "Released under the MIT license."
copyright = "© 2018"
cover = "img/blog-cover.jpg"
description = "Here is a description of your site."
@@ -35,6 +35,9 @@ canonifyurls = true
pageNotFoundTitle = "404 - Page not found"
#casper or caspertwo
singleViewStyle = "casper"
[permalinks]
post = "/post/:slug/"
@@ -49,8 +52,8 @@ canonifyurls = true
weight = 100
[[menu.main]]
name = "Food"
url = "/categories/food/"
name = "Categories"
url = "/categories/"
weight = 99
[[menu.main]]
View
BIN +479 KB images/single.jpg
Binary file not shown.
View
@@ -1,13 +1,18 @@
{{ partial "head" . }}
<body class="home-template"><div class="site-wrapper">
{{ partial "header" . }}
{{if eq .Site.Params.singleViewStyle "casper"}}
<body class="error-template"><div class="site-wrapper">
{{ partial "header-sori-error" . }}
{{else}}
<body class="home-template"><div class="site-wrapper">
{{ partial "header" . }}
{{end}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<div class="post-feed">
{{if ne .Site.Params.singleViewStyle "casper"}}
<div class="post-feed">
<article class="post-card post">
<a class="post-card-image-link" href="{{ .Permalink }}">
<div class="post-card-image" style="background-image: url({{$.Site.BaseURL}}defimg/{{ index (seq 7 | shuffle) 0 }}.jpg)"></div>
@@ -22,13 +27,29 @@ <h2 class="post-card-title">{{ .Site.Params.pageNotFoundTitle }}</h2>
<section class="post-card-excerpt" style="padding: 0 25px;">
</section>
</div>
</article>
</div>
{{else}}
<section class="error-message">
<h1 class="error-code">404</h1>
<p class="error-description">{{ .Site.Params.pageNotFoundTitle }}</p>
<a class="error-link" href="{{"/"|absURL}}">Go to the front page →</a>
</section>
{{end}}
</div>
</div>
</main>
{{if eq .Site.Params.singleViewStyle "casper"}}
<aside class="outer">
<div class="inner">
<div class="post-feed">
{{ partial "post-list-term" . }}
</div>
</div>
</aside>
{{end}}
{{ partial "footer" . }}
</div>{{ partial "js" . }}</body></html>
@@ -1,11 +1,15 @@
{{ partial "head" . }}
<body class="ctsingle"><div class="site-wrapper">
{{if ne .Site.Params.singleViewStyle "casper"}}<body class="ctsingle">
{{else}}<body class="post-template">{{end}}
<div class="site-wrapper">
{{ partial "header" . }}
{{if ne .Site.Params.singleViewStyle "casper"}}{{ partial "header" . }}
{{else}}{{ partial "header-sori" . }}{{end}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
{{if ne .Site.Params.singleViewStyle "casper"}}
<div class="post-feed">
{{ partial "post-single" . }}
</div>
@@ -19,9 +23,35 @@
<a class="older-posts" href="{{ .PrevInSection.RelPermalink }}"><span class="hide">Previous Post</span> &rarr;</a>
{{end}}
</nav>
{{else}}
{{ partial "post-single-sori" . }}
{{end}}
{{ partial "disqus" . }}
</div>
</main>
{{if eq .Site.Params.singleViewStyle "casper"}}
<aside class="read-next outer">
<div class="inner">
<div class="read-next-feed">
{{ partial "readnext-random-sori" . }}
{{with .NextInSection}}
{{ partial "readnext-article-sori" . }}
{{end}}
{{with .PrevInSection}}
{{ partial "readnext-article-sori" . }}
{{end}}
</div>
</div>
</aside>
{{ partial "header-floating-sori" . }}
{{end}}
{{ partial "footer" . }}
</div>{{ partial "js" . }}</body></html>
</div>
{{ partial "js" . }}
{{if eq .Site.Params.singleViewStyle "casper"}}{{ partial "js-sori" . }}{{end}}
</body></html>
@@ -0,0 +1,30 @@
{{ partial "head" . }}
{{if eq .Site.Params.singleViewStyle "casper"}}
<body class="tag-template"><div class="site-wrapper">
{{ partial "header-sori-tag" . }}
{{else}}
<body class="home-template"><div class="site-wrapper">
{{ partial "header" . }}
{{end}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<div class="post-feed">
{{ partial "post-list" . }}
</div>
<nav class="pagination" role="navigation">
{{if .Paginator.HasPrev}}
<a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
{{end}}
<span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
{{if .Paginator.HasNext}}
<a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
{{end}}
</nav>
</div>
</main>
{{ partial "footer" . }}
</div>{{ partial "js" . }}</body></html>
@@ -0,0 +1,36 @@
{{ partial "head" . }}
{{if eq .Site.Params.singleViewStyle "casper"}}
<body class="tag-template"><div class="site-wrapper">
{{ partial "header-sori-term" . }}
{{else}}
<body class="home-template"><div class="site-wrapper">
{{ partial "header" . }}
{{end}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
{{if ne .Site.Params.singleViewStyle "casper"}}
<div class="post-feed">
{{ partial "post-list" . }}
</div>
<nav class="pagination" role="navigation">
{{if .Paginator.HasPrev}}
<a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
{{end}}
<span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
{{if .Paginator.HasNext}}
<a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
{{end}}
</nav>
{{else}}
<div class="post-feed">
{{ partial "post-list-term" . }}
</div>
{{end}}
</div>
</main>
{{ partial "footer" . }}
</div>{{ partial "js" . }}</body></html>
View
@@ -1,14 +1,22 @@
{{ partial "head" . }}
<body class="ctsingle"><div class="site-wrapper">
{{if ne .Site.Params.singleViewStyle "casper"}}<body class="ctsingle">
{{else}}<body class="page-template">{{end}}
<div class="site-wrapper">
{{if ne .Site.Params.singleViewStyle "casper"}}{{ partial "header" . }}
{{else}}{{ partial "header-sori" . }}{{end}}
{{ partial "header" . }}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
{{if ne .Site.Params.singleViewStyle "casper"}}
<div class="post-feed">
{{ partial "page-single" . }}
</div>
{{else}}
{{ partial "page-single-sori" . }}
{{end}}
</div>
</main>
@@ -1,7 +1,7 @@
<footer class="site-footer outer">
<div class="site-footer-content inner">
<section class="copyright" style="line-height: 1.3em;">
<a href="/">{{.Site.Params.orgName}}</a> &copy; 2017 <br>
<a href="/">{{.Site.Params.orgName}}</a> {{.Site.Params.copyright}} <br>
<span style="font-size: 0.8em; color: #555;">Hugo port of <a href="https://github.com/TryGhost/Casper">Casper 2.1.7</a> by <a href="https://www.telematika.org">EM</a></span>
</section>
<nav class="site-footer-nav">
@@ -0,0 +1,30 @@
<div class="floating-header">
<div class="floating-header-logo">
<a href="{{"/" | absURL}}">
{{ if .Site.Params.logo }}<img src="{{ .Site.Params.logo | absURL}}" alt="{{.Site.Title}}" />{{end}}
<span>{{.Site.Title}}</span>
</a>
</div>
<span class="floating-header-divider">&mdash;</span>
<div class="floating-header-title">{{.Title}}</div>
<div class="floating-header-share">
<div class="floating-header-share-label">Share this <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"/></svg>
</div>
<a class="floating-header-share-tw" href="https://twitter.com/share?text={{.Title | safeHTML}}&amp;url={{.Permalink}}"
onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
</a>
<a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u={{.Permalink}}"
onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
</a>
</div>
<progress class="progress" value="0">
<div class="progress-container">
<span class="progress-bar"></span>
</div>
</progress>
</div>
@@ -0,0 +1,8 @@
<header class="site-header outer no-cover">
<div class="inner">
<nav class="site-nav-center">
{{ if .Site.Params.logo }}
<a class="site-nav-logo" href="{{"/"|absURL}}"><img src="{{ .Site.Params.logo | absURL}}" alt="{{ .Site.Params.Title }}" /></a>{{end}}
</nav>
</div>
</header>
@@ -0,0 +1,42 @@
<header class="site-header outer">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">{{ if .Site.Params.logo }}
<a class="site-nav-logo" href="#"><img src="{{ .Site.Params.logo | absURL}}" alt="{{ .Site.Params.Title }}" /></a>{{end}}
<ul class="nav" role="menu">
{{ $currentNode := . }}
{{with .Site.Menus.main}}
{{ range sort . "Weight" "desc"}}
<li class="{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .)}}nav-current{{end}}" role="menuitem">
<a href="{{.URL}}">{{.Name}}</a>
</li>
{{end}}{{end}}
</ul></div>
<div class="site-nav-right">
<div class="social-links">
{{ if .Site.Params.fbName }}<a class="social-link social-link-fb" href="https://www.facebook.com/{{ .Site.Params.fbName }}" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg></a>{{end}}
{{ if .Site.Params.twitterName }}<a class="social-link social-link-tw" href="https://twitter.com/{{ .Site.Params.twitterName }}" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg></a>{{end}}
{{ if .Site.Params.githubName }}<a class="social-link" href="https://github.com/{{ .Site.Params.githubName }}" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>{{end}}
</div>
{{ if .Site.Params.RSSLink}}
<a class="subscribe-button" href="{{.Site.Params.RSSLink }}">Subscribe</a> </div>
{{else}}
<a class="subscribe-button" href="{{if .IsNode}}{{.RSSLink}}{{else}}{{"index.xml" | absURL}}{{end}}">Subscribe</a>
{{end}}
</div>
</nav>
<div class="site-header-content">
<h1 class="site-title">{{.Title}}</h1>{{$.Scratch.Set "total" (len .Data.Pages)}}
<h2 class="site-description">
{{if ge ($.Scratch.Get "total") 2 }}A collection of {{$.Scratch.Get "total"}} posts
{{else}}{{$.Scratch.Get "total"}} post{{end}}
</h2>
</div>
</div>
</header>
Oops, something went wrong.

0 comments on commit dc592fb

Please sign in to comment.