adjust brand styles; adjust homepage structure

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

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);
}

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;
}

View file

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

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, Tuftes 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 Schwartzs [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 Schwartzs [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:

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 }}

View file

@ -1,14 +1,15 @@
{{ define "main" }}
<div id="layout" class="pure-g">
<article class="pure-u-1">
<article id="main">
{{ partial "brand.html" . }}
{{ with .Content }}
<section>
{{ . }}
</section>
{{ end }}
{{ range where .Site.RegularPages "Type" "posts" }}
<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>
@ -16,11 +17,10 @@
<a href="{{ .RelPermalink }}">{{ .Title }}{{ if .Draft }} :: Draft {{end}}</a>
{{ end }}
</h1>
<p>{{ truncate 140 .Summary }}</p>
{{ end }}
{{ end }}
</section>
{{ partial "footer.html" . }}
</article>
</div>
{{ end }}

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>