Skip to content

grammar police #3

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.

Sign up for GitHub

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

Open
vphilipnyc wants to merge 1 commit into
base: master
Choose a base branch
from
Open

grammar police #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions demo/dist/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h2>Content font</h2>
The content font should be a serif one, to gently bring your eyes from one letter to the other with
the lowest amount of effort.<br><code>line-height</code> and <code>letter-spacing</code> are vital here. Play with those parameters to make the most out of your
font of choice. However at <strong>Medium</strong> you'll find almost an empty line of space in the middle of two lines of text (<code>line-height: 1.58;</code>).
While the space between the charachters is kept a little bit on the negative side (<code>letter-spacing: -0.03;</code>) to make words feel more compacts.
While the space between the characters is kept a little bit on the negative side (<code>letter-spacing: -0.03;</code>) to make words feel more compacts.
</p>
<h2>Brand font</h2>
<p>
Expand All @@ -60,16 +60,16 @@ <h2>UI font</h2>
<p>
The font used for all the UI elements is preferably a sans-serif one. It should create contrast with the content font.
Its color could be a little bit lighter than the one used for the main content. <br>It needs to be readable given the background-color of your page
but not distracting from the main purpose of the page. <span class="highlighted">Reading!</span><br>You can use it also for <code>h2</code> making the titles for your paragraphs. Here the color should be the same as the one used for the main title.
but not distracting from the main purpose of the page. <span class="highlighted">Reading!</span><br>You can use it also for <code>h2</code> making the titles for your paragraphs. Here, the color should be the same as the one used for the main title.
</p>
<h2><span class="highlighted">The highlight</span></h2>
<p>To highlight a word or phrase you can wrap them in a <code>span</code> element and <span class="highlighted">set the background to a color that reminds of your brand color identity</span>.</p>
<p>To highlight a word or phrase you can wrap them in a <code>span</code> element and <span class="highlighted">set the background to a color that reminds one of your brand color identity</span>.</p>
<h1>Every Title</h1>
<p class="subtitle">`Needs a subtitle`</p>
<p>Here we find <code>rgba(0, 0, 0, 0.54)</code> to give meaningful informations without grabbing the attention that the title, main charachter, deserves.</p>
<h2>The length</h2>
<p class="lineLength">
The length of a line of text should never be longer than <code>740px</code>. So our eyes are not forced to run from left to right on the page. </p>
The length of a line of text should never be longer than <code>740px</code>, so our eyes are not forced to run from left to right on the page. </p>
<h2>The color</h2>
<p>
The text color should be <code>rgba(0, 0, 0, 0.84)</code> on a <code>rgba(255, 255, 255, 1)</code> background to ensure the best contrast possible.</p>
Expand All @@ -81,4 +81,4 @@ <h2>Conclusion</h2>
Happy readings,<br><i><a href="https://codepen.com/lucagez">Gez</a></i></p>
</main>
</div>
</body>
</body>