diff --git a/src/common/styles/common.css b/src/common/styles/common.css index aa3571a3d..baf68c033 100644 --- a/src/common/styles/common.css +++ b/src/common/styles/common.css @@ -3,14 +3,14 @@ @import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; /* Custom Selectors */ -@custom-selector :--CiteGroup [itemtype='https://stencila.github.io/schema/CiteGroup']; -@custom-selector :--Cite [itemtype='https://stencila.github.io/schema/Cite']; +@custom-selector :--CiteGroup [itemtype='https://schema.stenci.la/CiteGroup']; +@custom-selector :--Cite [itemtype='https://schema.stenci.la/Cite']; @custom-selector :--CreativeWork [itemtype='https://schema.org/CreativeWork']; @custom-selector :--title [itemprop='title']; @custom-selector :--authors [itemprop='authors']; @custom-selector :--Person [itemtype='https://schema.org/Person']; @custom-selector :--references [itemprop='references']; -@custom-selector :--PublicationIssue [itemtype='https://stencila.github.io/schema/PublicationIssue']; +@custom-selector :--PublicationIssue [itemtype='https://schema.stenci.la/PublicationIssue']; @custom-selector :--datePublished [itemprop='datePublished']; @custom-selector :--issueNumber [itemprop='issueNumber']; @custom-selector :--pagination [itemprop='pagination']; @@ -19,7 +19,6 @@ @custom-selector :--authorDetails [itemprop='authorDetails']; /* Citation Styles */ -@custom-selector :--citation-style-eLife [data-citation-style='eLife']; @custom-selector :--citation-style-MLA [data-citation-style='MLA']; @custom-selector :--citation-style-APA [data-citation-style='APA']; @@ -130,6 +129,13 @@ html { } :--PublicationIssue { + :--title { + &::after { + content: ' '; + white-space: pre; + } + } + + :--datePublished { display: none; } diff --git a/src/themes/eLife/styles.css b/src/themes/eLife/styles.css index 374e6d4f9..f02a6dc87 100644 --- a/src/themes/eLife/styles.css +++ b/src/themes/eLife/styles.css @@ -4,14 +4,14 @@ @import '../../common/fonts/notoSans/notoSans.css'; /* Custom Selectors */ -@custom-selector :--CiteGroup [itemtype='https://stencila.github.io/schema/CiteGroup']; -@custom-selector :--Cite [itemtype='https://stencila.github.io/schema/Cite']; +@custom-selector :--CiteGroup [itemtype='https://schema.stenci.la/CiteGroup']; +@custom-selector :--Cite [itemtype='https://schema.stenci.la/Cite']; @custom-selector :--CreativeWork [itemtype='https://schema.org/CreativeWork']; @custom-selector :--title [itemprop='title']; @custom-selector :--authors [itemprop='authors']; @custom-selector :--Person [itemtype='https://schema.org/Person']; @custom-selector :--references [itemprop='references']; -@custom-selector :--PublicationIssue [itemtype='https://stencila.github.io/schema/PublicationIssue']; +@custom-selector :--PublicationIssue [itemtype='https://schema.stenci.la/PublicationIssue']; @custom-selector :--datePublished [itemprop='datePublished']; @custom-selector :--issueNumber [itemprop='issueNumber']; @custom-selector :--pagination [itemprop='pagination']; @@ -19,11 +19,6 @@ @custom-selector :--abstracts [itemprop='abstracts']; @custom-selector :--authorDetails [itemprop='authorDetails']; -/* Citation Styles */ -@custom-selector :--citation-style-eLife [data-citation-style='eLife']; -@custom-selector :--citation-style-MLA [data-citation-style='MLA']; -@custom-selector :--citation-style-APA [data-citation-style='APA']; - :root { --max-width: 650px; --max-width-media: 980px; diff --git a/src/themes/nature/styles.css b/src/themes/nature/styles.css index c763ad983..2635aaa2d 100644 --- a/src/themes/nature/styles.css +++ b/src/themes/nature/styles.css @@ -4,14 +4,14 @@ @import '../../common/fonts/sourceSansPro/sourceSansPro.css'; /* Custom Selectors */ -@custom-selector :--CiteGroup [itemtype='https://stencila.github.io/schema/CiteGroup']; -@custom-selector :--Cite [itemtype='https://stencila.github.io/schema/Cite']; +@custom-selector :--CiteGroup [itemtype='https://schema.stenci.la/CiteGroup']; +@custom-selector :--Cite [itemtype='https://schema.stenci.la/Cite']; @custom-selector :--CreativeWork [itemtype='https://schema.org/CreativeWork']; @custom-selector :--title [itemprop='title']; @custom-selector :--authors [itemprop='authors']; @custom-selector :--Person [itemtype='https://schema.org/Person']; @custom-selector :--references [itemprop='references']; -@custom-selector :--PublicationIssue [itemtype='https://stencila.github.io/schema/PublicationIssue']; +@custom-selector :--PublicationIssue [itemtype='https://schema.stenci.la/PublicationIssue']; @custom-selector :--datePublished [itemprop='datePublished']; @custom-selector :--issueNumber [itemprop='issueNumber']; @custom-selector :--pagination [itemprop='pagination']; @@ -19,11 +19,6 @@ @custom-selector :--abstracts [itemprop='abstracts']; @custom-selector :--authorDetails [itemprop='authorDetails']; -/* Citation Styles */ -@custom-selector :--citation-style-eLife [data-citation-style='eLife']; -@custom-selector :--citation-style-MLA [data-citation-style='MLA']; -@custom-selector :--citation-style-APA [data-citation-style='APA']; - :root { --max-width: 680px; --max-width-media: 980px; diff --git a/src/themes/plos/styles.css b/src/themes/plos/styles.css index 7ac457c8a..9e2733bbd 100644 --- a/src/themes/plos/styles.css +++ b/src/themes/plos/styles.css @@ -1,32 +1,22 @@ @import '../../common/styles/common.css'; @import 'prismjs/themes/prism.css'; - -/* Fonts */ @import '../../common/fonts/openSans/openSans.css'; -/* Custom Selectors and Variables */ -@custom-selector :--CiteGroup [itemtype='https://stencila.github.io/schema/CiteGroup']; -@custom-selector :--Cite [itemtype='https://stencila.github.io/schema/Cite']; +/* Custom Selectors */ +@custom-selector :--CiteGroup [itemtype='https://schema.stenci.la/CiteGroup']; +@custom-selector :--Cite [itemtype='https://schema.stenci.la/Cite']; @custom-selector :--CreativeWork [itemtype='https://schema.org/CreativeWork']; @custom-selector :--title [itemprop='title']; @custom-selector :--authors [itemprop='authors']; -@custom-selector :--author [itemprop='author']; @custom-selector :--Person [itemtype='https://schema.org/Person']; -@custom-selector :--givenName [itemprop='givenName']; -@custom-selector :--familyName [itemprop='familyName']; @custom-selector :--references [itemprop='references']; -@custom-selector :--citation [itemprop='citation']; -@custom-selector :--PublicationIssue [itemtype='https://stencila.github.io/schema/PublicationIssue']; +@custom-selector :--PublicationIssue [itemtype='https://schema.stenci.la/PublicationIssue']; @custom-selector :--datePublished [itemprop='datePublished']; @custom-selector :--issueNumber [itemprop='issueNumber']; @custom-selector :--pagination [itemprop='pagination']; @custom-selector :--url [itemprop='url']; @custom-selector :--abstracts [itemprop='abstracts']; - -/* Citation Styles */ -@custom-selector :--citation-style-eLife [data-citation-style='eLife']; -@custom-selector :--citation-style-MLA [data-citation-style='MLA']; -@custom-selector :--citation-style-APA [data-citation-style='APA']; +@custom-selector :--authorDetails [itemprop='authorDetails']; :root { --max-width: 650px; @@ -39,24 +29,9 @@ --text-color: #202020; --link-color: #16a127; --hover-color: #202020; - --bg-color: #fff; --border-color: #e0e0e0; --figure-bg-color: #efefef; -} - -/* Stencila Components */ -stencila-thing { - max-width: var(--max-width); - margin: 0 auto; - overflow-x: auto; - background-color: var(--figure-bg-color); - font-size: var(--body-font-size); -} - -[itemprop='citation'] { - [itemprop='author'] { - display: list-item; - } + --bg-color: #fff; } html, @@ -104,7 +79,6 @@ article > pre[class*='language-'] { margin-right: auto; } -/* Heading, Paragraph Styles */ h1, h2, h3, @@ -114,17 +88,21 @@ h6 { line-height: 1.125rem; font-weight: var(--body-font-weight); font-family: var(--body-font); - margin-top: 2rem; - margin-bottom: 1.125rem; + margin: 2rem auto 1.125rem; } -h1, -h2 { +h1 { + font-size: 1.25rem; + line-height: 1.24138; + margin-bottom: 1.5rem; padding-top: 3rem; } -h1 { - font-size: 1.25rem; +article > h1[role='title'] { + font-family: var(--secondary-font); + font-weight: var(--secondary-font-weight); + font-size: 1.625rem; + line-height: 27px; } h2, @@ -137,17 +115,44 @@ h6 { h2, h3 { - font-weight: 600; + font-weight: var(--secondary-font-weight); } -article > h1:first-of-type { - font-family: var(--secondary-font); - font-weight: var(--secondary-font-weight); - font-size: 1.625rem; - line-height: 27px; +h2 { + line-height: 1.15385; + padding: 1.3125rem 0; +} + +h3 { + line-height: 1.09091; + padding: 0.75rem 0; +} + +h6, +small, +.text_small { + font-size: 0.8125rem; + line-height: 1.84615; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: 0; + } } p { + margin: 0 auto 1.25rem; font-size: var(--body-font-size); line-height: 1.125rem; @@ -165,7 +170,6 @@ p { } } -/* Link Styles */ a:link, a:visited { color: var(--link-color); @@ -175,9 +179,15 @@ a:hover { color: var(--hover-color); } -/* List Styles */ ol, ul { + padding: 0; + + & ul, + & ol { + padding-left: 1rem; + } + & + h3, & + h4, & + h5, @@ -192,16 +202,20 @@ li { } } -/* Figure Styles */ figure { font-family: var(--body-font); margin: 1.25rem auto; overflow: auto; background-color: var(--figure-bg-color); + > figure { + margin: 0 auto; + } + img { display: block; - max-width: 20rem; + /* max-width: 20rem; */ + max-width: 100%; height: auto; padding: 1.125rem; } @@ -218,92 +232,17 @@ figcaption { h4, h5, h6 { - font-weight: 600; - } - - p { - margin-bottom: 0; + font-weight: var(--secondary-font-weight); + line-height: 1.84615; } - & *:last-child { + *:last-child { margin-bottom: 0; } - & *:first-child { + *:first-child { margin-top: 0; } - - & h1, - & h2, - & h3, - & h4, - & h5, - & h6 { - margin-top: 0; - margin-bottom: 0; - line-height: 1.84615; - } -} - -p { - margin: 0 auto 1.25rem; -} - -h1, -h2, -h3, -h4, -h5 { - margin: 2.75rem auto 1rem; - line-height: 1.25; -} - -h1 { - line-height: 1.24138; - margin-bottom: 1.5rem; -} - -h2 { - line-height: 1.15385; - padding: 1.3125rem 0; -} - -h3 { - line-height: 1.09091; - padding: 0.75rem 0; -} - -h6, -small, -.text_small { - font-size: 0.8125rem; - line-height: 1.84615; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: 0; - } -} - -ul, -ol { - padding: 0; - - & ul, - & ol { - padding-left: 1rem; - } } table { @@ -311,38 +250,28 @@ table { font-size: 80%; overflow-x: auto; margin-bottom: 1.5rem; - - /* Make first table row a heading - if there isn't a thead */ - tbody:first-child { - tr:first-child { - font-weight: bold; - font-size: 0.8125rem; - line-height: 1.38462; - vertical-align: top; - background-color: #f7f7f7; - } - } } -th, -td { - vertical-align: top; - border: 1px solid var(--border-color); - padding: 0.375rem; -} - -thead { +thead, +tbody:first-child tr:first-child { font-weight: bold; font-size: 0.8125rem; line-height: 1.38462; vertical-align: top; } -th { +th, +tbody:first-child tr:first-child { background-color: #f7f7f7; } +th, +td { + vertical-align: top; + border: 1px solid var(--border-color); + padding: 0.375rem; +} + blockquote { font-style: italic; margin-bottom: 1.5rem; @@ -362,217 +291,122 @@ blockquote { } } +/* Microdata-based Styles */ :--references { + /* PLoS Citation Styles */ list-style: none; - counter-reset: cite-counter; + counter-reset: reference-counter; padding: 0; - margin: 0 0 0 1em; font-family: var(--heading-font); > li { - counter-increment: cite-counter; - font-size: 0.875rem; position: relative; + counter-increment: reference-counter; + line-height: 1.71429; margin-bottom: 0.75rem; padding-left: 3rem; &::before { - content: counter(cite-counter) '. '; + content: counter(reference-counter) '.'; display: inline-block; + font-weight: var(--secondary-font-weight); text-align: right; - font-weight: 600; position: absolute; margin: 0 -2rem; - width: 24px; - } - } - - ol, - ul { - padding-left: 0; - list-style: none; - } - - :--citation { - display: flex; - flex-flow: wrap; - - :--author { - order: 1; - } - - :--title { - order: 2; - - &:after { - content: '. '; - white-space: pre; - } - } - - :--datePublished { - order: 3; + width: 22px; } } :--CreativeWork > :--title { - display: inline-block; - font-size: 1rem; - line-height: 1.5; - font-weight: 600; - border-bottom: none; + &:first-of-type { + display: none; + } } - /* eLife theme specific styles for citation titles */ - :--citation-style-MLA, - :--citation-style-APA { - :--CreativeWork > :--title { - display: inline; - font-size: 0.875rem; - line-height: 1.71429; - font-weight: normal; - border-bottom: 1px dotted var(--text-color); - } + :--authors + :--datePublished { + display: none; } - :--authors { + :--datePublished + :--title { display: inline; - :--Person { - display: inline; - - a { - border-bottom: none; - } - - &::after { - content: ', '; - } - - &:last-child::after { - content: normal; - } + &::after { + content: '. '; + white-space: pre; } } - :--author { - :--familyName { + :--PublicationIssue { + :--title { &::after { - content: ' '; + content: '. '; white-space: pre; } } - :--givenName::after { - content: ', '; - white-space: pre; - } - - &:nth-last-of-type(3) :--givenName::after { - content: '. '; - white-space: pre; - } - } - - :--PublicationIssue, - :--abstracts { - font-family: var(--body-font); - } - - :--pagination { - &::before { - content: ':'; - } - } - - :--url { - font-size: 0.6875rem; - line-height: 2.18182; - border-bottom: none; - } - :--abstracts { - li { - display: inline; - - a { - border-bottom: none; - } - - &::after { - content: ' | '; + :--title + :--datePublished { + &:not(:last-child)::after { + content: ';'; + white-space: pre; } &:last-child::after { - content: normal; + content: '.'; + white-space: pre; } } } - :--citation-style-MLA { - :--CreativeWork > :--title { - &::before { - content: '"'; - } - + :--abstracts { + li { &::after { - content: '."'; - } - } - - :--PublicationIssue { - display: inline; - - :--pagination { - &::before { - content: ': '; - } + content: ' • '; + white-space: pre; } } } - :--citation-style-APA { - :--CreativeWork > :--title { - &::after { - content: '.'; - } - } + :--authors { + :--Person { + [itemprop='familyName'] { + order: 1; - :--authors { - :--Person { - &:last-child::before { - content: '& '; + &::after { + content: ' '; + white-space: pre; } } - } - - :--datePublished { - &::after { - content: '.'; - } - } - :--PublicationIssue { - display: inline; + [itemprop='givenName'] { + order: 2; - :--title { &::after { content: ', '; - font-style: normal; + white-space: pre; } } - :--issueNumber { - &::after { - content: ', '; - font-weight: normal; + &:last-of-type { + [itemprop='familyName']::after { + content: ' '; + white-space: pre; } - } - :--pagination { - &::before { - content: normal; + [itemprop='givenName']::after { + content: '.'; + white-space: pre; } } } } + + :--datePublished { + &::before { + content: normal; + } + + &:last-child::after { + content: '.'; + } + } } diff --git a/src/themes/stencila/styles.css b/src/themes/stencila/styles.css index 2e7c42537..8d1bf5746 100644 --- a/src/themes/stencila/styles.css +++ b/src/themes/stencila/styles.css @@ -2,6 +2,22 @@ @import 'prismjs/themes/prism.css'; @import '../../common/fonts/merriweather/merriweather.css'; +/* Custom Selectors */ +@custom-selector :--CiteGroup [itemtype='https://schema.stenci.la/CiteGroup']; +@custom-selector :--Cite [itemtype='https://schema.stenci.la/Cite']; +@custom-selector :--CreativeWork [itemtype='https://schema.org/CreativeWork']; +@custom-selector :--title [itemprop='title']; +@custom-selector :--authors [itemprop='authors']; +@custom-selector :--Person [itemtype='https://schema.org/Person']; +@custom-selector :--references [itemprop='references']; +@custom-selector :--PublicationIssue [itemtype='https://schema.stenci.la/PublicationIssue']; +@custom-selector :--datePublished [itemprop='datePublished']; +@custom-selector :--issueNumber [itemprop='issueNumber']; +@custom-selector :--pagination [itemprop='pagination']; +@custom-selector :--url [itemprop='url']; +@custom-selector :--abstracts [itemprop='abstracts']; +@custom-selector :--authorDetails [itemprop='authorDetails']; + :root { --max-width: 680px; --max-width-media: 980px; @@ -15,7 +31,7 @@ body { padding: 0 1em; line-height: 1.65; - &:after { + &::after { position: absolute; content: ''; right: 0; @@ -37,7 +53,7 @@ article { flex-wrap: wrap; align-content: center; - & > *:not(table, figure) { + & > *:not(figure, table) { width: 100%; } } @@ -59,21 +75,72 @@ a { margin-right: auto; } -figure, -table, -article > pre, -img { - max-width: 100%; - overflow: auto; -} - h1, h2, h3, h4, h5, h6 { - line-height: 125%; + margin: 2.75rem auto 1rem; + line-height: 1.25; + + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6 { + margin-top: 0; + } +} + +h1, +h2 { + border-top: 3px double #dbdbdb; + padding-top: 3rem; +} + +h1 { + margin-top: 0; + font-weight: 900; + font-size: 1.953rem; + + &:first-of-type, + & + h2 { + border-top: none; + padding-top: inherit; + margin-top: inherit; + } + + & + h2 { + text-transform: lowercase; + font-variant: small-caps; + letter-spacing: 1px; + font-size: 1.2rem; + color: #7a7a7a; + } +} + +h2 { + font-size: 1.563rem; +} + +h3 { + font-size: 1.25rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h6, +small, +.text_small { + font-size: 0.725rem; } p { @@ -110,6 +177,14 @@ p { ol, ul { + padding: 0; + list-style-position: inside; + + & ul, + & ol { + padding-left: 1rem; + } + & + h3, & + h4, & + h5, @@ -118,21 +193,22 @@ ul { } } -li > *:first-child { - margin-top: 0; -} +li { + > *:first-child { + margin-top: 0; + } -li > *:last-child { - margin-bottom: 0; + > *:last-child:not(figure) { + margin-bottom: 0; + } } -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 2rem; +figure, +table, +article > pre, +img { + max-width: 100%; + overflow: auto; } article > pre, @@ -140,47 +216,66 @@ article > pre[class*='language-'], figure { background-color: #fff; width: auto; - max-width: 100%; + max-width: var(--max-width); margin: 1.25rem auto; box-shadow: 0 0 8px rgba(0, 0, 0, 0.16); border: 1px solid #dbdbdb; + border-radius: 4px; overflow-y: hidden; overflow-x: auto; - border-radius: 4px; } -figure img, -figure pre { - padding: 1rem; +article > pre { + background-color: #fff; } -figure img { - display: block; - margin: 0 auto; +pre { + font-size: 80%; +} + +figure { + img, + pre { + padding: 1rem; + } + + img { + display: block; + margin: 0 auto; + } + + > figure { + box-shadow: none; + border: none; + } } figcaption { font-size: 85%; background-color: #f1f1f2; width: 100%; - /* margin-top: 1rem; */ padding: 1.5rem 1rem; -} - -figcaption *:last-child { - margin-bottom: 0; -} -figcaption *:first-child { - margin-top: 0; -} + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: 0.725rem; + margin-left: 0; + margin-right: 0; + padding-top: 0; + border: none; + } -article > pre { - background-color: #fff; -} + *:first-child { + margin-top: 0; + } -pre { - font-size: 80%; + *:last-child { + margin-bottom: 0; + } } p { @@ -199,7 +294,7 @@ a { font-style: italic; } - &:link:after { + &:link::after { display: block; width: 100%; content: ''; @@ -213,96 +308,11 @@ a { &:hover { color: rgba(29, 99, 243, 1); - } - - &:hover:after { - background-color: rgba(29, 99, 243, 1); - bottom: 0; - } -} - -h1, -h2 { - border-top: 3px double #dbdbdb; - padding-top: 3rem; -} - -h1 + h2, -h1:first-of-type { - border-top: none; - padding-top: inherit; - margin-top: inherit; -} - -h1 + h2 { - text-transform: lowercase; - font-variant: small-caps; - letter-spacing: 1px; - font-size: 1.2rem; - color: #7a7a7a; -} - -h1, -h2, -h3, -h4, -h5 { - margin: 2.75rem auto 1rem; - line-height: 1.25; -} - -h1 { - margin-top: 0; - font-weight: 900; - font-size: 1.953rem; -} - -h2 { - font-size: 1.563rem; -} - -h3 { - font-size: 1.25rem; -} - -h4 { - font-size: 1rem; -} - -h5 { - font-size: 0.8rem; -} - -h6, -small, -.text_small { - font-size: 0.725rem; -} -h1, -h2, -h3, -h4, -h5, -h6 { - & + h1, - & + h2, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: 0; - } -} - -ul, -ol { - padding: 0; - list-style-position: inside; - - & ul, - & ol { - padding-left: 1rem; + &::after { + background-color: rgba(29, 99, 243, 1); + bottom: 0; + } } } @@ -313,9 +323,15 @@ table { margin: 1rem auto; min-width: var(--max-width); overflow-x: auto; + border: 2px solid #f5f5f5; + + figure & { + margin: 0 auto; + } } -thead { +thead, +tbody:first-child tr:first-child { font-weight: 900; text-transform: uppercase; font-size: 75%; @@ -323,7 +339,8 @@ thead { border-bottom: 2px solid #f5f5f5; } -th { +th, +tbody:first-child tr:first-child { font-weight: 900; padding: 0.5em 1em; border-right: solid 1px #f1f1f2; @@ -388,3 +405,21 @@ blockquote { list-style-position: outside; } } + +:--references { + :--CreativeWork { + margin-bottom: 1rem; + + > :--title:first-of-type { + display: block; + font-size: 1rem; + line-height: 1.5; + font-weight: 600; + border-bottom: none; + } + } + + :--title + :--datePublished { + display: none; + } +}