phil/hugo-tufte
1
0
Fork 0
forked from mirrors/hugo-tufte
Code Pull requests Activity

adjust brand styles; adjust homepage structure

Browse source
This commit is contained in:
loikein 2023-04-17 18:01:23 +01:00
parent 2587e4bb28
commit d77a621536
7 changed files with 35 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/scss/components/header.scss
View file

@ -4,23 +4,15 @@ header.brand {
/* Main brand title */
header.brand h1 {
margin: 0;
margin: 0 0 0.5em 0;
font-weight: 400;
color: rgba(65, 70, 75, 1);
font-size: 3em;
}
header.brand h2 {
margin: 0;
padding-top: 0rem;
/*font-style: normal;*/
/*font-weight: 200;*/
color: rgba(100, 105, 110, 1);
margin: 1rem 0;
}
header.brand hr {
text-align: left;
margin-left: 0;
width: 75%;
border-color: rgba(250, 250, 250, 0.25);
// border-color: rgb(152, 152, 146);
}

14
assets/scss/components/nav.scss
View file

@ -1,13 +1,14 @@
nav.menu {
margin: 1.4rem 0;
}
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: 0.9rem;
font-size: 1.2rem;
width: 87.5%;
}
@ -18,8 +19,6 @@ nav.menu li {
nav.menu li a {
text-decoration: none;
background: transparent;
color: rgba(65, 70, 75, 1);
letter-spacing: 0.05em;
text-transform: uppercase;
}
@ -27,6 +26,5 @@ nav.menu li a {
nav.menu li a:hover,
nav.menu li a:active,
nav.menu li a:focus {
background: inherit;
color: darkgray;
}
// background: inherit;
}

4
assets/scss/vendor/tufte.scss vendored
View file

@ -130,6 +130,10 @@ section {
padding-bottom: 1rem;
}
section.page-list .content-title:first-child {
margin-top: 1.4rem;
}
p,
ol,
ul {

4
exampleSite/content/post/tufte-css.md
View file

@ -56,7 +56,7 @@ Also notice how Tufte CSS includes separate font files for bold (strong) and ita
<span class="sans">If you prefer sans-serifs, use the sans class. It relies on Gill Sans, Tufte’s sans-serif font of choice.</span>
Links in Tufte CSS match the body text in color and do not change on mouseover or when clicked. Here is a [dummy example](https://edwardtufte.github.io/tufte-css/#) that goes nowhere. These links are underlined, since this is the most widely recognized indicator of clickable text. {{< marginnote >}}Blue text, while also a widely recognizable clickable-text indicator, is crass and distracting. Luckily, it is also rendered unnecessary by the use of underlining.{{< /marginnote >}} However, because most browsers’ default underlining does not clear descenders and is so thick and distracting, the underline effect is instead achieved using CSS trickery involving background gradients instead of standard `text-decoration`. Credit goes to Adam Schwartz for that technique.
Links in Tufte CSS match the body text in color and do not change on mouseover or when clicked. Here is a [dummy example](#) that goes nowhere. These links are underlined, since this is the most widely recognized indicator of clickable text. {{< marginnote ind="⊕" >}}Blue text, while also a widely recognizable clickable-text indicator, is crass and distracting. Luckily, it is also rendered unnecessary by the use of underlining.{{< /marginnote >}} However, because most browsers’ default underlining does not clear descenders and is so thick and distracting, the underline effect is instead achieved using CSS trickery involving background gradients instead of standard `text-decoration`. Credit goes to Adam Schwartz for that technique.
As always, these design choices are merely one approach that Tufte CSS provides by default. Other approaches can also be made to work. The goal is to make sentences readable without interference from links, as well as to make links immediately identifiable even by casual web users.
@ -190,7 +190,7 @@ Extended code examples should live in a `code` element within a `pre` element. T
## ImageQuilts
Tufte CSS provides support for Edward Tufte and Adam Schwartz’s [ImageQuilts](http://imagequilts.com/).{{< marginnote >}}This is not supported as of 2023-04-17.{{< /marginnote >}} See the [ET forum announcement thread](http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003wk) for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other `figure`.
Tufte CSS provides support for Edward Tufte and Adam Schwartz’s [ImageQuilts](http://imagequilts.com/).{{< marginnote ind="⊕" >}}This is not supported as of 2023-04-17.{{< /marginnote >}} See the [ET forum announcement thread](http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003wk) for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other `figure`.
This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width figure to accomodate its girth:

23
layouts/_default/home.html
View file

@ -1,23 +0,0 @@
<!-- +++
layout: "baseof"
+++ -->
{{ define "main" }}
<div id="layout" class="pure-g">
<article class="pure-u-1">
{{ partial "brand.html" . }}
{{ range first 5 .Site.Pages }}
{{ partial "content.header.html" . }}
<p>{{ .Summary }}</p>
{{ if .Truncated }}
<p><a href="{{ .RelPermalink }}">Read On &rarr;</a></p>
{{ end }}
{{ end }}
{{ partial "footer.html" . }}
</article>
</div>
{{ end }}

36
layouts/index.html
View file

@ -1,26 +1,26 @@
{{ define "main" }}
<div id="layout" class="pure-g">
<article class="pure-u-1">
<article id="main">
{{ partial "brand.html" . }}
{{ with .Content }}
<section>
{{ . }}
</section>
<section>
{{ . }}
</section>
{{ end }}
{{ range where .Site.RegularPages "Type" "posts" }}
<h2 class="content-title">
{{ if .IsNode }}
<a href="{{ .Permalink }}">{{ .Title}}</a>
{{ else }}
<a href="{{ .RelPermalink }}">{{ .Title }}{{ if .Draft }} :: Draft {{end}}</a>
<section class="page-list">
{{ range .Site.RegularPages }}
{{/* range where .Site.RegularPages "Type" "posts" */}}
{{ if ne .Draft true}}
<h2 class="content-title">
{{ if .IsNode }}
<a href="{{ .Permalink }}">{{ .Title}}</a>
{{ else }}
<a href="{{ .RelPermalink }}">{{ .Title }}{{ if .Draft }} :: Draft {{end}}</a>
{{ end }}
</h1>
<p>{{ truncate 140 .Summary }}</p>
{{ end }}
</h1>
<p>{{ truncate 140 .Summary }}</p>
{{ end }}
{{ end }}
</section>
{{ partial "footer.html" . }}
</article>
</div>
{{ end }}

4
layouts/partials/brand.html
View file

@ -1,6 +1,6 @@
<header class="brand">
<a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title}}</h1></a>
<h2>{{ .Site.Params.subtitle }}</h2>
<h1>{{ .Site.Title}}</h1>
<h2 class="subtitle">{{ .Site.Params.subtitle }}</h2>
{{ partial "nav.html" . }}
<hr />
</header>