add feature list

This commit is contained in:
Nicolas Cusan
2019-01-10 17:40:22 +01:00
parent 160d753e35
commit cbc56ec065
2 changed files with 55 additions and 2 deletions

View File

@@ -18,6 +18,29 @@
your html.
</h2>
<ul class="features">
<li>
Ensures consistency across browsers (thanks
<a href="http://necolas.github.io/normalize.css/">normalize.css</a>)
</li>
<li>Resets spacing (margin &amp; padding)</li>
<li>Resets font-size and line-height</li>
<li>
Prevents the necessity of reseting defaults styles when authoring
stylesheets
</li>
<li>
Prevents style inspector bloat by only targeting what is necessary
</li>
<li>Contributes to the separation of presentation and semantics</li>
<li>
Works well with all kind of styling approaches, atomic libraries like
<a href="https://tachyons.io/">tachyons</a>, component based styling
like css-in-js in <a href="https://reactjs.org">React</a>, good 'ol
css, ...
</li>
</ul>
<a class="btn" href="https://github.com/nicolas-cusan/destyle.css">
Docs / Github
</a>

View File

@@ -12,7 +12,7 @@ body {
flex-direction: column;
}
/* General
/* Home
========================================================== */
.container {
@@ -36,7 +36,7 @@ body {
.sub-title {
font-size: 1.4em;
margin-bottom: 70px;
margin-bottom: 50px;
}
.btn {
@@ -53,6 +53,30 @@ body {
margin-left: 10px;
}
.features {
margin-bottom: 60px;
}
.features li {
margin-bottom: 10px;
position: relative;
padding-left: 30px;
}
.features li::before {
content: '️️☑️';
position: absolute;
top: 0.2em;
left: 0;
font-size: 90%;
}
.features a {
text-decoration: underline;
}
/* Footer
========================================================== */
.footer {
background-color: #f4f4f4;
text-align: center;
@@ -170,6 +194,12 @@ body {
margin-bottom: 4px;
}
.compare-title a:active,
.compare-title a:focus,
.compare-title a:hover {
color: dodgerblue;
}
@media (min-width: 750px) {
.compare-title {
margin-bottom: 0;