mirror of
https://github.com/picturepan2/instagram.css
synced 2024-05-18 13:26:37 +02:00
Update Docs page and add getting started section
This commit is contained in:
Yan Zhu
parent
e3df33fc12
commit
c24e414a9c
|
|
@ -1,15 +1,14 @@
|
|||
/*! Instagram.css v0.1.3 | MIT License | github.com/picturepan2/instagram.css */
|
||||
/*! Instagram.css v0.1.4 | MIT License | github.com/picturepan2/instagram.css */
|
||||
.version::after {
|
||||
content: "0.1.3";
|
||||
content: "0.1.4";
|
||||
}
|
||||
|
||||
/* Core style */
|
||||
.section-hero {
|
||||
padding: 1rem .5rem;
|
||||
padding: 1.5rem .5rem;
|
||||
}
|
||||
|
||||
.section-ad {
|
||||
background: #f0f1f4;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -34,13 +33,20 @@
|
|||
}
|
||||
|
||||
.section-filters .card-image img {
|
||||
-webkit-border-radius: .1rem;
|
||||
-moz-border-radius: .1rem;
|
||||
border-radius: .1rem;
|
||||
-webkit-border-radius: .2rem;
|
||||
-moz-border-radius: .2rem;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.section-filters .c-select-all {
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
-ms-user-select: all;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
color: #acb3c2;
|
||||
color: #bcc3ce;
|
||||
padding: 1.8rem .75rem 1rem .75rem;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -50,25 +56,84 @@
|
|||
}
|
||||
|
||||
.section-footer a {
|
||||
color: #727e96;
|
||||
color: #66758c;
|
||||
}
|
||||
|
||||
.grid-hero {
|
||||
letter-spacing: -.021em;
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
padding-top: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid-hero h1 {
|
||||
color: #454d5d;
|
||||
color: #303742;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.grid-hero h2 {
|
||||
color: #454d5d;
|
||||
font-size: .8rem;
|
||||
color: #3b4351;
|
||||
font-size: .9rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.docs-ad {
|
||||
background: #f7f8f9;
|
||||
-webkit-border-radius: .2rem;
|
||||
-moz-border-radius: .2rem;
|
||||
border-radius: .2rem;
|
||||
display: block;
|
||||
margin: 2rem 0;
|
||||
padding: .5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.docs-ad ins {
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.docs-ad .carbon-wrap .carbon-img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.docs-ad .carbon-wrap .carbon-text {
|
||||
color: #66758c;
|
||||
display: block;
|
||||
font-size: .6rem;
|
||||
}
|
||||
|
||||
.docs-ad .carbon-poweredby {
|
||||
color: #bcc3ce;
|
||||
font-size: .6rem;
|
||||
}
|
||||
|
||||
.code .hljs-tag {
|
||||
color: #455060;
|
||||
}
|
||||
|
||||
.code .hljs-comment {
|
||||
color: #bcc3ce;
|
||||
}
|
||||
|
||||
.code .hljs-title,
|
||||
.code .hljs-class,
|
||||
.code .hljs-string {
|
||||
color: #5755d9;
|
||||
}
|
||||
|
||||
.code .hljs-name,
|
||||
.code .hljs-attribute,
|
||||
.code .hljs-variable,
|
||||
.code .hljs-keyword,
|
||||
.code .hljs-built_in {
|
||||
color: #d73e48;
|
||||
}
|
||||
|
||||
.code .hljs-value,
|
||||
.code .hljs-hexcolor {
|
||||
color: #455060;
|
||||
}
|
||||
2
assets/css/demo.min.css
vendored
2
assets/css/demo.min.css
vendored
|
|
@ -1 +1 @@
|
|||
/*! Instagram.css v0.1.3 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.3"}.section-hero{padding:1rem .5rem}.section-ad{background:#f0f1f4;padding:1rem 0;text-align:center}.section-filters .container{padding-bottom:3rem;padding-top:2rem}.section-filters .column{padding:1rem}.section-filters .card{border:0}.section-filters .card-image{-webkit-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);-moz-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);box-shadow:0 .3rem 2rem rgba(51,51,51,.15)}.section-filters .card-image img{-webkit-border-radius:.1rem;-moz-border-radius:.1rem;border-radius:.1rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative}.section-footer p{line-height:1}.section-footer a{color:#727e96}.grid-hero{letter-spacing:-.021em;padding-bottom:2rem;padding-top:2rem;position:relative}.grid-hero h1{color:#454d5d;font-size:1.6rem;margin-bottom:1rem}.grid-hero h2{color:#454d5d;font-size:.8rem;font-weight:400;margin-bottom:1.5rem}
|
||||
/*! Instagram.css v0.1.4 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.4"}.section-hero{padding:1.5rem .5rem}.section-ad{padding:1rem 0;text-align:center}.section-filters .container{padding-bottom:3rem;padding-top:2rem}.section-filters .column{padding:1rem}.section-filters .card{border:0}.section-filters .card-image{-webkit-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);-moz-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);box-shadow:0 .3rem 2rem rgba(51,51,51,.15)}.section-filters .card-image img{-webkit-border-radius:.2rem;-moz-border-radius:.2rem;border-radius:.2rem}.section-filters .c-select-all{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.section-footer{color:#bcc3ce;padding:1.8rem .75rem 1rem .75rem;position:relative}.section-footer p{line-height:1}.section-footer a{color:#66758c}.grid-hero{letter-spacing:-.021em;padding-bottom:2rem;padding-top:3rem;position:relative}.grid-hero h1{color:#303742;font-size:1.6rem;font-weight:600;margin-bottom:1rem}.grid-hero h2{color:#3b4351;font-size:.9rem;font-weight:400;margin-bottom:1.5rem}.docs-ad{background:#f7f8f9;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;border-radius:.2rem;display:block;margin:2rem 0;padding:.5rem;position:relative}.docs-ad ins{line-height:1;vertical-align:middle}.docs-ad .carbon-wrap .carbon-img{display:block}.docs-ad .carbon-wrap .carbon-text{color:#66758c;display:block;font-size:.6rem}.docs-ad .carbon-poweredby{color:#bcc3ce;font-size:.6rem}.code .hljs-tag{color:#455060}.code .hljs-comment{color:#bcc3ce}.code .hljs-class,.code .hljs-string,.code .hljs-title{color:#5755d9}.code .hljs-attribute,.code .hljs-built_in,.code .hljs-keyword,.code .hljs-name,.code .hljs-variable{color:#d73e48}.code .hljs-hexcolor,.code .hljs-value{color:#455060}
|
||||
3660
assets/css/spectre.css
Executable file
3660
assets/css/spectre.css
Executable file
File diff suppressed because it is too large
Load diff
2
assets/css/spectre.min.css
vendored
Normal file → Executable file
2
assets/css/spectre.min.css
vendored
Normal file → Executable file
File diff suppressed because one or more lines are too long
|
|
@ -8,11 +8,10 @@
|
|||
|
||||
/* Core style */
|
||||
.section-hero {
|
||||
padding: 1rem .5rem;
|
||||
padding: 1.5rem .5rem;
|
||||
}
|
||||
|
||||
.section-ad {
|
||||
background: $bg-color-dark;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -35,9 +34,13 @@
|
|||
box-shadow: 0 .3rem 2rem rgba(#333, .15);
|
||||
|
||||
img {
|
||||
border-radius: .1rem;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.c-select-all {
|
||||
user-select: all;
|
||||
}
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
|
|
@ -57,19 +60,80 @@
|
|||
.grid-hero {
|
||||
letter-spacing: -.021em;
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
padding-top: 3rem;
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
color: $dark-color;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $dark-color;
|
||||
font-size: .8rem;
|
||||
color: lighten($dark-color, 5%);
|
||||
font-size: .9rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-ad {
|
||||
background: $bg-color;
|
||||
border-radius: .2rem;
|
||||
display: block;
|
||||
margin: 2rem 0;
|
||||
padding: .5rem;
|
||||
position: relative;
|
||||
|
||||
ins {
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.carbon-wrap {
|
||||
.carbon-img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carbon-text {
|
||||
color: $gray-color-dark;
|
||||
display: block;
|
||||
font-size: .6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
color: $gray-color;
|
||||
font-size: .6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
.hljs-tag {
|
||||
color: lighten($dark-color, 10%);
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: $gray-color;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-class,
|
||||
.hljs-string {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-attribute,
|
||||
.hljs-variable,
|
||||
.hljs-keyword,
|
||||
.hljs-built_in {
|
||||
color: $code-color;
|
||||
}
|
||||
|
||||
.hljs-value,
|
||||
.hljs-hexcolor {
|
||||
color: lighten($dark-color, 10%);
|
||||
}
|
||||
}
|
||||
2
dist/instagram.css
vendored
2
dist/instagram.css
vendored
|
|
@ -1,4 +1,4 @@
|
|||
/*! Instagram.css v0.1.3 | MIT License | github.com/picturepan2/instagram.css */
|
||||
/*! Instagram.css v0.1.4 | MIT License | github.com/picturepan2/instagram.css */
|
||||
[class*="filter"] {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
2
dist/instagram.min.css
vendored
2
dist/instagram.min.css
vendored
File diff suppressed because one or more lines are too long
245
index.html
245
index.html
|
|
@ -9,21 +9,22 @@
|
|||
<!-- Spectre.css CSS -->
|
||||
<link rel="stylesheet" href="assets/css/spectre.min.css">
|
||||
<link rel="stylesheet" href="assets/css/demo.min.css">
|
||||
<link rel="stylesheet" href="dist/instagram.css">
|
||||
<!-- Instagram.css CSS -->
|
||||
<link rel="stylesheet" href="dist/instagram.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="section section-hero">
|
||||
<div class="section section-hero bg-gray">
|
||||
<div id="overview" class="grid-hero container grid-lg text-center">
|
||||
<h1>Instagram.css</h1>
|
||||
<h2>Complete set of Instagram filters in pure CSS</h2>
|
||||
<p>
|
||||
<a href="https://github.com/picturepan2/instagram.css" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
|
||||
<a href="https://www.paypal.me/picturepan2" target="_blank" class="btn btn-link btn-lg">PayPal Donate</a>
|
||||
<a href="https://www.paypal.me/picturepan2" target="_blank" class="btn btn-primary btn-lg">PayPal Donate</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section section-ad">
|
||||
<div class="section section-ad bg-gray">
|
||||
<div class="hide-md">
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg -->
|
||||
|
|
@ -48,467 +49,529 @@
|
|||
</div>
|
||||
|
||||
<div class="section section-filters">
|
||||
<div class="container grid-xl text-center">
|
||||
<div id="overview" class="grid-hero container grid-lg">
|
||||
<h1 class="text-center">Getting started</h1>
|
||||
<p>Download the compiled and minified <a href="https://github.com/picturepan2/instagram.css" target="_blank">Instagram.css files</a>. Include instagram.css located in /dist in your website or Web app <head> part.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"instagram.min.css"</span>></span>
|
||||
</code></pre>
|
||||
<p>All filters use the same HTML structure with different <code>filter-[filter-name]</code> classes.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-[filter-name]"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/instagram.jpg"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section section-ad bg-gray">
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section section-filters">
|
||||
<div class="container grid-lg text-center">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Normal</span>
|
||||
<div class="h5">Normal</div>
|
||||
<div class="text-gray c-select-all"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-1977">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">1977</span>
|
||||
<div class="h5">1977</div>
|
||||
<div class="text-gray c-select-all">filter-1977</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-aden">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Aden</span>
|
||||
<div class="h5">Aden</div>
|
||||
<div class="text-gray c-select-all">filter-aden</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-amaro">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Amaro</span>
|
||||
<div class="h5">Amaro</div>
|
||||
<div class="text-gray c-select-all">filter-amaro</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-ashby">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Ashby</span>
|
||||
<div class="h5">Ashby</div>
|
||||
<div class="text-gray c-select-all">filter-ashby</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-brannan">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Brannan</span>
|
||||
<div class="h5">Brannan</div>
|
||||
<div class="text-gray c-select-all">filter-brannan</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-brooklyn">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Brooklyn</span>
|
||||
<div class="h5">Brooklyn</div>
|
||||
<div class="text-gray c-select-all">filter-brooklyn</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-charmes">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Charmes</span>
|
||||
<div class="h5">Charmes</div>
|
||||
<div class="text-gray c-select-all">filter-charmes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-clarendon">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Clarendon</span>
|
||||
<div class="h5">Clarendon</div>
|
||||
<div class="text-gray c-select-all">filter-clarendon</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-crema">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Crema</span>
|
||||
<div class="h5">Crema</div>
|
||||
<div class="text-gray c-select-all">filter-crema</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-dogpatch">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Dogpatch</span>
|
||||
<div class="h5">Dogpatch</div>
|
||||
<div class="text-gray c-select-all">filter-dogpatch</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-earlybird">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Earlybird</span>
|
||||
<div class="h5">Earlybird</div>
|
||||
<div class="text-gray c-select-all">filter-earlybird</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-gingham">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Gingham</span>
|
||||
<div class="h5">Gingham</div>
|
||||
<div class="text-gray c-select-all">filter-gingham</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-ginza">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Ginza</span>
|
||||
<div class="h5">Ginza</div>
|
||||
<div class="text-gray c-select-all">filter-ginza</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-hefe">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Hefe</span>
|
||||
<div class="h5">Hefe</div>
|
||||
<div class="text-gray c-select-all">filter-hefe</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-helena">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Helena</span>
|
||||
<div class="h5">Helena</div>
|
||||
<div class="text-gray c-select-all">filter-helena</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-hudson">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Hudson</span>
|
||||
<div class="h5">Hudson</div>
|
||||
<div class="text-gray c-select-all">filter-hudson</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-inkwell">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Inkwell</span>
|
||||
<div class="h5">Inkwell</div>
|
||||
<div class="text-gray c-select-all">filter-inkwell</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-kelvin">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Kelvin</span>
|
||||
<div class="h5">Kelvin</div>
|
||||
<div class="text-gray c-select-all">filter-kelvin</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-juno">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Juno</span>
|
||||
<div class="h5">Juno</div>
|
||||
<div class="text-gray c-select-all">filter-juno</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-lark">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Lark</span>
|
||||
<div class="h5">Lark</div>
|
||||
<div class="text-gray c-select-all">filter-lark</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-lofi">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Lo-Fi</span>
|
||||
<div class="h5">Lo-Fi</div>
|
||||
<div class="text-gray c-select-all">filter-lofi</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-ludwig">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Ludwig</span>
|
||||
<div class="h5">Ludwig</div>
|
||||
<div class="text-gray c-select-all">filter-ludwig</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-maven">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Maven</span>
|
||||
<div class="h5">Maven</div>
|
||||
<div class="text-gray c-select-all">filter-maven</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-mayfair">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Mayfair</span>
|
||||
<div class="h5">Mayfair</div>
|
||||
<div class="text-gray c-select-all">filter-mayfair</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-moon">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Moon</span>
|
||||
<div class="h5">Moon</div>
|
||||
<div class="text-gray c-select-all">filter-moon</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-nashville">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Nashville</span>
|
||||
<div class="h5">Nashville</div>
|
||||
<div class="text-gray c-select-all">filter-nashville</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-perpetua">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Perpetua</span>
|
||||
<div class="h5">Perpetua</div>
|
||||
<div class="text-gray c-select-all">filter-perpetua</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-poprocket">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive"/>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Poprocket</span>
|
||||
<div class="h5">Poprocket</div>
|
||||
<div class="text-gray c-select-all">filter-poprocket</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-reyes">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Reyes</span>
|
||||
<div class="h5">Reyes</div>
|
||||
<div class="text-gray c-select-all">filter-reyes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-rise">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Rise</span>
|
||||
<div class="h5">Rise</div>
|
||||
<div class="text-gray c-select-all">filter-rise</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-sierra">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Sierra</span>
|
||||
<div class="h5">Sierra</div>
|
||||
<div class="text-gray c-select-all">filter-sierra</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-skyline">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Skyline</span>
|
||||
<div class="h5">Skyline</div>
|
||||
<div class="text-gray c-select-all">filter-skyline</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-slumber">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Slumber</span>
|
||||
<div class="h5">Slumber</div>
|
||||
<div class="text-gray c-select-all">filter-slumber</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-stinson">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Stinson</span>
|
||||
<div class="h5">Stinson</div>
|
||||
<div class="text-gray c-select-all">filter-stinson</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-sutro">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Sutro</span>
|
||||
<div class="h5">Sutro</div>
|
||||
<div class="text-gray c-select-all">filter-sutro</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-toaster">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Toaster</span>
|
||||
<div class="h5">Toaster</div>
|
||||
<div class="text-gray c-select-all">filter-toaster</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-valencia">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Valencia</span>
|
||||
<div class="h5">Valencia</div>
|
||||
<div class="text-gray c-select-all">filter-valencia</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-vesper">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Vesper</span>
|
||||
<div class="h5">Vesper</div>
|
||||
<div class="text-gray c-select-all">filter-vesper</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-walden">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Walden</span>
|
||||
<div class="h5">Walden</div>
|
||||
<div class="text-gray c-select-all">filter-walden</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-willow">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Willow</span>
|
||||
<div class="h5">Willow</div>
|
||||
<div class="text-gray c-select-all">filter-willow</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-xpro-ii">
|
||||
<img src="assets/img/instagram.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">X-Pro II</span>
|
||||
<div class="h5">X-Pro II</div>
|
||||
<div class="text-gray c-select-all">filter-xpro-ii</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -517,7 +580,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section section-ad">
|
||||
<div class="section section-ad bg-gray">
|
||||
<div class="hide-md">
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg -->
|
||||
|
|
@ -541,7 +604,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="section section-footer">
|
||||
<footer class="section section-footer bg-gray">
|
||||
<div id="copyright" class="grid-footer container grid-lg text-center">
|
||||
<p><a href="https://github.com/picturepan2/instagram.css" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Spectre.css</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
|
||||
<p>Code with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/devices.css/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
|
|
|
|||
4166
package-lock.json
generated
Normal file
4166
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,21 +1,32 @@
|
|||
// Version
|
||||
$version: "0.1.3";
|
||||
$version: "0.1.4";
|
||||
|
||||
// Core variables
|
||||
$primary-color: #5764c6 !default;
|
||||
// Core colors
|
||||
$primary-color: #5755d9 !default;
|
||||
$primary-color-dark: darken($primary-color, 3%) !default;
|
||||
$primary-color-light: lighten($primary-color, 3%) !default;
|
||||
$secondary-color: lighten($primary-color, 40%) !default;
|
||||
$secondary-color: lighten($primary-color, 37.5%) !default;
|
||||
$secondary-color-dark: darken($secondary-color, 3%) !default;
|
||||
$secondary-color-light: lighten($secondary-color, 3%) !default;
|
||||
|
||||
// Gray colors
|
||||
$dark-color: #454d5d !default;
|
||||
$dark-color: #303742 !default;
|
||||
$light-color: #fff !default;
|
||||
$gray-color: lighten($dark-color, 40%) !default;
|
||||
$gray-color-dark: darken($gray-color, 20%) !default;
|
||||
$gray-color: lighten($dark-color, 55%) !default;
|
||||
$gray-color-dark: darken($gray-color, 30%) !default;
|
||||
$gray-color-light: lighten($gray-color, 20%) !default;
|
||||
|
||||
$bg-color: lighten($dark-color, 66%) !default;
|
||||
$border-color: lighten($dark-color, 65%) !default;
|
||||
$border-color-dark: darken($border-color, 10%) !default;
|
||||
$bg-color: lighten($dark-color, 75%) !default;
|
||||
$bg-color-dark: darken($bg-color, 3%) !default;
|
||||
$bg-color-light: $light-color !default;
|
||||
|
||||
// Other colors
|
||||
$code-color: #d73e48 !default;
|
||||
$highlight-color: #ffe9b3 !default;
|
||||
$body-bg: $bg-color-light !default;
|
||||
$body-font-color: lighten($dark-color, 5%) !default;
|
||||
$link-color: $primary-color !default;
|
||||
$link-color-dark: darken($link-color, 10%) !default;
|
||||
$link-color-light: lighten($link-color, 10%) !default;
|
||||
|
|
|
|||
Loading…
Reference in a new issue