mirror/clipboard.js
1
0
Fork 0
mirror of https://github.com/zenorocha/clipboard.js.git synced 2023-08-10 21:12:48 +03:00
Code Issues Projects Releases Wiki Activity

Improves spacing between elements and typography

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-19 03:14:52 -07:00
parent 473e6768e4
commit 702d353447
2 changed files with 87 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
demo.css
View File

@ -1,5 +1,5 @@
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: 'Lato', sans-serif;
}
.gradient {
@ -12,27 +12,39 @@ body {
background: linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd964', endColorstr='#5ac8fa', GradientType=1 );
margin: 0 auto;
padding: 36px 0;
}
/* ==========================================================================
Header
========================================================================== */
.header {
padding-top: 92px;
}
.title {
font-size: 64px;
color: white;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-size: 64px;
font-weight: 900;
letter-spacing: -1px;
margin: 0 0 20px;
}
.subtitle {
font-size: 27px;
color: #16a085;
font-size: 27px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
letter-spacing: -1px;
margin: 0 0 20px;
}
.subtitle + .subtitle {
color: white;
}
.gh-btns {
margin: 92px 0 0;
background: rgba(0, 0, 0, .1);
padding: 20px 0 10px;
}
/* ==========================================================================
@ -40,24 +52,47 @@ body {
========================================================================== */
.wrap {
margin: 0 auto 60px;
margin: 0 auto 90px;
width: 500px;
}
p {
color: #333;
font-size: 18px;
line-height: 1.7;
}
a {
color: #1BC1A1;
border-bottom: 1px dotted #1BC1A1;
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
opacity: .7;
}
h1 {
margin-top: 80px;
}
h3 {
color: #333;
margin-top: 40px;
margin: 40px 0;
font-size: 18px;
font-weight: 300;
text-align: center;
}
p {
color: #333;
font-size: 16px;
line-height: 1.6;
/* Code
========================================================================== */
pre code {
font-size: 14px;
line-height: 20px;
}
code {
@ -73,26 +108,6 @@ code {
font-weight: normal;
}
.form-actions {
margin-top: 15px;
}
.form-actions .btn {
float: left;
}
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
pre code {
font-size: 14px;
line-height: 20px;
}
/* Example
========================================================================== */
@ -131,6 +146,24 @@ pre code {
padding: 20px 5px 0;
}
/* Live example
========================================================================== */
.form-actions {
margin-top: 15px;
}
.form-actions .btn {
float: left;
}
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
/* Support
========================================================================== */
@ -141,7 +174,7 @@ pre code {
.support li {
display: inline-block;
text-align: center;
margin: 10px 10px 0;
margin: 5px 8px 0;
}
.support p {
@ -152,22 +185,26 @@ pre code {
Footer
========================================================================== */
.footer {
padding: 36px 0;
}
.credits {
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #16a085;
}
.credits-link {
color: white;
text-decoration: none;
border-bottom: 1px dotted white;
border-color: white;
}
.credits-link:hover,
.credits-link:focus {
text-decoration: none;
border-color: white;
}
.love {

16
index.html
View File

@ -7,14 +7,20 @@
<link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
<link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<header class="gradient text-center">
<header class="header gradient text-center">
<h1 class="title">clipboard.js</h1>
<h2 class="subtitle">A modern approach to copy &amp; cut to the clipboard</h2>
<h2 class="subtitle" style="color: white">No Flash. No dependencies. Just 2kb</h2>
<h2 class="subtitle">No Flash. No dependencies. Just 2kb</h2>
<p class="gh-btns">
<iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&amp;repo=clipboard.js&amp;type=watch&amp;count=true&amp;size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="152" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&amp;repo=clipboard.js&amp;type=fork&amp;count=true&amp;size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"></iframe>
</p>
</header>
<main class="wrap">
@ -42,7 +48,7 @@
<h1>Usage</h1>
<p>There are different options for you to use and they all take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a>.</p>
<p>We're living a <em>declarative renaissance</em>, that's why we decided to take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a> for better usability.</p>
<h3>Copy text from attribute</h3>
@ -130,7 +136,7 @@
</ul>
</main>
<footer class="gradient text-center">
<footer class="footer gradient text-center">
<p class="credits">
Made with <span class="love">♥</span> by <a class="credits-link" href="http://zenorocha.com/">Zeno Rocha</a> under <a class="credits-link" href="http://zenorocha.mit-license.org/">MIT license</a>
</p>