diff options
26 files changed, 643 insertions, 0 deletions
@@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2018 Emiel Hollander +Copyright (c) 2018 Chester How (original theme) + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..20574f0 --- /dev/null +++ b/README.md @@ -0,0 +1,8 @@ +# Tale + +This is a port of the [Tale theme for Jekyll](https://github.com/chesterhow/tale) to Hugo. Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here](https://chesterhow.github.io/tale/). I did not design this theme; I only ported it from Jekyll to Hugo. + + + +## License +See [LICENSE](https://github.com/chesterhow/tale/blob/master/LICENSE)
\ No newline at end of file diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..ac36e06 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,2 @@ ++++ ++++ diff --git a/assets/scss/tale.scss b/assets/scss/tale.scss new file mode 100644 index 0000000..3cdfa99 --- /dev/null +++ b/assets/scss/tale.scss @@ -0,0 +1,8 @@ +@import 'tale/variables'; +@import 'tale/base'; +@import 'tale/code'; +@import 'tale/post'; +@import 'tale/syntax'; +@import 'tale/layout'; +@import 'tale/pagination'; +@import 'tale/catalogue'; diff --git a/assets/scss/tale/_base.scss b/assets/scss/tale/_base.scss new file mode 100644 index 0000000..a513579 --- /dev/null +++ b/assets/scss/tale/_base.scss @@ -0,0 +1,66 @@ +* { + @include box-sizing; + line-height: 1.5; +} + +html, +body { + color: $default-color; + margin: 0; + padding: 0; +} + +html { + font-family: $serif-primary; + font-size: 14px; + overflow-y: scroll; + + @media (min-width: 600px) { + font-size: 16px; + } +} + +body { + -webkit-text-size-adjust: 100%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $default-shade; + font-family: $sans-serif; + line-height: normal; +} + +a { + color: $blue; + text-decoration: none; +} + +blockquote { + border-left: .25rem solid $grey-2; + color: $grey-1; + margin: .8rem 0; + padding: .5rem 1rem; + + p:last-child { + margin-bottom: 0; + } + + @media (min-width: 600px) { + padding: 0 5rem 0 1.25rem; + } +} + +img { + display: block; + margin: 0 0 1rem; + max-width: 100%; +} + +td { + vertical-align: top; +} diff --git a/assets/scss/tale/_catalogue.scss b/assets/scss/tale/_catalogue.scss new file mode 100644 index 0000000..3331016 --- /dev/null +++ b/assets/scss/tale/_catalogue.scss @@ -0,0 +1,39 @@ +.catalogue { + &-item { + border-bottom: 1px solid $grey-2; + color: $default-color; + display: inline-block; + padding: 2rem 0; + + &:hover .catalogue-line, + &:focus .catalogue-line { + width: 5rem; + } + + &:last-child { + border: 0; + } + } + + &-time { + color: $default-tint; + font-family: $serif-secondary; + letter-spacing: .5px; + } + + &-title { + color: $default-shade; + display: block; + font-family: $sans-serif; + font-size: 2rem; + font-weight: 700; + margin: .5rem 0; + } + + &-line { + @include transition(all .3s ease-out); + border-top: .2rem solid $default-shade; + display: block; + width: 2rem; + } +} diff --git a/assets/scss/tale/_code.scss b/assets/scss/tale/_code.scss new file mode 100644 index 0000000..1597e13 --- /dev/null +++ b/assets/scss/tale/_code.scss @@ -0,0 +1,46 @@ +pre, +code { + font-family: $monospaced; +} + +code { + background-color: $grey-3; + border-radius: 3px; + color: $code-color; + font-size: 85%; + padding: .25em .5em; +} + +pre { + margin: 0 0 1rem; +} + +pre code { + background-color: transparent; + color: inherit; + font-size: 100%; + padding: 0; +} + +.highlight { + background-color: $grey-3; + border-radius: 3px; + line-height: 1.4; + margin: 0 0 1rem; + padding: 1rem; + + pre { + margin-bottom: 0; + overflow-x: auto; + } + + .lineno { + color: $default-tint; + display: inline-block; // Ensures the null space also isn't selectable + padding: 0 .75rem 0 .25rem; + // Make sure numbers aren't selectable + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } +} diff --git a/assets/scss/tale/_layout.scss b/assets/scss/tale/_layout.scss new file mode 100644 index 0000000..ba4a7b0 --- /dev/null +++ b/assets/scss/tale/_layout.scss @@ -0,0 +1,92 @@ +.container { + margin: 0 auto; + max-width: 800px; + width: 80%; +} + +main, +footer, +.nav-container { + display: block; + margin: 0 auto; + max-width: 800px; + width: 80%; +} + +.nav { + box-shadow: 0 2px 2px -2px $shadow-color; + overflow: auto; + + &-container { + margin: 1rem auto; + position: relative; + text-align: center; + } + + &-title { + @include transition(all .2s ease-out); + color: $default-color; + display: inline-block; + margin: 0; + padding-right: .2rem; + + &:hover, + &:focus { + opacity: .6; + } + } + + ul { + list-style-type: none; + margin: 1rem 0 0; + padding: 0; + text-align: center; + } + + li { + @include transition(all .2s ease-out); + color: $default-color; + display: inline-block; + opacity: .6; + padding: 0 2rem 0 0; + + &:last-child { + padding-right: 0; + } + + &:hover, + &:focus { + opacity: 1; + } + } + + a { + color: $default-color; + font-family: $sans-serif; + } +} + +@media (min-width: 600px) { + .nav { + &-container { + text-align: left; + } + + ul { + bottom: 0; + position: absolute; + right: 0; + } + } +} + +footer { + font-family: $serif-secondary; + padding: 2rem 0; + text-align: center; + + span { + color: $default-color; + font-size: .8rem; + } +} diff --git a/assets/scss/tale/_pagination.scss b/assets/scss/tale/_pagination.scss new file mode 100644 index 0000000..3700e15 --- /dev/null +++ b/assets/scss/tale/_pagination.scss @@ -0,0 +1,44 @@ +.pagination { + border-top: .5px solid $grey-2; + font-family: $serif-secondary; + padding-top: 2rem; + position: relative; + text-align: center; + + span { + color: $default-shade; + font-size: 1.1rem; + } + + .top { + @include transition(all .3s ease-out); + color: $default-color; + font-family: $sans-serif; + font-size: 1.1rem; + opacity: .6; + + &:hover { + opacity: 1; + } + } + + .arrow { + @include transition(all .3s ease-out); + color: $default-color; + position: absolute; + + &:hover, + &:focus { + opacity: .6; + text-decoration: none; + } + } + + .left { + left: 0; + } + + .right { + right: 0; + } +} diff --git a/assets/scss/tale/_post.scss b/assets/scss/tale/_post.scss new file mode 100644 index 0000000..3680d80 --- /dev/null +++ b/assets/scss/tale/_post.scss @@ -0,0 +1,63 @@ +.post { + padding: 3rem 0; + + &-info { + color: $default-tint; + font-family: $serif-secondary; + letter-spacing: 0.5px; + text-align: center; + + span { + font-style: italic; + } + } + + &-title { + color: $default-shade; + font-family: $sans-serif; + font-size: 4rem; + margin: 1rem 0; + text-align: center; + } + + &-line { + border-top: 0.4rem solid $default-shade; + display: block; + margin: 0 auto 3rem; + width: 4rem; + } + + p { + margin: 0 0 1rem; + text-align: justify; + } + + a:hover { + text-decoration: underline; + } + + img { + margin: 0 auto 0.5rem; + } + + img + em { + color: $default-tint; + display: block; + font-family: $sans-serif; + font-size: 0.9rem; + font-style: normal; + text-align: center; + } + + // CSS for making emoji inline + img.emoji { + display: inline-block; + left: 0; + transform: none; + width: 1rem; + height: 1rem; + vertical-align: text-top; + padding: 0; + margin: 0; + } +} diff --git a/assets/scss/tale/_syntax.scss b/assets/scss/tale/_syntax.scss new file mode 100644 index 0000000..15ad797 --- /dev/null +++ b/assets/scss/tale/_syntax.scss @@ -0,0 +1,65 @@ +.highlight .hll { background-color: #ffc; } +.highlight .c { color: #999; } /* Comment */ +.highlight .err { color: #a00; background-color: #faa } /* Error */ +.highlight .k { color: #069; } /* Keyword */ +.highlight .o { color: #555 } /* Operator */ +.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #099 } /* Comment.Preproc */ +.highlight .c1 { color: #999; } /* Comment.Single */ +.highlight .cs { color: #999; } /* Comment.Special */ +.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #f00 } /* Generic.Error */ +.highlight .gh { color: #030; } /* Generic.Heading */ +.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ +.highlight .go { color: #aaa } /* Generic.Output */ +.highlight .gp { color: #009; } /* Generic.Prompt */ +.highlight .gs { } /* Generic.Strong */ +.highlight .gu { color: #030; } /* Generic.Subheading */ +.highlight .gt { color: #9c6 } /* Generic.Traceback */ +.highlight .kc { color: #069; } /* Keyword.Constant */ +.highlight .kd { color: #069; } /* Keyword.Declaration */ +.highlight .kn { color: #069; } /* Keyword.Namespace */ +.highlight .kp { color: #069 } /* Keyword.Pseudo */ +.highlight .kr { color: #069; } /* Keyword.Reserved */ +.highlight .kt { color: #078; } /* Keyword.Type */ +.highlight .m { color: #f60 } /* Literal.Number */ +.highlight .s { color: #d44950 } /* Literal.String */ +.highlight .na { color: #4f9fcf } /* Name.Attribute */ +.highlight .nb { color: #366 } /* Name.Builtin */ +.highlight .nc { color: #0a8; } /* Name.Class */ +.highlight .no { color: #360 } /* Name.Constant */ +.highlight .nd { color: #99f } /* Name.Decorator */ +.highlight .ni { color: #999; } /* Name.Entity */ +.highlight .ne { color: #c00; } /* Name.Exception */ +.highlight .nf { color: #c0f } /* Name.Function */ +.highlight .nl { color: #99f } /* Name.Label */ +.highlight .nn { color: #0cf; } /* Name.Namespace */ +.highlight .nt { color: #2f6f9f; } /* Name.Tag */ +.highlight .nv { color: #033 } /* Name.Variable */ +.highlight .ow { color: #000; } /* Operator.Word */ +.highlight .w { color: #bbb } /* Text.Whitespace */ +.highlight .mf { color: #f60 } /* Literal.Number.Float */ +.highlight .mh { color: #f60 } /* Literal.Number.Hex */ +.highlight .mi { color: #f60 } /* Literal.Number.Integer */ +.highlight .mo { color: #f60 } /* Literal.Number.Oct */ +.highlight .sb { color: #c30 } /* Literal.String.Backtick */ +.highlight .sc { color: #c30 } /* Literal.String.Char */ +.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #c30 } /* Literal.String.Double */ +.highlight .se { color: #c30; } /* Literal.String.Escape */ +.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ +.highlight .si { color: #a00 } /* Literal.String.Interpol */ +.highlight .sx { color: #c30 } /* Literal.String.Other */ +.highlight .sr { color: #3aa } /* Literal.String.Regex */ +.highlight .s1 { color: #c30 } /* Literal.String.Single */ +.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ +.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #033 } /* Name.Variable.Class */ +.highlight .vg { color: #033 } /* Name.Variable.Global */ +.highlight .vi { color: #033 } /* Name.Variable.Instance */ +.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } diff --git a/assets/scss/tale/_variables.scss b/assets/scss/tale/_variables.scss new file mode 100644 index 0000000..8a064f3 --- /dev/null +++ b/assets/scss/tale/_variables.scss @@ -0,0 +1,29 @@ +// Colors +$default-color: #555; +$default-shade: #353535; +$default-tint: #aaa; +$grey-1: #979797; +$grey-2: #e5e5e5; +$grey-3: #f9f9f9; +$white: #fff; +$blue: #4a9ae1; +$shadow-color: rgba(0, 0, 0, .2); +$code-color: #bf616a; + +// Fonts +$serif-primary: 'Libre Baskerville', 'Times New Roman', Times, serif; +$serif-secondary: Palatino, 'Palatino LT STD', 'Palatino Linotype', 'Book Antiqua', 'Georgia', serif; +$sans-serif: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; +$monospaced: Menlo, Monaco, monospace; + +@mixin box-sizing($type: border-box) { + -webkit-box-sizing: $type; + -moz-box-sizing: $type; + box-sizing: $type; +} + +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + transition: $args; +} diff --git a/images/screenshot.png b/images/screenshot.png Binary files differnew file mode 100644 index 0000000..032b970 --- /dev/null +++ b/images/screenshot.png diff --git a/images/tn.png b/images/tn.png Binary files differnew file mode 100644 index 0000000..7538894 --- /dev/null +++ b/images/tn.png diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/404.html diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..5f8e2ec --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + {{- partial "head.html" . -}} + <body> + {{- partial "header.html" . -}} + <div id="content"> + {{- block "main" . }}{{- end }} + </div> + {{- partial "footer.html" . -}} + </body> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/_default/list.html diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..fac4e58 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,38 @@ +{{ partial "header.html" . }} + +<main> + <div class="post"> + <div class="post-info"> + <span>Written by</span> + {{ if .Params.Author }} + {{ .Params.Author }} + {{ else }} + {{ .Site.Params.Author }} + {{ end }} + + {{ if .PublishDate }} + <br> + <span>on </span><time datetime="{{ .PublishDate }}">{{ .PublishDate.Format "January 2, 2006" }}</time> + {{ end }} + </div> + + <h1 class="post-title">{{ .Title }}</h1> + <div class="post-line"></div> + + {{ .Content }} + + </div> + + <div class="pagination"> + {{ if .Next }} + <a href="{{ .Next.URL }}" class="left arrow">←</a> + {{ end }} + {{ if .Prev }} + <a href="{{ .Prev.URL }}" class="right arrow">→</a> + {{ end }} + + <a href="#" class="top">Top</a> + </div> +</main> + +{{ partial "footer.html" . }}
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..edfc24e --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,33 @@ +{{ partial "header.html" . }} + +<main> + <div class="catalogue"> + {{ range (.Paginate (where .Pages "Type" "post")).Pages }} + <a href="{{ .Permalink }}" class="catalogue-item"> + <div> + <time datetime="{{ .PublishDate }}" class="catalogue-time">{{ .PublishDate.Format "January 2, 2006" }}</time> + <h1 class="catalogue-title">{{ .Title }}</h1> + <div class="catalogue-line"></div> + + <p> + {{ .Summary }} + </p> + + </div> + </a> + {{ end }} + </div> + + <div class="pagination"> + {{ if .Paginator.HasPrev }} + <a href="{{ .Paginator.Prev.URL }}" class="left arrow">←</a> + {{ end }} + {{ if .Paginator.HasNext }} + <a href="{{ .Paginator.Next.URL }}" class="right arrow">→</a> + {{ end }} + + <span>{{ .Paginator.PageNumber }}</span> + </div> +</main> + +{{ partial "footer.html" . }}
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..54361a5 --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,7 @@ + <footer> + <span> + © <time datetime="{{ now }}">{{ now.Format "2006" }}</time> {{ .Site.Params.Author }}. Made with Hugo using the <a href="https://github.com/chesterhow/tale/">Tale</a> theme. + </span> + </footer> + </body> +</html>
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..ff71cae --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,33 @@ +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + {{ if eq .URL "/" }} + <meta name="description" content="{{ .Site.Params.Description }}"> + {{ else }} + {{ if .Description }} + <meta name="description" content="{{ .Description }}"> + {{ end }} + {{ end }} + + <title> + {{ if eq .URL "/" }} + {{ .Site.Title }} + {{ else }} + {{ .Title }} · {{ .Site.Title }} + {{ end }} + </title> + + <!-- CSS --> + {{ $style := resources.Get "scss/tale.scss" | toCSS | minify }} + <link rel="stylesheet" href="{{ $style.Permalink }}"> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700"> + + <!-- Favicon --> + <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.BaseURL }}images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.BaseURL }}images/favicon-16x16.png"> + <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.BaseURL}}images/apple-touch-icon.png"> + + <!-- RSS --> + <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" /> + </head> +
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..22d6999 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> + + {{ partial "head.html" . }} + + <body> + <nav class="nav"> + <div class="nav-container"> + <a href="{{ .Site.BaseURL }}/"> + <h2 class="nav-title">{{ .Site.Title }}</h2> + </a> + <ul> + <li><a href="{{ .Site.BaseURL }}about">About</a></li> + <li><a href="{{ .Site.BaseURL }}">Posts</a></li> + </ul> + </div> + </nav>
\ No newline at end of file diff --git a/static/images/apple-touch-icon.png b/static/images/apple-touch-icon.png Binary files differnew file mode 100644 index 0000000..f4a8c65 --- /dev/null +++ b/static/images/apple-touch-icon.png diff --git a/static/images/favicon-16x16.png b/static/images/favicon-16x16.png Binary files differnew file mode 100644 index 0000000..cfc9142 --- /dev/null +++ b/static/images/favicon-16x16.png diff --git a/static/images/favicon-32x32.png b/static/images/favicon-32x32.png Binary files differnew file mode 100644 index 0000000..21634dd --- /dev/null +++ b/static/images/favicon-32x32.png diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..285421c --- /dev/null +++ b/theme.toml @@ -0,0 +1,21 @@ +# theme.toml template for a Hugo theme +# See https://github.com/gohugoio/hugoThemes#themetoml for an example + +name = "Tale" +license = "MIT" +licenselink = "https://github.com/EmielH/tale-hugo/blob/master/LICENSE" +description = "A port of the Tale theme for Hugo. Tale is a minimal Jekyll theme curated for storytellers." +homepage = "https://github.com/EmielH/tale-hugo" +tags = ["minimal", "clean", "responsive", "simple", "personal", "blog", "starter", "light", "typography"] +features = ["pagination"] +min_version = "0.43" + +[author] + name = "Emiel Hollander" + homepage = "https://www.emielhollander.nl" + +# If porting an existing theme +[original] + name = "Chester How" + homepage = "https://github.com/chesterhow/tale" + repo = "https://github.com/chesterhow/tale" |
