From d77a62153674bcca10c19dee18b41a700a4f6fc4 Mon Sep 17 00:00:00 2001 From: loikein Date: Mon, 17 Apr 2023 18:01:23 +0100 Subject: [PATCH] adjust brand styles; adjust homepage structure --- assets/scss/components/header.scss | 14 +++-------- assets/scss/components/nav.scss | 14 +++++------ assets/scss/vendor/tufte.scss | 4 +++ exampleSite/content/post/tufte-css.md | 4 +-- layouts/_default/home.html | 23 ----------------- layouts/index.html | 36 +++++++++++++-------------- layouts/partials/brand.html | 4 +-- 7 files changed, 35 insertions(+), 64 deletions(-) delete mode 100644 layouts/_default/home.html diff --git a/assets/scss/components/header.scss b/assets/scss/components/header.scss index 137b9be..8a4c555 100644 --- a/assets/scss/components/header.scss +++ b/assets/scss/components/header.scss @@ -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); } diff --git a/assets/scss/components/nav.scss b/assets/scss/components/nav.scss index 558082c..60c3644 100644 --- a/assets/scss/components/nav.scss +++ b/assets/scss/components/nav.scss @@ -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; -} \ No newline at end of file + // background: inherit; +} diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss index a44c820..45c9a43 100644 --- a/assets/scss/vendor/tufte.scss +++ b/assets/scss/vendor/tufte.scss @@ -130,6 +130,10 @@ section { padding-bottom: 1rem; } +section.page-list .content-title:first-child { + margin-top: 1.4rem; +} + p, ol, ul { diff --git a/exampleSite/content/post/tufte-css.md b/exampleSite/content/post/tufte-css.md index 7af977b..5b7334f 100644 --- a/exampleSite/content/post/tufte-css.md +++ b/exampleSite/content/post/tufte-css.md @@ -56,7 +56,7 @@ Also notice how Tufte CSS includes separate font files for bold (strong) and ita If you prefer sans-serifs, use the sans class. It relies on Gill Sans, Tufte’s sans-serif font of choice. -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: diff --git a/layouts/_default/home.html b/layouts/_default/home.html deleted file mode 100644 index a52757e..0000000 --- a/layouts/_default/home.html +++ /dev/null @@ -1,23 +0,0 @@ - - -{{ define "main" }} - - - -
-
- {{ partial "brand.html" . }} - {{ range first 5 .Site.Pages }} - {{ partial "content.header.html" . }} -

{{ .Summary }}

- {{ if .Truncated }} -

Read On →

- {{ end }} - {{ end }} - {{ partial "footer.html" . }} -
-
- -{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 2de960a..6d56339 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,26 +1,26 @@ {{ define "main" }} -
-
+
{{ partial "brand.html" . }} {{ with .Content }} -
- {{ . }} -
+
+ {{ . }} +
{{ end }} - {{ range where .Site.RegularPages "Type" "posts" }} - -

- {{ if .IsNode }} - {{ .Title}} - {{ else }} - {{ .Title }}{{ if .Draft }} :: Draft {{end}} +
+ {{ range .Site.RegularPages }} + {{/* range where .Site.RegularPages "Type" "posts" */}} + {{ if ne .Draft true}} +

+ {{ if .IsNode }} + {{ .Title}} + {{ else }} + {{ .Title }}{{ if .Draft }} :: Draft {{end}} + {{ end }} +

+

{{ truncate 140 .Summary }}

{{ end }} -

- -

{{ truncate 140 .Summary }}

- - {{ end }} + {{ end }} + {{ partial "footer.html" . }}
-
{{ end }} diff --git a/layouts/partials/brand.html b/layouts/partials/brand.html index b112633..dfe0c7a 100644 --- a/layouts/partials/brand.html +++ b/layouts/partials/brand.html @@ -1,6 +1,6 @@
-

{{ .Site.Title}}

 -

{{ .Site.Params.subtitle }}

+

{{ .Site.Title}}

+

{{ .Site.Params.subtitle }}

{{ partial "nav.html" . }}