mirror of
https://github.com/picturepan2/instagram.css
synced 2024-05-17 04:46:38 +02:00
Initial Instagram filter 1977
This commit is contained in:
Yan Zhu
parent
5b2cef865a
commit
f226c2b34e
30
.csscomb.json
Normal file
30
.csscomb.json
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"remove-empty-rulesets": true,
|
||||
"always-semicolon": true,
|
||||
"color-case": "lower",
|
||||
"block-indent": " ",
|
||||
"color-shorthand": true,
|
||||
"element-case": "lower",
|
||||
"eof-newline": false,
|
||||
"leading-zero": false,
|
||||
"quotes": "double",
|
||||
"sort-order-fallback": "abc",
|
||||
"space-before-colon": "",
|
||||
"space-after-colon": " ",
|
||||
"space-before-combinator": " ",
|
||||
"space-after-combinator": " ",
|
||||
"space-between-declarations": "\n",
|
||||
"space-before-opening-brace": " ",
|
||||
"space-after-opening-brace": "\n",
|
||||
"space-after-selector-delimiter": "\n",
|
||||
"space-before-selector-delimiter": "",
|
||||
"space-before-closing-brace": "\n",
|
||||
"strip-spaces": true,
|
||||
"tab-size": true,
|
||||
"unitless-zero": true,
|
||||
"sort-order": [[
|
||||
"$variable",
|
||||
"$include",
|
||||
"$import"
|
||||
]]
|
||||
}
|
||||
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
**/*.html linguist-documentation
|
||||
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.idea/
|
||||
node_modules/
|
||||
.*
|
||||
!.csscomb.json
|
||||
!.gitignore
|
||||
!.gitattributes
|
||||
!.hound.yml
|
||||
!.scss-lint.yml
|
||||
1
assets/css/demo.min.css
vendored
Normal file
1
assets/css/demo.min.css
vendored
Normal file
|
|
@ -0,0 +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)}}
|
||||
1
assets/css/spectre.min.css
vendored
Normal file
1
assets/css/spectre.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/img/instagram-example.jpg
Normal file
BIN
assets/img/instagram-example.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
4
dist/instagram.css
vendored
Normal file
4
dist/instagram.css
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */
|
||||
.i-1977 {
|
||||
filter: sepia(.5) hue-rotate(-30deg) saturate(1.2);
|
||||
}
|
||||
1
dist/instagram.min.css
vendored
Normal file
1
dist/instagram.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/*! Filters.css v0.1.0 | MIT License | github.com/picturepan2/filters.css */.i-1977{filter:sepia(.5) hue-rotate(-30deg) saturate(1.2)}
|
||||
27
gulpfile.js
Normal file
27
gulpfile.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
var gulp = require('gulp');
|
||||
var sass = require('gulp-sass');
|
||||
var cleancss = require('gulp-clean-css');
|
||||
var csscomb = require('gulp-csscomb');
|
||||
var rename = require('gulp-rename');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch('./src/*.scss', ['build']);
|
||||
});
|
||||
|
||||
gulp.task('build', function() {
|
||||
gulp.src('./src/*.scss')
|
||||
.pipe(sass({outputStyle: 'compact', precision: 10})
|
||||
.on('error', sass.logError)
|
||||
)
|
||||
.pipe(autoprefixer())
|
||||
.pipe(csscomb())
|
||||
.pipe(gulp.dest('./dist'))
|
||||
.pipe(cleancss())
|
||||
.pipe(rename({
|
||||
suffix: '.min'
|
||||
}))
|
||||
.pipe(gulp.dest('./dist'));
|
||||
});
|
||||
|
||||
gulp.task('default', ['build']);
|
||||
92
index.html
Normal file
92
index.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Instagram.css - Pure CSS Instagram filters</title>
|
||||
<!-- 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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="section section-hero">
|
||||
<div id="overview" class="grid-hero container grid-lg text-center">
|
||||
<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>
|
||||
</p>
|
||||
<p class="text-gray">Latest version: <span class="version"></span></p>
|
||||
<p><a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content" class="section section-device">
|
||||
<div class="container grid-xl text-center">
|
||||
<div class="columns">
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">Normal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src="assets/img/instagram-example.jpg" class="img-responsive i-1977">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<span class="h6">1977</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-ad">
|
||||
<div class="hide-md">
|
||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;width:728px;height:90px"
|
||||
data-ad-client="ca-pub-2225124559530218"
|
||||
data-ad-slot="9894180784"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
</div>
|
||||
<div class="show-md">
|
||||
<!-- GitHub-sm -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;width:300px;height:250px"
|
||||
data-ad-client="ca-pub-2225124559530218"
|
||||
data-ad-slot="9278881734"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="section section-footer">
|
||||
<div id="copyright" class="grid-footer container grid-lg">
|
||||
<p><a href="https://github.com/picturepan2/emoji.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>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Google Analytics tracking code -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-2702768-9', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
package.json
Normal file
37
package.json
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "instagram.css",
|
||||
"version": "0.1.0",
|
||||
"homepage": "http://picturepan2.github.io/instagram.css",
|
||||
"author": "Yan Zhu <picturepan2@hotmail.com>",
|
||||
"description": "Instagram.css",
|
||||
"main": "dist/instagram.css",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/picturepan2/instagram.css.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"css",
|
||||
"pure-css",
|
||||
"filters"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/picturepan2/instagram.css/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "latest",
|
||||
"gulp-autoprefixer": "latest",
|
||||
"gulp-clean-css": "^3.7.0",
|
||||
"gulp-csscomb": "^3.0.8",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "latest"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 4 Chrome versions",
|
||||
"Edge >= 12",
|
||||
"Firefox ESR",
|
||||
"last 4 Safari versions",
|
||||
"last 4 Opera versions",
|
||||
"Explorer >= 10"
|
||||
]
|
||||
}
|
||||
4
src/_1977.scss
Normal file
4
src/_1977.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
// 1977 Filter
|
||||
.i-1977 {
|
||||
filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2);
|
||||
}
|
||||
2
src/_variables.scss
Normal file
2
src/_variables.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// Version
|
||||
$version: "0.1.0";
|
||||
5
src/instagram.scss
Normal file
5
src/instagram.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// Variables
|
||||
@import "variables";
|
||||
|
||||
/*! Filters.css v#{$version} | MIT License | github.com/picturepan2/filters.css */
|
||||
@import "1977";
|
||||
Loading…
Reference in a new issue