mirrors/hugo-tufte
1
0
Fork 1
mirror of https://github.com/loikein/hugo-tufte.git synced 2024-12-23 22:09:44 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

v0.1.0

Browse source 
Theme should be useable, but there might be some minor stylistic tweaks
here and there.
This commit is contained in:
Shawn O'Hare 2016-01-14 21:02:57 -08:00
parent e3d2a647f9
commit 82958f2609
10 changed files with 227 additions and 217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
layouts/404.html
View file

@ -1,10 +1,7 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{ partial "subheader.html" . }}
<section id="main"> <section id="main">
<div> <div>
<h1 id="title">{{ .Title }}</h1> <h1 id="title">{{ .Title }}</h1>
</div> </div>
</section> </section>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

67
layouts/_default/list.html
View file

@ -1,43 +1,36 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<body> <body>
<div id="layout" class="pure-g"> <div id="layout" class="pure-g">
<div class="content content-column pure-u-1 pure=u-md-4-5"> <article class="pure-u-1">
{{ partial "brand.html" . }} {{ partial "brand.html" . }}
{{ partial "content.header.html" . }}
<h1 class="content-title-mini">{{ .Title }}</h1> <section class="list-page">
{{ range .Data.Pages.GroupByDate "2006" }}
{{ range .Data.Pages.GroupByDate "2006" }} <details open>
<details open> <summary class="year">{{ .Key }} ({{ len .Pages }})</summary>
<summary>{{ .Key }} ({{ len .Pages }})</summary> {{ range .Pages.GroupByDate "January" }}
<ul>
{{ range .Pages.GroupByDate "January" }} <li>
<div class="list-page"> <details open>
<ul> <summary>{{ .Key }} ({{ len .Pages }})</summary>
<li> {{ range .Pages }}
<details open> <ul>
<summary>{{ .Key }} ({{ len .Pages }})</summary> <li>
{{ range .Pages }} <span class="list-date">{{ .Date.Format "Jan 2" }} &middot;</span>
<ul> <a href="{{ .RelPermalink }}">{{.Title}}</a>
<li> </li>
<span class="list-date">{{ .Date.Format "Jan 2" }} &middot;</span> </ul>
<a href="{{ .RelPermalink }}">{{.Title}}</a> {{ end }}
</li> </details>
</ul> </li>
{{ end }} </ul>
</details>
</li>
</ul>
</div>
{{ end }}
</details>
{{ end }} {{ end }}
</details>
{{ end }}
{{ partial "footer.html" . }} </section>
</div> {{ partial "footer.html" . }}
</article>
</div> </div>
</body> </body>
</html> </html>

30
layouts/_default/single.html
View file

@ -1,23 +1,17 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<body> <body>
<div id="layout" class="pure-g"> <div id="layout" class="pure-g">
<div class="content content-column pure-u-1 pure-u-md-4-5"> <article class="pure-u-1">
{{ partial "brand.html" . }} {{ partial "brand.html" . }}
{{ partial "content.header.html" . }} {{ partial "content.header.html" . }}
{{ if .Params.toc }} {{ partial "toc.html" . }}
<div class="toc"> <section>{{ .Content }}</section>
<h1>Contents</h1> <section>
{{ .TableOfContents }} {{ partial "disqus.html" . }}
</div> {{ partial "footer.html" . }}
{{ end }} </section>
{{ .Content }} </article>
</div>
{{ partial "disqus.html" . }}
{{ partial "footer.html" . }}
</div>
</div>
{{ partial "body.includes.html" . }}
</body> </body>
</html> </html>

108
layouts/_default/terms.html
View file

