Skip to content
This repository has been archived by the owner on Nov 17, 2021. It is now read-only.

Fix theme styles and selector causing conflicts with Designa #24

Closed
wants to merge 1 commit into from
Closed

Fix theme styles and selector causing conflicts with Designa #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
src/common/styles/selectors.css
10 changes: 10 additions & 0 deletions src/common/styles/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@

@import './citations.css';

img {
height: auto;
max-width: 100%;
}

:--affiliations {
display: inline;
padding: 0;
}

:--CodeChunk {
pre,
pre[class*='language-'] {
Expand Down
26 changes: 25 additions & 1 deletion src/common/styles/selectors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,31 @@
* 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.
*/
*
* The top level selectors should target block level semantic elements, and avoid
* styling generic elements such as `div`s and `span`s. This limitation helps ensure that
* themes cause minimal conflicts with existing layouts and deeply nested components.
*
*/
@custom-selector :--pre pre, pre[class*="language-"];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little uncomfortable with this use of custom selector for a non-semantic pre-formatted element. It feels a little ad-hoc. All the other uses of custom selectors below relate to an itemtype, an itemprop or containers for itemprops (e.g. authors). Looking below at the use of :--pre, it seem that to be consistent with that, we need a @custom-selector :--CodeBlock [itemtype='https://schema.stenci.la/CodeBlock']; and for Encoda to encode an itemtype for CodeBlock elements.

Generally, I think we should:

  • decide which Schema node type we are not going to add itemtype to in the HTML encoding (adding to p, li, strong etc is probably over the top)
  • in Encoda add itemtype to HTML encodings of all other node types
  • in Encoda, or here, autogenerate the @custom-selectors for the types and properties


/**
* 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.
*/

/**
* Type selectors
Expand Down
3 changes: 2 additions & 1 deletion src/designa/Person.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
*/
:--emails {
@mixin list-separated;
display: inline;
order: 2;

:--email {
Expand All @@ -45,7 +46,7 @@
&::after {
content: '\00a0📧';
vertical-align: super;
color: #9E9E9E;
color: #9e9e9e;
font-size: 90%;
}
}
Expand Down
6 changes: 2 additions & 4 deletions src/designa/mixins/list-separated.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@
separated by some content `$separator`
*/
@define-mixin list-separated $separator: ', ' {
display: inline;

list-style: none;
margin: 0;
padding: 0;
padding-left: 0;
padding-right: 0;

li {
display: inline;
Expand Down
4 changes: 4 additions & 0 deletions src/themes/nature/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,11 @@ blockquote {
}

:--authors,
:--organizations,
:--CreativeWork header ol {
padding: 0;
margin: 0 auto;

li {
display: inline;
}
Expand Down
9 changes: 9 additions & 0 deletions src/themes/plos/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,15 @@ blockquote {
margin-bottom: 1.5rem;
}

:--authors {
padding: 0;
margin: 0 auto;
}

:--organizations {
margin: 0 auto;
}

@media screen and (max-width: 380px) {
ul,
ol {
Expand Down
Loading