aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
authortdro <tdro@noreply.example.com>2022-08-28 01:57:41 -0400
committertdro <tdro@noreply.example.com>2022-08-28 01:57:41 -0400
commit389b5e2f02dfcb1e27f3834ede4bcdccf3517d06 (patch)
tree1cf7b16e5fd0ef484bb4d4e3da7250b0a510b24c /assets
parente37d3d3649c4931e552af3999f30dd67a901b2dc (diff)
downloadcanory-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.css344
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;
}