@ -1,60 +1,64 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<body> <body>
<div id="layout" class="pure-g"> <div id="layout" class="pure-g">
<div class="content content-column pure-u-1 pure-u-md-4-5"> <article class="pure-u-1">
{{ partial "brand.html" . }} {{ partial "brand.html" . }}
{{ partial "content.header.html" . }}
{{ $data := .Data }}
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<h2>By Frequency</h2>
<section>
<table class="pure-table pure-table-horizontal pure-table-striped">
<thead>
<tr>
<th>Term</th>
<th>Count</th>
</tr>
</thead>
</tbody>
{{ range $key, $value := .Data.Terms.ByCount }}
<tr>
<td>
<a href="{{ $data.Plural }}/{{ $value.Name| urlize }}">
{{ $value.Name}}
</a>
</td>
<td>{{ $value.Count }}</td>
</tr>
{{ end }}
</tbody>
</table>
</section>
</div>
<h1 class="content-title-mini">{{ .Title }}</h1> <div class="pure-u-1 pure-u-sm-1-2">
{{ $data := .Data }} <h2>Alphabetically</h2>
<div class="pure-g"> <section>
<div class="pure-u-1 pure-u-sm-1-2"> <table class="pure-table pure-table-horizontal pure-table-striped">
<h2 class="list-title">By Frequency</h2> <thead>
<table class="pure-table pure-table-horizontal pure-table-striped"> <tr>
<thead> <th>Term</th>
<tr> <th>Count</th>
<th>Term</th> </tr>
<th>Count</th> </thead>
</tr> </tbody>
</thead> {{ range $key, $value := .Data.Terms.Alphabetical}}
</tbody> <tr>
{{ range $key, $value := .Data.Terms.ByCount }} <td><a href="{{ $data.Plural }}/{{ $value.Name| urlize }}">
<tr> {{ $value.Name}}
<td><a href="{{ $data.Plural }}/{{ $value.Name| urlize }}"> </a></td>
{{ $value.Name}} <td>{{ $value.Count }}</td>
</a></td> </tr>
<td>{{ $value.Count }}</td> {{ end }}
</tr> </tbody>
{{ end }} </table>
</tbody> </section>
</table> </div>
</div> </div>
{{ partial "footer.html" . }}
<div class="pure-u-1 pure-u-sm-1-2"> </article>
<h2 class="list-title">Alphabetically</h2>
<table class="pure-table pure-table-horizontal pure-table-striped">
<thead>
<tr>
<th>Term</th>
<th>Count</th>
</tr>
</thead>
</tbody>
{{ range $key, $value := .Data.Terms.Alphabetical}}
<tr>
<td><a href="{{ $data.Plural }}/{{ $value.Name| urlize }}">
{{ $value.Name}}
</a></td>
<td>{{ $value.Count }}</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
</div>
{{ partial "footer.html" . }}
</div>
</div> </div>
</body> </body>
</html> </html>

32
layouts/index.html
View file

@ -1,23 +1,17 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{ partial "math.html" . }}
<body> <body>
<div id="layout" class="pure-g">
<article> <article class="pure-u-1">
{{ partial "brand.html" . }} {{ partial "brand.html" . }}
{{ range first 5 .Site.Pages }}
{{ range first 5 .Site.Pages }} {{ partial "content.header.html" . }}
<section class="post-summary"> <p>{{ .Summary }}</p>
{{ partial "content.header.html" . }} {{ if .Truncated }}
<p>{{ .Summary }}</p> <p><a href="{{ .RelPermalink }}">Read On &rarr;</a></p>
{{ if .Truncated }} {{ end }}
<a href="{{ .RelPermalink }}">Read On &rarr;</a> {{ end }}
{{ end }} {{ partial "footer.html" . }}
</section> </article>
{{ end }} </div>
{{ partial "footer.html" . }}
</div>
{{ partial "body.includes.html" . }}
</article>
</body> </body>
</html> </html>

12
layouts/partials/brand.html
View file

@ -1,7 +1,5 @@
<div class="header"> <header class="brand">
<div class="brand"> <h1>{{ .Site.Title}}</h1>
<h1>{{ .Site.Title}}</h1> <h2>{{ .Site.Params.subtitle }}</h2>
<h2>{{ .Site.Params.subtitle }}</h2> {{ partial "nav.html" . }}
{{ partial "nav.html" . }} </header>
</div>
</div>

10
layouts/partials/footer.html
View file

@ -1,5 +1,6 @@
<div class="fineprint"> <footer class="page-footer">
<ul class="footer-menu"> <hr>
<ul class="page-footer-menu">
{{ range .Site.Menus.footer }} {{ range .Site.Menus.footer }}
<li><a href="{{.URL}}">{{.Pre }}{{ .Name }}</a></li> <li><a href="{{.URL}}">{{.Pre }}{{ .Name }}</a></li>
{{ end }} {{ end }}
@ -8,7 +9,7 @@
{{ if .Site.Params.showPoweredBy}} {{ if .Site.Params.showPoweredBy}}
<p> <p>
Powered by <a href="https://gohugo.io">Hugo</a> and the Powered by <a href="https://gohugo.io">Hugo</a> and the
<a href="https://github.com/shawnohare/hugo-morphism">Morphism theme</a>. <a href="https://github.com/shawnohare/hugo-tufte">Tufte theme</a>.
</p> </p>
{{ end }} {{ end }}
@ -23,4 +24,5 @@
{{end}} {{end}}
</p> </p>
</div> </div>
</div> </footer>
{{ partial "body.includes.html" . }}

2
layouts/partials/header.includes.html
View file

@ -1,5 +1,5 @@
<!-- Load MathJax, if necessary. --> <!-- Load MathJax, if necessary. -->
{{ if eq .Params.math true }} {{ if or (eq .Params.math "true") (.IsHome) }}
{{ partial "math.html" . }} {{ partial "math.html" . }}
{{ end }} {{ end }}

