diff options
author | tdro <tdro@noreply.example.com> | 2022-08-28 01:57:41 -0400 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2022-08-28 01:57:41 -0400 |
commit | 389b5e2f02dfcb1e27f3834ede4bcdccf3517d06 (patch) | |
tree | 1cf7b16e5fd0ef484bb4d4e3da7250b0a510b24c /assets | |
parent | e37d3d3649c4931e552af3999f30dd67a901b2dc (diff) | |
download | canory-389b5e2f02dfcb1e27f3834ede4bcdccf3517d06.tar.gz canory-389b5e2f02dfcb1e27f3834ede4bcdccf3517d06.tar.bz2 canory-389b5e2f02dfcb1e27f3834ede4bcdccf3517d06.zip |
assets/css/default: Style author descriptions
Rearrange the cascade.
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/default.css | 344 |
1 files changed, 183 insertions, 161 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 19aa09e..b9d59c8 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -160,6 +160,148 @@ skip-link a:focus { border-radius: 0.5rem; } +/* ----- Typography ----- */ + +h1, +h2, +h3 { + font-size: 100%; + margin: 0; +} + +p, +ul, +dd, +ol, +figure, +blockquote { + margin: 0; +} + +p:not(:last-child), +ol:not(:last-child), +ul:not(:last-child), +dl:not(:last-child), +table:not(:last-child), +figure:not(:last-child), +code-block:not(:last-child), +blockquote:not(:last-child) { + margin-bottom: 0.75rem; +} + +dl { + margin: 0 0 0 1rem; +} + +dt { + font-weight: 700; +} + +dt:not(:first-child) { + margin-top: 0.5rem; +} + +footer, +figcaption { + color: #444; + color: var(--fade); + font-size: 85%; + margin: 0.5rem 0; + text-align: center; +} + +sup { + vertical-align: super; + font-size: 85%; +} + +sub { + vertical-align: sub; + font-size: 85%; +} + +s, +del, +mark, +ins { + padding: 0 0.15rem; + line-height: 1.5; + border-radius: 0.5rem; +} + +mark { + background-color: #ffe699; + background-color: var(--warning-background); + color: #332600; + color: var(--warning); +} + +ins { + background-color: #d5f3c4; + background-color: var(--success-background); + color: #1d3c0c; + color: var(--success); + text-decoration: none; +} + +del { + background-color: #fcd2cf; + background-color: var(--danger-background); + color: #8f0000; + color: var(--danger); +} + +s { + text-decoration: none; + background-color: #333; + background-color: var(--spoiler); + color: transparent; +} + +input[type="checkbox"]:checked ~ s { + background-color: inherit; + color: inherit; +} + +blockquote { + padding-left: 2rem; +} + +blockquote p { + font-size: 125%; +} + +blockquote p span { + display: block; + text-align: right; + font-style: normal; + font-size: 80%; + margin-top: 0.75rem; +} + +video { + border-radius: 0.5rem; +} + +video:hover { + box-shadow: 0 0 14px #999; + box-shadow: 0 0 14px var(--shadow); +} + +kbd { + background-color: #eee; + border-radius: 0.25rem; + border: 1px solid #b4b4b4; + box-shadow: 0 1px 1px #737373, 0 2px 0 0 #f2f2f2 inset; + color: #333; + display: inline-block; + font-size: 0.85em; + font-weight: 700; + line-height: 1; + padding: 2px 4px; + white-space: nowrap; +} + /* ----- Elements ----- */ html { @@ -714,14 +856,30 @@ micro-author micro-summary { micro-author micro-thumbnail { flex: none; + margin-right: 0.5rem; } micro-author micro-header { - line-height: 1; - margin: 0 1.25rem 0 0.5rem; flex: 1; - height: 3rem; - padding: 0 0.5rem; + min-width: 3rem; + margin-right: 0.75rem; +} + +micro-author micro-header h2, +micro-author micro-header h3 { + line-height: 1.25rem; + height: 1.25rem; +} + +micro-author micro-summary p:not(:last-child) { + flex: 4; + margin: 0 0.75rem 0 0; + color: #555; + color: var(--fade); +} + +author-list p { + display: none; } micro-thumbnail a { @@ -941,16 +1099,10 @@ micro-header-description { flex: 6; } -micro-header h2 { - margin-bottom: 0.25rem; - font-size: 700; -} - micro-header h3 { font-weight: 400; color: #444; color: var(--fade); - margin: 0; } micro-header footer, @@ -1102,7 +1254,8 @@ column-middle nav section small { margin: 0; } -micro-author micro-header, +micro-author micro-header h2, +micro-author micro-header h3, column-middle nav section h2, column-middle nav section small { white-space: nowrap; @@ -1545,6 +1698,7 @@ context-profile aside p { context-profile div { display: flex; align-items: center; + margin-bottom: 0.5rem; } context-profile aside:nth-child(2) { @@ -1588,147 +1742,6 @@ twitter-tweet iframe { border: none; } -/* ----- Typography ----- */ - -h1, -h2, -h3 { - font-size: 100%; - margin: 0; -} - -p, -ul, -dd, -ol, -figure, -blockquote { - margin: 0; -} - -p:not(:last-child), -ol:not(:last-child), -ul:not(:last-child), -dl:not(:last-child), -table:not(:last-child), -figure:not(:last-child), -code-block:not(:last-child), -blockquote:not(:last-child) { - margin-bottom: 0.75rem; -} - -dl { - margin: 0 0 0 1rem; -} - -dt { - font-weight: 700; -} - -dt:not(:first-child) { - margin-top: 0.5rem; -} - -footer, -figcaption { - color: #444; - color: var(--fade); - font-size: 85%; - margin: 0.5rem 0; - text-align: center; -} - -sup { - vertical-align: super; - font-size: 85%; -} - -sub { - vertical-align: sub; - font-size: 85%; -} - -s, -del, -mark, -ins { - padding: 0 0.15rem; - line-height: 1.5; -} - -mark { - background-color: #ffe699; - background-color: var(--warning-background); - color: #332600; - color: var(--warning); -} - -ins { - background-color: #d5f3c4; - background-color: var(--success-background); - color: #1d3c0c; - color: var(--success); - text-decoration: none; -} - -del { - background-color: #fcd2cf; - background-color: var(--danger-background); - color: #8f0000; - color: var(--danger); -} - -s { - text-decoration: none; - background-color: #333; - background-color: var(--spoiler); - color: transparent; -} - -input[type="checkbox"]:checked ~ s { - background-color: inherit; - color: inherit; -} - -blockquote { - padding-left: 2rem; -} - -blockquote p { - font-size: 125%; -} - -blockquote p span { - display: block; - text-align: right; - font-style: normal; - font-size: 80%; - margin-top: 0.75rem; -} - -video { - border-radius: 0.5rem; -} - -video:hover { - box-shadow: 0 0 14px #999; - box-shadow: 0 0 14px var(--shadow); -} - -kbd { - background-color: #eee; - border-radius: 0.25rem; - border: 1px solid #b4b4b4; - box-shadow: 0 1px 1px #737373, 0 2px 0 0 #f2f2f2 inset; - color: #333; - display: inline-block; - font-size: 0.85em; - font-weight: 700; - line-height: 1; - padding: 2px 4px; - white-space: nowrap; -} - /* ----- Attributes ----- */ [tabindex="-1"]:focus { @@ -1813,18 +1826,31 @@ kbd { column-right { display: none; } + column-middle { + display: block; + max-width: 100%; + } + column-middle nav { + position: fixed; + } + micro-card { + max-width: 600px; + margin: 0 auto; + } micro-metadata { line-height: inherit; } micro-header section { display: block; } - column-middle { - display: block; - max-width: 100%; + micro-author micro-summary { + flex-direction: column; } - column-middle nav { - position: fixed; + micro-author micro-summary micro-header, + micro-author micro-summary micro-thumbnail, + micro-author micro-summary p:not(:last-child) { + flex: auto; + margin: 0 0 0.75rem 0; } navigation-separator hr[hidden] { border-color: transparent; @@ -1834,10 +1860,6 @@ kbd { padding-top: 4rem; border: none; } - micro-card { - max-width: 600px; - margin: 0 auto; - } html { margin: 0; } |