diff options
| author | Baron Schwartz <xaprb@users.noreply.github.com> | 2018-09-23 04:01:17 +0300 |
|---|---|---|
| committer | Baron Schwartz <xaprb@users.noreply.github.com> | 2018-09-23 04:01:17 +0300 |
| commit | e9f82572953a58deb7904a76a3f3d22a5c700b39 (patch) | |
| tree | a506fbc07461d353c090907369b7eb7750cb6f5a | |
| parent | 495d9063c158b0cc94d07405fbaa37ec8ce52f74 (diff) | |
Add 'depth' to the content area/article:
- Add -feature-depth CSS class
- Update images.md to document this
- Add page-kind-X CSS class to <body>
- Fix some <article> class inconsistencies
- Remove article header drop-shadows in print mode
| -rw-r--r-- | exampleSite/content/images.md | 11 | ||||
| -rw-r--r-- | exampleSite/content/search.md | 1 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | layouts/_default/single.html | 2 | ||||
| -rw-r--r-- | layouts/talks/single.html | 2 | ||||
| -rw-r--r-- | static/css/story.css | 22 | ||||
| -rw-r--r-- | static/css/story.less | 23 |
7 files changed, 47 insertions, 16 deletions
diff --git a/exampleSite/content/images.md b/exampleSite/content/images.md index e536e2b..8812d96 100644 --- a/exampleSite/content/images.md +++ b/exampleSite/content/images.md @@ -8,6 +8,7 @@ classes: - feature-figcaption-hidden - feature-3dbook-covers - feature-tablecaption +- feature-depth categories: - Demo --- @@ -101,4 +102,14 @@ and preview images: To illustrate this feature, the [search page](/search) has this feature set, so it has a plain, bannerless layout. +### Adding Depth To Headers + +Articles (but not list pages) can be given a bit of extra depth with the +`feature-depth` class, which is negatable with `feature-nodepth`. This article +is an example: notice how the content is shifted up slightly to overlap the +header image a bit, with rounded corners and a shadow around it. + +The `feature-depth` class can be set globally in your `config.yaml` or similar, +and overridden as you wish on individual pages. + Read next: [Story's built-in search features](/search-page/). diff --git a/exampleSite/content/search.md b/exampleSite/content/search.md index 94b84fa..d4eaf2c 100644 --- a/exampleSite/content/search.md +++ b/exampleSite/content/search.md @@ -6,4 +6,5 @@ skip: true classes: - feature-nosubtitle - feature-nohdr +- feature-depth --- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index f6a188e..0c0d311 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -47,7 +47,7 @@ <script src="{{ "js/story.js" | absURL }}"></script> </head> - <body class="ma0 bg-white {{ with .Section }}section-{{ . }}{{ end }} page-kind-{{ .Kind }} {{ with .Site.Params.classes }}{{ range . }} {{ . }}{{ end }}{{ end }}{{ with .Params.classes }}{{ range . }} {{ . }}{{ end }}{{ end }}"> + <body class="ma0 bg-white {{ with .Section }}section-{{ . }}{{ end }} page-kind-{{ .Kind }} is-page-{{ .IsPage }} {{ with .Site.Params.classes }}{{ range . }} {{ . }}{{ end }}{{ end }}{{ with .Params.classes }}{{ range . }} {{ . }}{{ end }}{{ end }}"> {{ block "header" . }} <!-- You can set the title and header image in the "title/image" parameters of diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 10bccfc..ae4baae 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,7 +1,7 @@ {{ define "title" }}{{ cond (eq .Site.Params.titlecase true) (.Title | title | markdownify) (.Title | markdownify) }}{{ end }} {{ define "main" }} -<article class="center ph3 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide"> +<article class="center bg-white br-3 pv1 ph4 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide"> {{ .Content }} </article> {{ end }} diff --git a/layouts/talks/single.html b/layouts/talks/single.html index 5741a20..39f94b9 100644 --- a/layouts/talks/single.html +++ b/layouts/talks/single.html @@ -1,6 +1,6 @@ {{ define "title" }}{{ cond (eq .Site.Params.titlecase true) (.Title | title | markdownify) (.Title | markdownify) }} • {{ .Params.event }}{{ end }} {{ define "main" }} -<article class="center ph3 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide"> +<article class="center bg-white br-3 pv1 ph4 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide"> {{ .Content }} <p><a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ .Params.slides | absURL }}">Slides</a> {{ with .Params.video }} diff --git a/static/css/story.css b/static/css/story.css index a59fb3e..f56fe9d 100644 --- a/static/css/story.css +++ b/static/css/story.css @@ -5,18 +5,26 @@ h4, .sans-serif { font-family: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } -article { +body article { font-family: 'Spectral', Georgia, Times, serif; } -@media only screen and (max-width: 500px) { - article p, - article li { +@media only screen and (max-width: 30em) { + body article p, + body article li { font-family: 'Quattrocento Sans', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } } -header h1, -header h2 { - text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3); +@media only screen and (min-width: 50em) { + body.is-page-true.feature-depth:not(.feature-nodepth):not(.feature-nohdr) article { + margin-top: -2em; + box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0.5em 0.125em; + } +} +@media screen only { + header h1, + header h2 { + text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3); + } } blockquote { margin: 0; diff --git a/static/css/story.less b/static/css/story.less index f09116b..1336d9a 100644 --- a/static/css/story.less +++ b/static/css/story.less @@ -10,18 +10,29 @@ h1, h2, h3, h4, .sans-serif { font-family: @font-sans; } -article { - font-family: @font-serif; - @media only screen and (max-width: 500px) { - p, li { - font-family: @font-sans; + +body { + article { + font-family: @font-serif; + @media only screen and (max-width: 30em) { + p, li { + font-family: @font-sans; + } + } + } + @media only screen and (min-width: 50em) { + &.is-page-true.feature-depth:not(.feature-nodepth):not(.feature-nohdr) article { + margin-top: -2em; + box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0.5em 0.125em; } } } header { h1, h2 { - text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3); + @media screen only { + text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3); + } } } |