Improves responsive rules

This commit is contained in:
Zeno Rocha 2015-09-20 18:04:38 -07:00
parent 91278ec144
commit cd58872ec5
2 changed files with 26 additions and 5 deletions

View File

@ -27,14 +27,15 @@ body {
font-size: 64px;
font-weight: 900;
letter-spacing: -1px;
margin: 0 0 20px;
margin: 0 20px 20px;
}
.subtitle {
color: #16a085;
font-size: 27px;
font-weight: 400;
margin: 0 0 20px;
line-height: 30px;
margin: 0 20px 20px;
}
.subtitle + .subtitle {
@ -53,7 +54,8 @@ body {
.wrap {
margin: 0 auto 90px;
width: 500px;
max-width: 540px;
padding: 0 20px;
}
p {
@ -149,7 +151,7 @@ code {
border: 1px solid #ddd;
clear: both;
margin-top: -20px;
padding: 20px 5px 0;
padding: 20px 0 0;
}
/* Live example
@ -236,3 +238,21 @@ textarea {
@keyframes love {
to {transform: scale(1.2);}
}
/* ==========================================================================
Responsive
========================================================================== */
@media screen and (max-width: 540px) {
.title {
font-size: 48px;
}
.subtitle {
font-size: 22px;
}
.credits {
font-size: 22px;
}
}

View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>clipboard.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
<link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
@ -38,7 +39,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<h1 id="setup">Setup</h1>
<p>First, include the script located on the <code>dist</code> folder</p>
<p>First, include the script located on the <code>dist</code> folder.</p>
<pre><code class="html">&lt;script src="dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>