From 70e669fb7351bbf99a6e17897baccd1d5d9504c6 Mon Sep 17 00:00:00 2001 From: Nokome Bentley Date: Mon, 30 Sep 2019 10:36:12 +1300 Subject: [PATCH] fix(Selectors): Rename code-chunk to CodeChunk Also add documentation on naming conventions to use and groups selectors just by type and property to make the convention more obvious. --- src/common/styles/common.css | 2 +- src/common/styles/selectors.css | 56 ++++++++++++++++++++++++--------- src/themes/eLife/styles.css | 4 +-- src/themes/nature/styles.css | 2 +- src/themes/plos/styles.css | 4 +-- src/themes/stencila/styles.css | 4 +-- 6 files changed, 49 insertions(+), 23 deletions(-) diff --git a/src/common/styles/common.css b/src/common/styles/common.css index 9bc9545aa..78e724f99 100644 --- a/src/common/styles/common.css +++ b/src/common/styles/common.css @@ -6,7 +6,7 @@ @import './citations.css'; -:--code-chunk { +:--CodeChunk { pre, pre[class*='language-'] { background-color: transparent; diff --git a/src/common/styles/selectors.css b/src/common/styles/selectors.css index ee9e1bd3f..20880cda8 100644 --- a/src/common/styles/selectors.css +++ b/src/common/styles/selectors.css @@ -1,36 +1,62 @@ -/* Types */ +/** + * Custom, semantic, CSS selectors + * + * In Thema the approach to CSS naming is, as much as possible, to + * use custom selectors for the type of entities being styled and + * their properties. + */ + + +/** + * Type selectors + * + * For types defined in http://schema.org (e.g. `Article`), or extensions such as, + * http://schema.stenci.la (e.g. `CodeChunk`), http://bioschemas.org (e.g. `Taxon`) etc. + * + * Conventions: + * + * - use the same upper camel case as in the schema the type is defined in + * - use a `[itemtype=...]` selector if possible (i.e. if Encoda encodes it in HTML) + */ @custom-selector :--Article [itemtype='https://schema.org/Article']; @custom-selector :--Cite [itemtype='https://schema.stenci.la/Cite']; @custom-selector :--CiteGroup [itemtype='https://schema.stenci.la/CiteGroup']; +@custom-selector :--CodeChunk stencila-code-chunk; @custom-selector :--CreativeWork [itemtype='https://schema.org/CreativeWork']; -@custom-selector :--Thing [itemtype='https://schema.org/Thing']; @custom-selector :--Entity [itemtype='https://schema.stenci.la/Entity']; @custom-selector :--Person [itemtype='https://schema.org/Person']; @custom-selector :--PublicationIssue [itemtype='https://schema.org/PublicationIssue']; +@custom-selector :--Thing [itemtype='https://schema.org/Thing']; -/* Custom Web Component */ -@custom-selector :--code-chunk stencila-codechunk; - -/* Properties */ - -/* schema.org properties */ -@custom-selector :--description [itemprop='description']; +/** + * Property selectors + * + * For properties of types defined in schemas. Note that + * some of these select an entire container property e.g. `authors` and + * selector for a class, and some select items in those properties + * e.g. `author` and select for a `itemprop`. + * + * Conventions: + * + * - use the same lower camel case as in the schema the property is defined in + * - use a `.class` selector for container properties + * - use a `[itemprop=...]` selector for singular properties, or items of container properties + */ @custom-selector :--address [itemprop='address']; @custom-selector :--affiliation [itemprop='affiliation']; +@custom-selector :--affiliations .affiliations; @custom-selector :--author [itemprop='author']; +@custom-selector :--authors .authors; @custom-selector :--citation [itemprop='citation']; @custom-selector :--datePublished [itemprop='datePublished']; +@custom-selector :--description [itemprop='description']; @custom-selector :--email [itemprop='email']; +@custom-selector :--emails .emails; @custom-selector :--familyName [itemprop='familyName']; @custom-selector :--givenName [itemprop='givenName']; @custom-selector :--headline [itemprop='headline']; @custom-selector :--issueNumber [itemprop='issueNumber']; @custom-selector :--name [itemprop='name']; @custom-selector :--pagination [itemprop='pagination']; -@custom-selector :--url [itemprop='url']; - -/* Custom properties / names */ -@custom-selector :--affiliations .affiliations; -@custom-selector :--authors .authors; -@custom-selector :--emails .emails; @custom-selector :--references .references; +@custom-selector :--url [itemprop='url']; diff --git a/src/themes/eLife/styles.css b/src/themes/eLife/styles.css index 4427d5b52..720bd142f 100644 --- a/src/themes/eLife/styles.css +++ b/src/themes/eLife/styles.css @@ -54,7 +54,7 @@ table, article > pre, article > pre[class*='language-'], img, -:--code-chunk { +:--CodeChunk { max-width: var(--max-width); margin-left: auto; margin-right: auto; @@ -151,7 +151,7 @@ figcaption { } } -:--code-chunk { +:--CodeChunk { border: 1px solid #e0e0e0 !important; margin: 3rem auto; padding: 0.75rem; diff --git a/src/themes/nature/styles.css b/src/themes/nature/styles.css index 52f20be8b..f254597de 100644 --- a/src/themes/nature/styles.css +++ b/src/themes/nature/styles.css @@ -140,7 +140,7 @@ img { article { & > pre, & > figure, - :--code-chunk { + :--CodeChunk { background-color: #fff; width: auto; max-width: calc(var(--max-width) - 50px); /* desktop+ */ diff --git a/src/themes/plos/styles.css b/src/themes/plos/styles.css index 61b344aa3..0a87a8cf8 100644 --- a/src/themes/plos/styles.css +++ b/src/themes/plos/styles.css @@ -58,7 +58,7 @@ figure, table, article > pre, article > pre[class*='language-'], -:--code-chunk { +:--CodeChunk { max-width: var(--max-width); margin-left: auto; margin-right: auto; @@ -188,7 +188,7 @@ li { } figure, -:--code-chunk { +:--CodeChunk { font-family: var(--body-font); margin: 1.25rem auto; overflow: auto; diff --git a/src/themes/stencila/styles.css b/src/themes/stencila/styles.css index fc464986d..17d859c9c 100644 --- a/src/themes/stencila/styles.css +++ b/src/themes/stencila/styles.css @@ -204,7 +204,7 @@ article > pre[class*='language-'], body > figure, main > pre, article > figure, -:--code-chunk { +:--CodeChunk { background-color: #fff; width: auto; max-width: var(--max-width); @@ -216,7 +216,7 @@ article > figure, overflow-x: auto; } -:--code-chunk { +:--CodeChunk { max-width: var(--max-width-media); pre,