Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lightly style tables in posts #194

Merged
merged 2 commits into from Mar 16, 2020
Merged

lightly style tables in posts #194

merged 2 commits into from Mar 16, 2020

Conversation

@robjloranger
Copy link
Member

robjloranger commented Oct 8, 2019

styling added:

  • thin inner borders
  • table body rows alternate light background
  • table header text centered
  • cellspacing reset and replaced with padding to avoid gaps in borders

  • I have signed the CLA
@thebaer thebaer added this to the 0.11 milestone Oct 10, 2019
@thebaer thebaer modified the milestones: 0.11, 0.12 Nov 11, 2019
@thebaer
Copy link
Member

thebaer commented Feb 8, 2020

This looks nice, but I think our default style should be as simple as possible, so it's as easy as possible to override with custom CSS. Then we can make this available as a fancier option.

Here, I think we should just make the table width: 100% and add some light borders.

@robjloranger robjloranger self-assigned this Feb 11, 2020
@robjloranger
Copy link
Member Author

robjloranger commented Feb 11, 2020

How does this look? Or were you thinking outter borders as well? (ignore the top/left lines, screencap noise)

2020-02-11-085744_707x247_scrot

@thebaer
Copy link
Member

thebaer commented Feb 11, 2020

Looks good, but is the CSS simple / easily to override?

@robjloranger
Copy link
Member Author

robjloranger commented Feb 11, 2020

2020-02-11-094647_675x216_scrot

I reworked it a bit to make it simpler to override. To change the style would require something like:

article table {
  border-color: new-color;
}

article table th {
  font-size: 3em;
}

We could change to using a class but it would be similar to override like:

table.post {
  border-color: new-color;
}

table.post th {
  font-size: 3em;
}
@thebaer
Copy link
Member

thebaer commented Feb 11, 2020

Cool, I think that looks great 👍

@thebaer thebaer added the design label Feb 11, 2020
@cjeller1592
Copy link
Contributor

cjeller1592 commented Feb 27, 2020

Tables look good on my end! Both Chrome (80.0.3987) and Firefox (73.0.1) show the same table styling.

@thebaer
Copy link
Member

thebaer commented Mar 16, 2020

Thanks @robjloranger and @cjeller1592! Looks good, merging now.

@thebaer thebaer merged commit da04551 into develop Mar 16, 2020
2 checks passed
2 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@thebaer thebaer deleted the table-borders branch Mar 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.