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

ghost
Copy link

@ghost ghost 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.

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

ghost 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?

@ghost
Copy link
Author

ghost 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

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
@thebaer thebaer deleted the table-borders branch March 16, 2020 16:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

None yet

2 participants