refactor(Styles): Make only stencila theme extend Article

stencila · Sep 10, 2019 · da293af · da293af
1 parent 8b3897c
commit da293af
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 11 deletions.
diff --git a/.postcssrc b/.postcssrc
@@ -5,13 +5,13 @@
     "postcss-import-url": { "modernBrowser": true },
     "postcss-url": { "url": "rebase" },
     "postcss-mixins": {
-      "mixinsDir": "src/common/styles/mixins"
+      "mixinsDir": "src/designa/mixins"
     },
     "postcss-custom-selectors": {
       "importFrom": "src/common/styles/selectors.css"
     },
     "postcss-custom-properties": {
-      "preserve": false
+      "preserve": true
     },
     "postcss-nested": true,
     "autoprefixer": true

diff --git a/src/common/styles/Article.css b/src/common/styles/Article.css
diff --git a/src/common/styles/common.css b/src/common/styles/common.css
@@ -2,10 +2,6 @@
 @import 'prismjs/plugins/line-highlight/prism-line-highlight.css';
 @import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 
-@import './Entity.css';
-@import './Person.css';
-@import './Article.css';
-
 @import './citations.css';
 
 article {

diff --git a/src/designa/Article.css b/src/designa/Article.css
@@ -0,0 +1,15 @@
+@import './Entity.css';
+@import './Person.css';
+
+:--Article {
+  @mixin CreativeWork;
+
+  max-width: var(--article-content-max-width);
+  margin-left: auto;
+  margin-right: auto;
+
+  font-family: var(--article-content-font-family);
+  font-size: var(--article-content-font-size);
+  line-height: var(--article-content-line-height);
+  color: var(--article-content-color);
+}
diff --git a/src/common/styles/Entity.css → src/designa/Entity.css b/src/common/styles/Entity.css → src/designa/Entity.css
diff --git a/src/common/styles/Person.css → src/designa/Person.css b/src/common/styles/Person.css → src/designa/Person.css
diff --git a/src/common/styles/mixins/CreativeWork.css → src/designa/mixins/CreativeWork.css b/src/common/styles/mixins/CreativeWork.css → src/designa/mixins/CreativeWork.css
diff --git a/src/common/styles/mixins/list-separated.css → src/designa/mixins/list-separated.css b/src/common/styles/mixins/list-separated.css → src/designa/mixins/list-separated.css
diff --git a/src/themes/stencila/index.ts b/src/themes/stencila/index.ts
@@ -1 +0,0 @@
-import '../../common/js/index'

diff --git a/src/themes/stencila/styles.css b/src/themes/stencila/styles.css
@@ -1,4 +1,3 @@
-@import '../../common/styles/common.css';
 @import 'prismjs/themes/prism.css';
 @import '../../common/fonts/merriweather/merriweather.css';
 
@@ -8,6 +7,8 @@
   --body-font: Merriweather, serif;
 }
 
+@import '../../designa/Article.css';
+
 body {
   font-family: var(--body-font);
   font-size: 16px;
@@ -42,6 +43,7 @@ article {
   }
 }
 
+div,
 p,
 h1,
 h2,