deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-01 13:32:42 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #78 from ilhamwibawa/feature-article

Browse source 
Feature article
This commit is contained in:
Rhyne 2017-11-25 13:43:29 -05:00 committed by GitHub
parent f9a867e71f 41a4f162de
commit 50e6c2ddc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
index.html
View file

@ -63,6 +63,7 @@
<li><a href="#utilities">Utilities</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#article">Article</a></li>
</ul>
</div>
@ -1076,6 +1077,47 @@ function add(x, y) {
&lt;/div&gt;</pre>
</div>
</div>
<div id="article" class="section">
<h2>Article</h2>
<article class="article">
<h1 class="article-title"><a href="">Article Title</a></h1>
<p class="article-meta">Written by <a href="#">Super User</a> on 24 November 2017. Posted in <a href="#">Blog</a></p>
<p class="text-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellendus excepturi, consequatur illo rerum, non sint asperiores dolore sapiente, vitae blanditiis. Officiis at quaerat modi earum, fugiat magni impedit, aperiam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?</p>
<div class="row">
<button>Read More</button>
<button>5 Comments</button>
</div>
</article>
<div class="docs">
<pre>
&lt;article class="article"&gt;
&lt;h1 class="article-title"&gt;&lt;a href=""&gt;Article Title&lt;/a&gt;&lt;/h1&gt;
&lt;p class="article-meta"&gt;Written by &lt;a href="#"&gt;Super User&lt;/a&gt;&lt;/p&gt;
&lt;p class="text-lead"&gt; Lorem... &lt;/p&gt;
&lt;p&gt;Lorem...&lt;/p&gt;
&lt;div class="row"&gt;
&lt;button&gt;Read More&lt;/button&gt;
&lt;button&gt;5 Comments&lt;/button&gt;
&lt;/div&gt;
&lt;/article&gt;
</pre>
</div>
</div>
<div class="section">
<h2 id="download">Download and Link</h2>
<h4>Download</h4>

26
src/article.less Normal file
View file

@ -0,0 +1,26 @@
article {
.article-title {
font-size: 3rem;
}
.article-meta {
font-size: 15px;
color: @muted;
a {
color: @muted-text;
background-image: none;
&:hover {
color: @light-dark;
}
}
}
.text-lead {
font-size: 30px;
line-height: 1.3;
margin: 35px 0px;
}
}

1
src/styles.less
View file

@ -17,3 +17,4 @@
@import (less) "./cards.less";
@import (less) "./badges.less";
@import (less) "./alerts.less";
@import (less) "./article.less";