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 /static | |
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
Diffstat (limited to 'static')
-rw-r--r-- | static/css/story.css | 22 | ||||
-rw-r--r-- | static/css/story.less | 23 |
2 files changed, 32 insertions, 13 deletions
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); + } } } |