8
layouts/partials/nav.html
View file

@ -1,5 +1,7 @@
<span class="nav"> <nav class="menu">
<ul>
{{ range .Site.Menus.nav }} {{ range .Site.Menus.nav }}
<a href="{{ .URL }}">{{ .Pre }}{{ .Name }}</a> <li><a href="{{ .URL }}">{{ .Pre }}{{ .Name }}</a></li>
{{ end }} {{ end }}
</span> </ul>
</nav>

172
static/css/hugo-tufte.css
View file

@ -4,49 +4,55 @@
/* accomodate a blog-like site. */ /* accomodate a blog-like site. */
/* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */
/* When setting the primary font stack, apply it to the Pure grid units along */
/* with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use */
/* specific font stacks to ensure the greatest OS/browser compatibility. */
html, button, input, select, textarea, p, nav, section, article, header, footer, .pure-g [class *= "pure-u"] {
font-family: "et-book", -apple-system, "San Francisco", "Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue", "Lucida Grand", sans-serif;
}
/* Hugo code blocks are <pre><code class="language-$lang">...</code></pre> */ /* Hugo code blocks are <pre><code class="language-$lang">...</code></pre> */
@media screen and (max-width: 760px) { /*@media screen and (max-width: 760px) {
pre code { pre code {
width: 87.5%;
} }
}*/
code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 1.125rem;
line-height: 1.6;
} }
pre code { pre code {
width: 52.5%; width: 52.5%;
font-size: 1.2rem;
padding-left: 2.5%; padding-left: 2.5%;
display: block; display: block;
overflow-x: scroll; overflow-x: scroll;
} }
@media (max-width: 760px) { /*@media (max-width: 760px) {
pre code { pre code {
width: 90%; width: 90%;
padding: 0; padding: 0;
} }
} }*/
/* FIXME delete */
/* To be faithful to Tufte-CSS, we should rely on section shortcodes. */
/*h2 {
padding-top: 2.5rem;
}*/
/* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */
/* Brand details, such as a sidebar or top display. */ /* Brand details, such as a sidebar or top display. */
/* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */
.brand{ header.brand{
margin-top: 0.5em; margin-top: 0.5em;
} }
/* Main brand title */ /* Main brand title */
.brand h1 { header.brand h1 {
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
color: rgba(65, 70, 75, 1); color: rgba(65, 70, 75, 1);
} }
/* Brand subtitles */ header.brand h2 {
.brand h2 {
margin: 0; margin: 0;
padding-top: 0rem; padding-top: 0rem;
/*font-style: normal;*/ /*font-style: normal;*/
@ -54,27 +60,43 @@ pre code {
color: rgba(100, 105, 110, 1); color: rgba(100, 105, 110, 1);
} }
.nav { header.brand hr {
display: inline-block; text-align: left;
*display: inline; margin-left: 0;
zoom: 1; width: 75%;
margin-top: 0.4em; border-color: rgba(250, 250, 250, 0.25);
padding: 0;
} }
.nav a {
nav.menu ul {
list-style: none;
display: block;
/*text-align:center;*/
margin-top: 0.75rem;
padding: 0;
max-width: 45rem;
/* Width is the same as tufte.css body */
font-size: .9rem;
width: 87.5%;
}
nav.menu li {
display: inline-block;
margin-right: 1rem;
}
nav.menu li a {
text-decoration: none; text-decoration: none;
background: transparent; background: transparent;
color: rgba(65, 70, 75, 1); color: rgba(65, 70, 75, 1);
padding: 0.5em;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
font-size: 90%;
} }
.nav a:hover,
.nav a:active, nav.menu li a:hover,
.nav a:focus { nav.menu li a:active,
nav.menu li a:focus {
background: inherit; background: inherit;
color: lightgray; color: darkgray;
} }
/* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */
@ -82,14 +104,18 @@ pre code {
/* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */
/* Content Title styling. This is mostly to avoid underlying links. */ /* Content Title styling. This is mostly to avoid underlying links. */
h1.content-title a { h1.content-title {
/*max-width: 50rem;*/
}
h1.content-title a:link,
h1.content-title a:visited {
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
h1.content-title a:hover, h1.content-title a:hover,
h1.content-title a:focus { h1.content-title a:focus {
color: lightgray; color: darkgray;
} }
/* Content meta-data such as author, publication date, etc. */ /* Content meta-data such as author, publication date, etc. */
@ -97,7 +123,7 @@ h1.content-title a:focus {
display: block; display: block;
/*color: rgba(155, 155, 155, 1);*/ /*color: rgba(155, 155, 155, 1);*/
color: rgba(100, 105, 110, 1); color: rgba(100, 105, 110, 1);
font-size: 90%; font-size: 1.1rem;
margin-top: 1em; margin-top: 1em;
} }
@ -106,19 +132,6 @@ h1.content-title a:focus {
color: rgba(65, 70, 75, 1); color: rgba(65, 70, 75, 1);
} }
/* Content envelope that limits the max width. */
.content-column {
max-width: 38em;
margin: 0 auto;
}
/* ------------------------------------------------------------------------ */
/* Posts FIXME can probably delete */
/* ------------------------------------------------------------------------ */
.post-summary {
padding-bottom: 2em;
}
.post-avatar { .post-avatar {
border-radius: 50px; border-radius: 50px;
@ -129,81 +142,92 @@ h1.content-title a:focus {
/* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */
/* Styling for listing pages. */ /* Styling for listing pages. */
/* ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ */
.list-page {
}
.list-page ul { .list-page ul {
list-style-type: none;
margin: -0.25em; margin: -0.25em;
width: 87.5%;
max-width: 45rem;
} }
.list-page li { .list-page li {
margin: 0; margin: 0;
font-size: 95%; /*font-size: 95%;*/
} }
.list-date { .list-date {
display: inline; display: inline;
font-size: 0.75em; font-size: 0.75em;
color: #9a9a9a;
/* padding-right: 2em; */ /* padding-right: 2em; */
/* margin-right: 2em; */ /* margin-right: 2em; */
} }
/* Table of Contents */ /* Table of Contents */
.toc { .toc summary {
/*float: right;*/ font-size: 1.5rem;
padding: 0 1rem 1rem 1rem; margin-bottom: -1.5rem;
border-left: 1px solid #eee; padding-left: 0;
} }
.toc h1 { .toc {
font-weight: lighter; /*float: right;*/
font-size: 1em; /*padding: 0rem 1rem 1rem 1rem;*/
/*margin-top: 1rem;*/
/*border-left: 1px solid #eee;*/
} }
.toc ul { .toc ul {
list-style: none;
display: block;
/*margin-top: 0.75rem;*/
padding: 0;
width: 87.5%;
} }
.toc li { .toc li {
font-size: 0.9em; line-height: 0.5rem;
margin: 0.3em; margin: 1rem;
}
table {
font-size: 1.4rem;
} }
/* Footer, but with a different name to avoid conflicts with tufte.css */ /* Footer, but with a different name to avoid conflicts with tufte.css */
.fineprint{ footer.page-footer{
padding-top: 1em; padding-top: 1em;
margin-top: 3em; margin-top: 3em;
color: #aaa; color: #aaa;
width: 95%;
max-width: 45rem;
} }
.fineprint p { footer.page-footer p {
font-size: 100%; font-size: 1.2rem;
margin: 0em; margin: 0em;
/* light font looked odd on chrome */ /* light font looked odd on chrome */
/*font-weight: lighter;*/ /*font-weight: lighter;*/
} }
.fineprint a { footer.page-footer a {
color: rgba(65, 70, 75, 1); color: rgba(65, 70, 75, 1);
text-decoration: none; text-decoration: none;
background: transparent; background: transparent;
} }
.fineprint hr { footer.page-footer hr {
text-align: left; text-align: left;
margin-left: 0; margin-left: 0;
width: 55%; width: 100%;
color: #aaa; border-color: rgba(250, 250, 250, 0.25);
background-color: red;
border-color: #fff;
} }
ul.footer-menu { footer.page-footer ul.page-footer-menu {
list-style: none; list-style: none;
display: block; display: block;
/*text-align:center;*/ /*text-align:center;*/
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.footer-menu li {
footer.page-footer ul.page-footer-menu li {
display: inline-block; display: inline-block;
margin-right: 0.5rem; margin-right: 0.5rem;
font-size: 75%; font-size: 55%;
} }
.copyright { .copyright {
@ -222,12 +246,14 @@ details {
} }
details summary { details summary {
font-size: 100%;
font-weight: 300;
vertical-align: top; vertical-align: top;
padding: .3em .5em; padding: .3em .5em;
outline: none; outline: none;
color: rgba(65, 70, 75, 1); /*color: rgba(65, 70, 75, 1);*/
}
details summary.year {
font-size: 1.5rem;
} }
details[open] summary { details[open] summary {
@ -252,7 +278,7 @@ details[open] summary {
font-size: 100%; font-size: 100%;
background: inherit; background: inherit;
border: inherit; border: inherit;
max-width: 38em; max-width: 45rem;
overflow-x: auto; overflow-x: auto;
overflow-y: auto; overflow-y: auto;
} }