W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2017

Re: [csswg-drafts] [css-rhythm] Real sites using the `line-height-step` property

From: Koji Ishii via GitHub <sysbot+gh@w3.org>
Date: Tue, 28 Nov 2017 13:00:30 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-347516262-1511874029-sysbot+gh@w3.org>
@FremyCompany here's screenshots of https://blog.jxck.io/ , the left is off, the right is on.

![line-height-step-jxck io-compare](https://user-images.githubusercontent.com/1274377/33320893-0ea70c80-d487-11e7-8634-e9c54b6ffc4c.png)

and copying the CSS below:
```css
@supports (line-height-step: 1px) {
  article {
    line-height: 1.5;
    --grid: 1.5em;
    line-height-step: var(--grid);
  }

  article h1,
  article h2,
  article h3,
  article h4,
  article h5,
  article h6 {
    display: inline-block;
    width: 100%;
    line-height-step: 0;
    line-height: 1.2;
    margin-bottom: 0;
  }

  article p {
    margin-top: var(--grid);
    margin-bottom: var(--grid);
  }

  article pre,
  article table {
    line-height-step: 0;
    line-height: normal;
  }
}
```

-- 
GitHub Notification of comment by kojiishi
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1942#issuecomment-347516262 using your GitHub account
Received on Tuesday, 28 November 2017 13:00:37 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 28 November 2017 13:00:40 UTC