mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Improves spacing between elements and typography
This commit is contained in:
115
demo.css
115
demo.css
@ -1,5 +1,5 @@
|
|||||||
body {
|
body {
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient {
|
.gradient {
|
||||||
@ -12,27 +12,39 @@ body {
|
|||||||
background: linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
|
background: linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd964', endColorstr='#5ac8fa', GradientType=1 );
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd964', endColorstr='#5ac8fa', GradientType=1 );
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 36px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
Header
|
Header
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding-top: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 64px;
|
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: 700;
|
font-size: 64px;
|
||||||
font-family: 'Montserrat', sans-serif;
|
font-weight: 900;
|
||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
|
margin: 0 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 27px;
|
|
||||||
color: #16a085;
|
color: #16a085;
|
||||||
|
font-size: 27px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-family: 'Montserrat', sans-serif;
|
margin: 0 0 20px;
|
||||||
letter-spacing: -1px;
|
}
|
||||||
|
|
||||||
|
.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 {
|
.wrap {
|
||||||
margin: 0 auto 60px;
|
margin: 0 auto 90px;
|
||||||
width: 500px;
|
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 {
|
h1 {
|
||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-top: 40px;
|
margin: 40px 0;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
/* Code
|
||||||
color: #333;
|
========================================================================== */
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.6;
|
pre code {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
@ -73,26 +108,6 @@ code {
|
|||||||
font-weight: normal;
|
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
|
/* Example
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@ -131,6 +146,24 @@ pre code {
|
|||||||
padding: 20px 5px 0;
|
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
|
/* Support
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@ -141,7 +174,7 @@ pre code {
|
|||||||
.support li {
|
.support li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 10px 10px 0;
|
margin: 5px 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.support p {
|
.support p {
|
||||||
@ -152,22 +185,26 @@ pre code {
|
|||||||
Footer
|
Footer
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 36px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.credits {
|
.credits {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-family: 'Montserrat', sans-serif;
|
font-family: 'Lato', sans-serif;
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
color: #16a085;
|
color: #16a085;
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits-link {
|
.credits-link {
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
border-color: white;
|
||||||
border-bottom: 1px dotted white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.credits-link:hover,
|
.credits-link:hover,
|
||||||
.credits-link:focus {
|
.credits-link:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
border-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.love {
|
.love {
|
||||||
|
16
index.html
16
index.html
@ -7,14 +7,20 @@
|
|||||||
<link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
|
<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/octicons/octicons/octicons.css">
|
||||||
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.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">
|
<link rel="stylesheet" href="demo.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="gradient text-center">
|
<header class="header gradient text-center">
|
||||||
<h1 class="title">clipboard.js</h1>
|
<h1 class="title">clipboard.js</h1>
|
||||||
<h2 class="subtitle">A modern approach to copy & cut to the clipboard</h2>
|
<h2 class="subtitle">A modern approach to copy & 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&repo=clipboard.js&type=watch&count=true&size=large"
|
||||||
|
allowtransparency="true" frameborder="0" scrolling="0" width="152" height="30"></iframe>
|
||||||
|
<iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&repo=clipboard.js&type=fork&count=true&size=large"
|
||||||
|
allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"></iframe>
|
||||||
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="wrap">
|
<main class="wrap">
|
||||||
@ -42,7 +48,7 @@
|
|||||||
|
|
||||||
<h1>Usage</h1>
|
<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>
|
<h3>Copy text from attribute</h3>
|
||||||
|
|
||||||
@ -130,7 +136,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="gradient text-center">
|
<footer class="footer gradient text-center">
|
||||||
<p class="credits">
|
<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>
|
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>
|
</p>
|
||||||
|
Reference in New Issue
Block a user