mirror of
https://github.com/loikein/hugo-tufte.git
synced 2024-11-14 20:36:58 +01:00
adjust brand styles; adjust homepage structure
This commit is contained in:
loikein
parent
2587e4bb28
commit
d77a621536
7 changed files with 35 additions and 64 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
4
assets/scss/vendor/tufte.scss
vendored
|
|
@ -130,6 +130,10 @@ section {
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
section.page-list .content-title:first-child {
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
|
|
|
|||
|
|
@ -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 →</a></p>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ partial "footer.html" . }}
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue