Skip to content

day two headings and body copy #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

Merged
allyface merged 2 commits into from
Mar 8, 2017
Merged

day two headings and body copy #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c4f2b2
day two headings and body copy
silentsoundz Mar 8, 2017
c9e1dc5
Merge branch 'master' into body-copy
allyface Mar 8, 2017
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
83 changes: 67 additions & 16 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
<div>
<header>
<h1 class="section-title">Headings</h1>
<p>To style headings in various sizes, add the <code class="class-name">.headings</code> class to your <code class="element-in-text">&lt;h1&gt;</code> through <code class="element-in-text">&lt;h6&gt;</code> tags.</p>
<p>To style headings in various sizes, add the
<code class="class-name">.headings</code> class to your
<code class="element-in-text">&lt;h1&gt;</code> through
<code class="element-in-text">&lt;h6&gt;</code> tags.</p>
<div class="primary-text">
<h1 class="headings">h1. Vast Quoll</h1>
<h2 class="headings">h2. Vast Quoll</h2>
Expand All @@ -18,27 +21,75 @@ <h4 class="headings">h4. Vast Quoll</h4>
<h5 class="headings">h5. Vast Quoll</h5>
<h6 class="headings">h6. Vast Quoll</h6>
</div>

<code>
<p><span class="element-color">&lt;h1</span> <span class="class">class=</span><span class="class-name">"headings"</span><span class="element-color">&gt;</span>h1. Vast Quoll<span class="element-color">&lt;/h1&gt;</span></p>
<p><span class="element-color">&lt;h2</span> <span class="class">class=</span><span class="class-name">"headings"</span><span class="element-color">&gt;</span>h2. Vast Quoll<span class="element-color">&lt;/h2&gt;</span></p>
<p><span class="element-color">&lt;h3</span> <span class="class">class=</span><span class="class-name">"headings"</span><span class="element-color">&gt;</span>h3. Vast Quoll<span class="element-color">&lt;/h3&gt;</span></p>
<p><span class="element-color">&lt;h4</span> <span class="class">class=</span><span class="class-name">"headings"</span><span class="element-color">&gt;</span>h4. Vast Quoll<span class="element-color">&lt;/h4&gt;</span></p>
<p><span class="element-color">&lt;h5</span> <span class="class">class=</span><span class="class-name">"headings"</span><span class="element-color">&gt;</span>h5. Vast Quoll<span class="element-color">&lt;/h5&gt;</span></p>
<p><span class="element-color">&lt;h6</span> <span class="class">class=</span><span class="class-name">"headings"</span><span class="element-color">&gt;</span>h6. Vast Quoll<span class="element-color">&lt;/h6&gt;</span></p>
<p>
<span class="element-color">&lt;h1</span>
<span class="class">class=</span><!--
--><span class="class-name">"headings"</span><!--
--><span class="element-color">&gt;</span>h1. Vast Quoll<!--
--><span class="element-color">&lt;/h1&gt;</span>
</p>
<p>
<span class="element-color">&lt;h2</span>
<span class="class">class=</span><!--
--><span class="class-name">"headings"</span><!--
--><span class="element-color">&gt;</span>h2. Vast Quoll<!--
--><span class="element-color">&lt;/h2&gt;</span>
</p>
<p>
<span class="element-color">&lt;h3</span>
<span class="class">class=</span><!--
--><span class="class-name">"headings"</span><!--
--><span class="element-color">&gt;</span>h3. Vast Quoll<!--
--><span class="element-color">&lt;/h3&gt;</span>
</p>
<p>
<span class="element-color">&lt;h4</span>
<span class="class">class=</span><!--
--><span class="class-name">"headings"</span><!--
--><span class="element-color">&gt;</span>h4. Vast Quoll<!--
--><span class="element-color">&lt;/h4&gt;</span>
</p>
<p>
<span class="element-color">&lt;h5</span>
<span class="class">class=</span><!--
--><span class="class-name">"headings"</span><!--
--><span class="element-color">&gt;</span>h5. Vast Quoll<!--
--><span class="element-color">&lt;/h5&gt;</span>
</p>
<p>
<span class="element-color">&lt;h6</span>
<span class="class">class=</span><!--
--><span class="class-name">"headings"</span><!--
--><span class="element-color">&gt;</span>h6. Vast Quoll<!--
--><span class="element-color">&lt;/h6&gt;</span>
</p>
</code>
<!--
<div class="secondary-text">
<h2 class="section-title"><small>Secondary Heading Text</small></h1>
<p>Here is secondary text:</p>
<h1>h1. Vast Quoll <small>Secondary text</small></h1>
<h2>h2. Vast Quoll <small>Secondary text</small></h2>
<h3>h3. Vast Quoll <small>Secondary text</small></h3>
<h4>h4. Vast Quoll <small>Secondary text</small></h4>
<h5>h5. Vast Quoll <small>Secondary text</small></h5>
<h6>h6. Vast Quoll <small>Secondary text</small></h6>
if needed example code -->
<h2 class="section-title"><small>Secondary Headings</small></h1>
<p>To create secondary text, add the <code class= "class-name">.small</code> class to your <code class= "element-in-text">&lt;h1&gt;</code> through <code class= "element-in-text">&lt;h6&gt;</code> tags.</p>
<h1 class= "headings">h1. Vast Quoll <small>Secondary text</small></h1>
<h2 class= "headings">h2. Vast Quoll <small>Secondary text</small></h2>
<h3 class= "headings">h3. Vast Quoll <small>Secondary text</small></h3>
<h4 class= "headings">h4. Vast Quoll <small>Secondary text</small></h4>
<h5 class= "headings">h5. Vast Quoll <small>Secondary text</small></h5>
<h6 class= "headings">h6. Vast Quoll <small>Secondary text</small></h6>
-->

</div>
</header>
<header class = "body copy">
<h1 class ="section-title">Body copy</h1>
<p>Vast CSS global default<!--
--><code class = "element-in-text"> font-size</code> is <!--
--><b>13px</b>, with a <!--
--><code class ="element-in-text">line-height</code> of<!--
--><b> 1.5</b>. This is applied to the <!--
--><code class = "element-in-text">&lt;body&gt;</code> and all paragraphs. Including, <!--
--><code class = "element-in-text">&lt;p&gt;</code> (paragraphs) receive a bottom margin of 10px.
</header>
</div>
</body>
</html>
1 change: 1 addition & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

.section-title {
color: blue;
background-color: #d6e2ed;
Expand Down