feat: Add eLife styling for publication date #114

discodavey · 2020-03-24T16:01:49Z

First pass for initial styling

davidcmoulton · 2020-03-25T08:37:38Z

src/themes/elife/custom-properties.css

@@ -0,0 +1,3 @@
+:root {
+  --text-size-small: 0.6875;


For clarity should include rem in the name as the unit is not in the value.

davidcmoulton · 2020-03-25T08:41:41Z

src/themes/elife/styles.css

@@ -13,6 +13,8 @@
 @import '../../fonts/notoSerif/notoSerif.css';
 @import '../../fonts/notoSans/notoSans.css';

+@import 'custom-properties.css';


Move down to be below any @imports from outside the eLife theme.

davidcmoulton · 2020-03-25T08:46:55Z

src/themes/elife/custom-properties.css

@@ -0,0 +1,3 @@
+:root {


Use :--root to be consistent with the rest of the codebase. Might need to change it later to widen the scope to this, but for now let's start with consistency.

davidcmoulton · 2020-03-25T08:47:46Z

src/themes/elife/styles.css

+  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
+  font-size: calc(var(--text-size-small) * 1rem);
+  line-height: calc(1.5rem / var(--text-size-small));
+  letter-spacing: 0.5px;


Not sure whether this should be a custom property 🤔

It could be as all the letter-spacing variables in pattern library are the same. So will add.

codecov-io · 2020-03-25T11:22:29Z

Codecov Report

Merging #114 into next will not change coverage by %.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next     #114   +/-   ##
=======================================
  Coverage   88.95%   88.95%           
=======================================
  Files           4        4           
  Lines         163      163           
  Branches       50       50           
=======================================
  Hits          145      145           
  Misses         18       18

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 14b0264...2d6a694. Read the comment docs.

davidcmoulton · 2020-03-27T09:32:01Z

src/themes/elife/styles.css

@@ -15,6 +15,9 @@

 @import '../../extensions/person/styles.css';

+/* Custom Properties */


Comments are good, but in this case the file name is self-documenting so don't need this here.

davidcmoulton · 2020-03-27T09:45:06Z

src/themes/elife/styles.css

+:--datePublished {
+  font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
+  font-size: calc(var(--text-size-rem-small) * 1rem);
+  line-height: calc(1.5rem / var(--text-size-rem-small));


Should probably have the 1.5rem in a custom property too.

@davidcmoulton What should we call this then? Are you sure this is not fragmenting this too much?

Cannot think of a suitable name for this if we are going to use it as a global. I have set it up as if we were going to use it for line-height.

davidcmoulton · 2020-03-27T09:48:23Z

@discodavey In your commit messages, please can you add (Elife) before the colon (see examples of previous commits) to make it clear to which theme the changes are addressing.

discodavey · 2020-03-27T13:40:39Z

@davidcmoulton It maybe worth putting the info about naming conventions for commits in the README file as it's not obvious and would be good information for anyone else who works on the project.

This was suggested here: #114 (comment)

davidcmoulton · 2020-03-30T10:43:00Z

src/themes/elife/custom-properties.css

+:--root {
+  --text-size-rem-small: 0.6875;
+  --letter-spacing: 0.5px;
+  --line-height-calc: 1.5rem;


This represents the standard baseline grid measure on eLife (24px), expressed in rem, so would name it something like --baseline-measure-rem

davidcmoulton

Looking okay 👍

Next I guess it's the colour and horizontal alignment?

Also, to get the date formatting as it should you'll need to merge the current next branch into your feature branch.

davidcmoulton

Looking pretty good 👍

While you're at it, can you get the spacing between the author list and the date the same as eLife too? It's the equivalent of 24px on an eLife article.

davidcmoulton · 2020-03-31T14:06:58Z

src/themes/elife/custom-properties.css

+  /* Colors */
+  --color-text-secondary: #888;
+
+  /* Typography */


Probably don't need these comments (here and on line 2) as it seems pretty well self documenting at the moment. Note that the baseline custom property is not typography but spacing.

With the comments I was just bringing them over from the Pattern Librtary hence why they are there. In my opinion I think they are valid as it's easier to scan comments quicker rather than looking at the code.

@davidcmoulton With the spacing on the author list does this need to be a separate PR as the spacing would be on the bottom of the Author List rather than the top of the date?

@discodavey Happy to have a separate PR as part of the same ticket.

davidcmoulton · 2020-04-01T11:18:41Z

Merged into next, but master has just taken over as the default branch 🤔

@discodavey can you raise a new PR from your feature branch into master, and put a comment linking to this one to keep the comment history please?

@alex-ketch Presumably open PRs currently targeting next should be retargeted to master now? I can do the eLife ones. Once next has no open PRs against it, is it worth deleting it?

nokome · 2020-04-01T11:23:54Z

Hi @davidcmoulton just saw the bot notif about this.

Presumably open PRs currently targeting next should be retargeted to master now? I can do the eLife ones. Once next has no open PRs against it, is it worth deleting it?

Yes on both counts IMO.

davidcmoulton · 2020-04-01T12:39:33Z

Confirming open eLife PRs are now against master.

stencila-ci · 2020-04-03T10:19:09Z

🎉 This PR is included in version 2.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat: Add styling for date publication

0587dd6

davidcmoulton changed the title ~~feat: Add styling for date publication~~ feat: Add eLife styling for publication date Mar 24, 2020

davidcmoulton reviewed Mar 25, 2020

View reviewed changes

fix: Add letter-spacing as custom property

2ca8c44

davidcmoulton reviewed Mar 27, 2020

View reviewed changes

discodavey added 2 commits March 27, 2020 14:36

refactor(ELife): Create custom property for line height date

af0b366

refactor(Elife): Remove comment

3330bd5

nokome added a commit that referenced this pull request Mar 28, 2020

docs(README): Add section on committing.

a1b8a63

This was suggested here: #114 (comment)

discodavey requested a review from davidcmoulton March 30, 2020 08:48

discodavey marked this pull request as ready for review March 30, 2020 10:26

davidcmoulton reviewed Mar 30, 2020

View reviewed changes

refactor(Elife): Change custom property name

e5f652a

discodavey requested a review from davidcmoulton March 30, 2020 11:11

davidcmoulton reviewed Mar 30, 2020

View reviewed changes

discodavey added 3 commits March 31, 2020 11:01

refactor(Elife): Styling publication date

eded191

Merge remote-tracking branch 'upstream/next' into style-publication-date

613a7da

fix(Elife): Add space to pass lint test

2d6a694

discodavey requested a review from davidcmoulton March 31, 2020 12:51

davidcmoulton reviewed Mar 31, 2020

View reviewed changes

davidcmoulton merged commit 0fe8a36 into stencila:next Apr 1, 2020

stencila-ci mentioned this pull request Apr 1, 2020

The automated release is failing 🚨 #124

Closed

discodavey mentioned this pull request Apr 3, 2020

Style publication date #127

Merged

stencila-ci added the released label Apr 3, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add eLife styling for publication date #114

feat: Add eLife styling for publication date #114

discodavey commented Mar 24, 2020

davidcmoulton Mar 25, 2020

davidcmoulton Mar 25, 2020

davidcmoulton Mar 25, 2020

davidcmoulton Mar 25, 2020

discodavey Mar 25, 2020

codecov-io commented Mar 25, 2020 •

edited

Loading

davidcmoulton Mar 27, 2020

davidcmoulton Mar 27, 2020

discodavey Mar 27, 2020

discodavey Mar 27, 2020

davidcmoulton commented Mar 27, 2020

discodavey commented Mar 27, 2020

davidcmoulton Mar 30, 2020

davidcmoulton left a comment

davidcmoulton left a comment

davidcmoulton Mar 31, 2020

discodavey Apr 1, 2020 •

edited

Loading

discodavey Apr 1, 2020

davidcmoulton Apr 1, 2020

davidcmoulton commented Apr 1, 2020

nokome commented Apr 1, 2020

davidcmoulton commented Apr 1, 2020

stencila-ci commented Apr 3, 2020

		@@ -15,6 +15,9 @@

		@import '../../extensions/person/styles.css';

		/* Custom Properties */

feat: Add eLife styling for publication date #114

feat: Add eLife styling for publication date #114

Conversation

discodavey commented Mar 24, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-io commented Mar 25, 2020 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidcmoulton commented Mar 27, 2020

discodavey commented Mar 27, 2020

Choose a reason for hiding this comment

davidcmoulton left a comment

Choose a reason for hiding this comment

davidcmoulton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

discodavey Apr 1, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidcmoulton commented Apr 1, 2020

nokome commented Apr 1, 2020

davidcmoulton commented Apr 1, 2020

stencila-ci commented Apr 3, 2020

codecov-io commented Mar 25, 2020 •

edited

Loading

discodavey Apr 1, 2020 •

edited

Loading