Skip to content

Completed body #6

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
silentsoundz merged 4 commits into from
Mar 9, 2017
Merged

Completed body #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a867ad
first pull request
silentsoundz Mar 8, 2017
e292041
testing git
silentsoundz Mar 8, 2017
9764372
driver swap
silentsoundz Mar 8, 2017
28e3c9c
finish structure body and leads
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
161 changes: 104 additions & 57 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,17 @@
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<header>
<header id="headings-section">
<h1 class="section-title">Headings</h1>

<div class="breakdown">
<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">
</div>

<div class="sample-text">
<h1 class="headings">h1. Vast Quoll</h1>
<h2 class="headings">h2. Vast Quoll</h2>
<h3 class="headings">h3. Vast Quoll</h3>
Expand All @@ -22,74 +25,118 @@ <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>
<div class="sample-code">
<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;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>
<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;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>
<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;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>
</code>
</div>

<!--
<div class="secondary-text">
<h2 class="section-title"><small>Secondary Headings</small></h1>
<div class="secondary-headings">
<h2 class="section-title"><small>Secondary Headings</small></h2>
<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>
Copy link

@pllearns pllearns Mar 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you going to implement this code at a later time?

Copy link
Collaborator

@silentsoundz silentsoundz Mar 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are not sure if we are using it but don't want to delete yet.

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

</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>

<header id="body-copy">
<div id="body-text">
<h1 class="section-title">Body copy</h1>

<div class="breakdown">
<p>Vast CSS global default <!--
--><code class="element-in-text">font-size</code> is <!--
Copy link

@pllearns pllearns Mar 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these commented arrows part of the demo?

--><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.
</p>
</div>

<div class="sample-text">
<p>Hodor! Hodor hodor, hodor; hodor hodor... Hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor hodor hodor? Hodor hodor HODOR! Hodor hodor - hodor; hodor hodor. Hodor hodor HODOR! Hodor hodor - hodor... Hodor hodor hodor; hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor hodor hodor, hodor. Hodor hodor?! </p>
<p>Hodor. Hodor hodor hodor hodor... Hodor hodor hodor. Hodor hodor - hodor; hodor HODOR hodor, hodor hodor?! Hodor hodor, hodor. Hodor hodor; hodor hodor hodor hodor. Hodor. Hodor HODOR hodor, hodor hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? Hodor. Hodor hodor; hodor hodor, hodor. Hodor hodor. Hodor! Hodor hodor, hodor - HODOR hodor, hodor hodor; hodor hodor, hodor, hodor hodor. </p>
<p>Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor; hodor hodor - hodor? Hodor! Hodor hodor, hodor... Hodor hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor... Hodor hodor hodor hodor; hodor hodor - hodor, hodor, hodor hodor. Hodor hodor HODOR! Hodor hodor... Hodor hodor HODOR hodor, hodor hodor; hodor hodor, hodor. Hodor hodor?! Hodor, hodor. Hodor. Hodor, hodor; hodor hodor; hodor hodor. Hodor. Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor, hodor. Hodor hodor hodor. </p>
</div>

<div class="sample-code">
<p>
<span class="element-color">&lt;p&gt;</span><!--
-->...<!--
--><span class="element-color">&lt;/p&gt;</span>
</p>
</div>
</div>

<div id="lead-body-copy">
<h2 class = "section-title">Lead body copy</h2>

<div class="breakdown">
<p>Make a paragraph stand out by adding <code class = "class-name">.lead</code>.</p>
</div>

<div class="sample-text">
<p class="lead">Post-ironic shoreditch chambray whatever fixie, butcher crucifix cronut migas vexillologist microdosing flannel beard. Vinyl cold-pressed echo park pickled, venmo paleo kogi whatever. Organic pitchfork drinking vinegar, microdosing pinterest stumptown live-edge. Chambray green juice fingerstache drinking vinegar. Waistcoat truffaut mlkshk scenester, fingerstache vape yuccie single-origin coffee flannel quinoa man braid polaroid four dollar toast deep v. Glossier cardigan franzen slow-carb kombucha banh mi. Vexillologist mixtape stumptown small batch vinyl, intelligentsia snackwave synth thundercats af unicorn fap ramps seitan.</p>
</div>

<div class="sample-code">
<p>
<span class="element-color">&lt;p</span>
<span class="class">class=</span><!--
--><span class="class-name">"lead"</span><!--
--><span class="element-color">&gt;</span><!--
-->...<!--
--><span class="element-color">&lt;/p&gt;</span>
</p>
</div>
</header>
</body>
</html>
11 changes: 11 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
p {
font-size: 13px;
line-height: 1.5;
margin-bottom: 10px;
}

.section-title {
color: blue;
Expand Down Expand Up @@ -25,3 +30,9 @@
.class {
color: green;
}

.lead {
font-family: sans-serif;
font-size: 16px;
font-weight: lighter;
}