mirror of
https://github.com/picturepan2/instagram.css
synced 2024-06-07 08:22:28 +02:00
Update the demo page
This commit is contained in:
Yan Zhu
parent
ceb7b3bbea
commit
5be9f19acd
48
README.md
48
README.md
|
|
@ -14,6 +14,54 @@ Download the compiled and minified [Instagram.css files](https://github.com/pict
|
|||
|
||||
Go to [Demo page](https://picturepan2.github.io/instagram.css/) to copy the HTML source code and paste it to anywhere you want. All filters use the same HTML structure with different `filter-[filter-name]` classes.
|
||||
|
||||
```
|
||||
<figure class="filter-[filter-name]">
|
||||
<img src="assets/img/instagram-example.jpg">
|
||||
</figure>
|
||||
```
|
||||
|
||||
## Available filters
|
||||
|
||||
- 1977: `filter-1977`
|
||||
- Aden: `filter-aden`
|
||||
- Amaro
|
||||
- Ashby
|
||||
- Brannan
|
||||
- Brooklyn: `filter-brooklyn`
|
||||
- Charmes
|
||||
- Clarendon: `filter-clarendon`
|
||||
- Crema: `filter-crema`
|
||||
- Dogpatch
|
||||
- Earlybird
|
||||
- Gingham: `filter-gingham`
|
||||
- Ginza
|
||||
- Hefe
|
||||
- Helena
|
||||
- Hudson: `filter-hudson`
|
||||
- Inkwell
|
||||
- Kelvin
|
||||
- Kuno: `filter-juno`
|
||||
- Lark: `filter-lark`
|
||||
- Lo-Fi
|
||||
- Ludwig: `filter-ludwig`
|
||||
- Maven
|
||||
- Mayfair
|
||||
- Moon: `filter-moon`
|
||||
- Nashville
|
||||
- Perpetua
|
||||
- Reyes: `filter-reyes`
|
||||
- Rise
|
||||
- Sierra
|
||||
- Skyline
|
||||
- Slumber: `filter-slumber`
|
||||
- Stinson
|
||||
- Sutro
|
||||
- Toaster
|
||||
- Valencia
|
||||
- Vesper
|
||||
- Walden: `filter-walden`
|
||||
- Willow: `filter-willow`
|
||||
- X-Pro II: `filter-xpro-ii`
|
||||
|
||||
## Custom
|
||||
|
||||
|
|
|
|||
68
assets/css/demo.css
Normal file
68
assets/css/demo.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
/*! Instagram.css v0.1.0 | MIT License | github.com/picturepan2/instagram.css */
|
||||
.version::after {
|
||||
content: "0.1.0";
|
||||
}
|
||||
|
||||
/* Core style */
|
||||
.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-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;
|
||||
}
|
||||
2
assets/css/demo.min.css
vendored
2
assets/css/demo.min.css
vendored
|
|
@ -1 +1 @@
|
|||
/*! Instagram.css v0.1.0 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.0"}.section-hero{padding:1rem .5rem}.section-ad{background:#f0f1f4;padding:1rem 0;text-align:center}.section-device .container{padding-bottom:3rem;padding-top:2rem}.section-device .anchor{color:#626fca;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0}.section-device .anchor:focus,.section-device .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.section-device .s-title{color:#454d5d;line-height:1.6rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}.section-device .s-title:hover .anchor{height:auto;width:1em}.section-device .column{padding-bottom:1rem;padding-top:1rem}.section-device .code{color:#667189}.section-device .code .com{color:#acb3c2}.section-device .code .tag{color:#5764c6}.section-device .code .atn{color:#667189}.section-device .code .atv{color:#e06870}.section-device .dots{text-align:center}.section-device .dots .dot{background:#eee;border:1px solid rgba(0,0,0,.05);border-radius:50%;display:inline-block;height:1rem;margin:0 .2rem;width: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}.device{margin:1rem auto}.section-device:nth-of-type(even){background:#f8f9fa}@media (max-width:600px){.device-imac-pro,.device-ipad-pro,.device-macbook-pro,.device-surface-studio{left:50%;transform:translateX(-50%) scale(.5)}}
|
||||
/*! Instagram.css v0.1.0 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.0"}.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-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}
|
||||
71
assets/src/demo.scss
Normal file
71
assets/src/demo.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
// Variables
|
||||
@import "../../src/variables";
|
||||
|
||||
/*! Instagram.css v#{$version} | MIT License | github.com/picturepan2/instagram.css */
|
||||
.version::after {
|
||||
content: "#{$version}";
|
||||
}
|
||||
|
||||
/* Core style */
|
||||
.section-hero {
|
||||
padding: 1rem .5rem;
|
||||
}
|
||||
|
||||
.section-ad {
|
||||
background: $bg-color-dark;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-filters {
|
||||
.container {
|
||||
padding-bottom: 3rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
box-shadow: 0 .3rem 2rem rgba(#333, .15);
|
||||
}
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
color: $gray-color;
|
||||
padding: 1.8rem .75rem 1rem .75rem;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $gray-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-hero {
|
||||
letter-spacing: -.021em;
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 2rem;
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
color: $dark-color;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $dark-color;
|
||||
font-size: .8rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
2
dist/instagram.css
vendored
2
dist/instagram.css
vendored
|
|
@ -1,4 +1,4 @@
|
|||
/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */
|
||||
/*! Instagram.css v0.1.0 | MIT License | github.com/picturepan2/instagram.css */
|
||||
[class*="filter"] {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
2
dist/instagram.min.css
vendored
2
dist/instagram.min.css
vendored
|
|
@ -1 +1 @@
|
|||
/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */[class*=filter]{position:relative}[class*=filter]::before{display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.filter-1977{-webkit-filter:sepia(.5) hue-rotate(-30deg) saturate(1.4);filter:sepia(.5) hue-rotate(-30deg) saturate(1.4)}.filter-aden{-webkit-filter:sepia(.2) brightness(1.15) saturate(1.4);filter:sepia(.2) brightness(1.15) saturate(1.4)}.filter-aden::before{background:rgba(125,105,24,.1);content:"";mix-blend-mode:multiply}.filter-brooklyn{-webkit-filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-brooklyn::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-clarendon{-webkit-filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-clarendon::before{background:rgba(127,187,227,.4);content:"";mix-blend-mode:overlay}.filter-crema{-webkit-filter:sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);filter:sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg)}.filter-crema::before{background:rgba(125,105,24,.2);content:"";mix-blend-mode:multiply}.filter-gingham{-webkit-filter:contrast(1.1) brightness(1.1);filter:contrast(1.1) brightness(1.1)}.filter-gingham::before{background:#e6e6e6;content:"";mix-blend-mode:soft-light}.filter-hudson{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg)}.filter-hudson::before{background:radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-o-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);content:"";mix-blend-mode:multiply}.filter-juno{-webkit-filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8);filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8)}.filter-juno::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-lark{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25)}.filter-ludwig{-webkit-filter:sepia(.25) contrast(1.05) brightness(1.05) saturate(2);filter:sepia(.25) contrast(1.05) brightness(1.05) saturate(2)}.filter-ludwig::before{background:rgba(125,105,24,.1);content:"";mix-blend-mode:overlay}.filter-moon{-webkit-filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35);filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35)}.filter-reyes{-webkit-filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4);filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4)}.filter-slumber{-webkit-filter:sepia(.45) contrast(.95) brightness(1.25) saturate(1.5);filter:sepia(.45) contrast(.95) brightness(1.25) saturate(1.5)}.filter-slumber::before{background:rgba(125,105,24,.25);content:"";mix-blend-mode:lighten}.filter-walden{-webkit-filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2);filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2)}.filter-willow{-webkit-filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2);filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2)}.filter-xpro-ii{-webkit-filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4);filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4)}.filter-xpro-ii::before{background:radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-o-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);content:"";mix-blend-mode:multiply}
|
||||
/*! Instagram.css v0.1.0 | MIT License | github.com/picturepan2/instagram.css */[class*=filter]{position:relative}[class*=filter]::before{display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.filter-1977{-webkit-filter:sepia(.5) hue-rotate(-30deg) saturate(1.4);filter:sepia(.5) hue-rotate(-30deg) saturate(1.4)}.filter-aden{-webkit-filter:sepia(.2) brightness(1.15) saturate(1.4);filter:sepia(.2) brightness(1.15) saturate(1.4)}.filter-aden::before{background:rgba(125,105,24,.1);content:"";mix-blend-mode:multiply}.filter-brooklyn{-webkit-filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-brooklyn::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-clarendon{-webkit-filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);filter:sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg)}.filter-clarendon::before{background:rgba(127,187,227,.4);content:"";mix-blend-mode:overlay}.filter-crema{-webkit-filter:sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);filter:sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg)}.filter-crema::before{background:rgba(125,105,24,.2);content:"";mix-blend-mode:multiply}.filter-gingham{-webkit-filter:contrast(1.1) brightness(1.1);filter:contrast(1.1) brightness(1.1)}.filter-gingham::before{background:#e6e6e6;content:"";mix-blend-mode:soft-light}.filter-hudson{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);filter:sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg)}.filter-hudson::before{background:radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-o-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 25%,rgba(25,62,167,.25) 100%);content:"";mix-blend-mode:multiply}.filter-juno{-webkit-filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8);filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8)}.filter-juno::before{background:rgba(127,187,227,.2);content:"";mix-blend-mode:overlay}.filter-lark{-webkit-filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);filter:sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25)}.filter-ludwig{-webkit-filter:sepia(.25) contrast(1.05) brightness(1.05) saturate(2);filter:sepia(.25) contrast(1.05) brightness(1.05) saturate(2)}.filter-ludwig::before{background:rgba(125,105,24,.1);content:"";mix-blend-mode:overlay}.filter-moon{-webkit-filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35);filter:brightness(1.4) contrast(.95) saturate(0) sepia(.35)}.filter-reyes{-webkit-filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4);filter:sepia(.75) contrast(.75) brightness(1.25) saturate(1.4)}.filter-slumber{-webkit-filter:sepia(.45) contrast(.95) brightness(1.25) saturate(1.5);filter:sepia(.45) contrast(.95) brightness(1.25) saturate(1.5)}.filter-slumber::before{background:rgba(125,105,24,.25);content:"";mix-blend-mode:lighten}.filter-walden{-webkit-filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2);filter:sepia(.6) contrast(.75) brightness(1.25) saturate(2)}.filter-willow{-webkit-filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2);filter:brightness(1.2) contrast(.85) saturate(.05) sepia(.2)}.filter-xpro-ii{-webkit-filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4);filter:sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4)}.filter-xpro-ii::before{background:radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-o-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-moz-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);background:-webkit-radial-gradient(circle closest-corner,transparent 0,rgba(0,0,0,.45) 100%);content:"";mix-blend-mode:multiply}
|
||||
15
gulpfile.js
15
gulpfile.js
|
|
@ -24,4 +24,19 @@ gulp.task('build', function() {
|
|||
.pipe(gulp.dest('./dist'));
|
||||
});
|
||||
|
||||
gulp.task('demo', function() {
|
||||
gulp.src('./assets/src/*.scss')
|
||||
.pipe(sass({outputStyle: 'compact', precision: 10})
|
||||
.on('error', sass.logError)
|
||||
)
|
||||
.pipe(autoprefixer())
|
||||
.pipe(csscomb())
|
||||
.pipe(gulp.dest('./assets/css'))
|
||||
.pipe(cleancss())
|
||||
.pipe(rename({
|
||||
suffix: '.min'
|
||||
}))
|
||||
.pipe(gulp.dest('./assets/css'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['build']);
|
||||
|
|
|
|||
42
index.html
42
index.html
|
|
@ -17,10 +17,9 @@
|
|||
<h1>Instagram.css</h1>
|
||||
<h2>Complete set of Instagram filters in pure CSS</h2>
|
||||
<p>
|
||||
<a href="#content" class="btn btn-primary btn-lg">Demo</a>
|
||||
<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>
|
||||
</p>
|
||||
<p><a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -48,9 +47,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content" class="section section-device">
|
||||
<div id="content" class="section section-filters">
|
||||
<div class="container grid-xl text-center">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
|
|
@ -61,6 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-1977">
|
||||
|
|
@ -71,6 +72,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-aden">
|
||||
|
|
@ -81,6 +83,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-brooklyn">
|
||||
|
|
@ -91,6 +94,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-clarendon">
|
||||
|
|
@ -101,6 +105,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-crema">
|
||||
|
|
@ -111,6 +116,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-gingham">
|
||||
|
|
@ -121,6 +127,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-hudson">
|
||||
|
|
@ -131,6 +138,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-juno">
|
||||
|
|
@ -141,6 +149,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-lark">
|
||||
|
|
@ -151,6 +160,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-ludwig">
|
||||
|
|
@ -161,6 +171,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-moon">
|
||||
|
|
@ -171,6 +182,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-reyes">
|
||||
|
|
@ -181,6 +193,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-slumber">
|
||||
|
|
@ -191,16 +204,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-willow">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Willow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-walden">
|
||||
|
|
@ -211,6 +215,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-willow">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Willow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
|
||||
<div class="card">
|
||||
<div class="card-image filter-xpro-ii">
|
||||
|
|
|
|||
|
|
@ -1,2 +1,21 @@
|
|||
// Version
|
||||
$version: "0.1.0";
|
||||
|
||||
// Core variables
|
||||
$primary-color: #5764c6 !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-dark: darken($secondary-color, 3%) !default;
|
||||
$secondary-color-light: lighten($secondary-color, 3%) !default;
|
||||
|
||||
// Gray colors
|
||||
$dark-color: #454d5d !default;
|
||||
$light-color: #fff !default;
|
||||
$gray-color: lighten($dark-color, 40%) !default;
|
||||
$gray-color-dark: darken($gray-color, 20%) !default;
|
||||
$gray-color-light: lighten($gray-color, 20%) !default;
|
||||
|
||||
$bg-color: lighten($dark-color, 66%) !default;
|
||||
$bg-color-dark: darken($bg-color, 3%) !default;
|
||||
$bg-color-light: $light-color !default;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Variables
|
||||
@import "variables";
|
||||
|
||||
/*! Filters.css v#{$version} | MIT License | github.com/picturepan2/filters.css */
|
||||
/*! Instagram.css v#{$version} | MIT License | github.com/picturepan2/instagram.css */
|
||||
@import "core";
|
||||
@import "1977";
|
||||
@import "aden";
|
||||
|
|
|
|||
Loading…
Reference in a new issue