All slectors must be descendants - of a custom semantic selector. This reduces risks of a theme interfering with
-exsitng stylesheets on a website. -
+All selectors must be descendants + of a custom semantic selector. This reduces risks of a theme interfering with exsitng + stylesheets on a website.
Avoid hard-coded values for - things such as font-sizes, colors, and fonts. Instead, use CSS variables, as these will
-allow simple theme overrides - within the browser without having to rebuild the theme.
+ things such as font-sizes, colors, and fonts. Instead, use CSS variables, as these will + allow simple theme overrides within the browser without having to rebuild the theme.Design your themes using a @@ -625,28 +629,19 @@
To tweak or adjust an existing theme, - you may override some common CSS variables found in the themes.
-Available CSS variables are: - --color-accent: Color for accent elements, primarily used to add a brand highlights to the - theme. --color-key: Color for body text, and other elements using the inherited body text color. - --color-neutral: Subtle color, usually shades of gray, for element borders and other subtle - details. --color-stock: Article/Page background color, but also used for other elements. - --font-family-body: Font-family for paragraphs and other non-headline elements - --font-family-heading: Font-family for paragraphs and other non-headline elements - --font-family-mono: Font-family for monospaced text elements such as `pre` and `code`. - --max-width-media: Maximum width for media content, including images and interactive Code - Chunks. --max-width: Max width for textual elements and other non-media content.
-Note that not all themes make use of - all available variables, and that some may expose additional options. Please refer to the - specific theme documentation.
+ you may override some common CSS variables found in the themes. Please refer to the specific + theme documentation for available variables.Type selectors
For types defined in http://schema.org (e.g. `Article`), or extensions
- such as, http://schema.stenci.la (e.g. `CodeChunk`), http://schema.org (e.g. Article), or extensions such as, http://schema.stenci.la (e.g. CodeChunk), http://bioschemas.org (e.g. `Taxon`) etc.
Taxon) etc.
Conventions:
use a `itemtype=...` selector if possible (i.e. if - Encoda encodes it in HTML)
+use a [itemtype=...] selector if possible
+ (i.e. if Encoda encodes it in HTML)
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`.
+ 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 a `.class` selector for - container properties
+use a .class selector for container
+ properties
use a `itemprop=...` selector for singular - properties, or items of container properties
+use a [itemprop=...] selector for
+ singular properties, or items of container properties
There are several additional + selectors which are not found as the Stencila Schema definitions. These are:
+| Selector | +Description | +Target | +
:--root |
+ It maps to the root element + generated by Encoda. This is done to avoid potential clashes with external stylesheets, + and to ensure that Thema only styles semantically annotated content. | +[data-itemscope=root] |
+
:--CodeBlockTypes |
+ Block level code elements | +:--CodeBlock, :--CodeChunk |
+
:--CodeTypes |
+ Inline level code elements + | +:--CodeBlock, :--CodeChunk, :--Code, :--CodeError, :--CodeExpression, :--CodeFragment,
+ :--SoftwareSourceCode |
+
:--ListTypes |
+ List elements, both ordered + and unordered, as well as other lists such as author affiliations and article references + | +:--Article:--root >
+ :--affiliations, :--Collection, :--List, :--references > ol |
+
:--MediaTypes |
+ These are elements which + usually benefit from taking up a wider screen area. Elements such as images, video + elements, code blocks | +:--CodeBlock, :--CodeChunk, :--Datatable, :--Figure, :--ImageObject, :--MediaObject,
+ :--Table, :--VideoObject |
+
Register a function to be executed when the DOM is fully loaded.
Kind: global functionKind: global function Detail: Use this to wrap calls to the DOM - selection and manipulation functions to be sure that the DOM is ready before working on it.
+ selection and manipulation functions to be sure that the DOM is ready before working on it.ExampleExample js ready(() => { // Use other DOM
manipulation functions here })
Select the first element matching a CSS selector.
Kind: global functionKind: global function Returns: [{text:'Element',type:'CodeFragment'},'
- |',{text:'',type:'CodeFragment'}] | [{text:'null',type:'CodeFragment'},' - An Element or
- null if no match: This function provides a short hand for querySelector but also allowing for
- the use of semantic selectors. You can use it for the whole document, or scoped to a
- particular element.'] - An [{text:'Element',type:'CodeFragment'},' |'] |
+ [{text:'null',type:'CodeFragment'},'
+ - An Element or null if no match : This function provides a short hand for querySelector but
+ also allowing for the use of semantic selectors. You can use it for the whole document, or
+ scoped to a particular element.'] - An if no match Detail: This function provides a short hand
for Element or null if no matchnullquerySelector but
also allowing for the use of semantic selectors. You can use it for the whole document, or
- scoped to a particular element.