Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add juno filter #245

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add juno filter #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
152fd9e
Add juno filter
camilaazuma Oct 16, 2016
f7b1c4c
Adjustments on juno filter
camilaazuma Nov 17, 2016
426f20a
Merge with original repo
camilaazuma Nov 17, 2016
1b71de8
Kelvin is back after some strange conflict
camilaazuma Nov 17, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/css/cssgram.min.css
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 42 additions & 0 deletions site/css/demo-site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1014,6 +1014,48 @@
background: #382c34;
mix-blend-mode: color-dodge; }

/*
*
* Juno
*
*/

.juno {
position: relative;
-webkit-filter: contrast(1.25) saturate(1.1) grayscale(0.19);
filter: contrast(1.25) saturate(1.1) grayscale(0.19); }

.juno img {
width: 100%;
z-index: 1; }

.juno:before {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
z-index: 2; }

.juno:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
z-index: 3; }

.juno::after {
background: -webkit-radial-gradient(circle, rgba(150, 160, 150, 0.8) 100%, #c06ec9);
background: radial-gradient(circle, rgba(150, 160, 150, 0.8) 100%, #c06ec9);
mix-blend-mode: overlay; }

/*
*
* Maven
Expand Down
2 changes: 1 addition & 1 deletion site/css/demo-site.min.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions site/css/juno.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions site/filters.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
},
{
"name": "Juno",
"is_done": false,
"is_done": true,
"usage": "juno"
},
{
Expand Down Expand Up @@ -203,4 +203,4 @@
],

"images": ["atx", "bike", "cacti", "lakegeneva", "tahoe"]
}
}
17 changes: 13 additions & 4 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,13 @@ <h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a h
<figcaption>Inkwell</figcaption>
</figure>
</li>
<li class="demo__item">
<li class="demo__item">
<figure class="juno">
<img>
<figcaption>Juno</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="kelvin">
<img>
<figcaption>Kelvin</figcaption>
Expand Down Expand Up @@ -283,7 +289,8 @@ <h3>Available Classes</h3>
<li>Gingham: <code>class="gingham"</code></li>
<li>Hudson: <code>class="hudson"</code></li>
<li>Inkwell: <code>class="inkwell"</code></li>
<li>Kelvin: <code>class="kelvin"</code></li>
<li>Juno: <code>class="juno"</code></li>
<li>Kelvin: <code>class="kelvin"</code></li>
<li>Lark: <code>class="lark"</code></li>
<li>Lo-Fi: <code>class="lofi"</code></li>
<li>Maven: <code>class="maven"</code></li>
Expand Down Expand Up @@ -344,7 +351,8 @@ <h3>Available Extends</h3>
<li>Gingham: <code>@extend %gingham;</code></li>
<li>Hudson: <code>@extend %hudson;</code></li>
<li>Inkwell: <code>@extend %inkwell;</code></li>
<li>Kelvin: <code>@extend %kelvin;</code></li>
<li>Juno: <code>@extend %juno;</code></li>
<li>Kelvin: <code>@extend %kelvin;</code></li>
<li>Lark: <code>@extend %lark;</code></li>
<li>Lo-Fi: <code>@extend %lofi;</code></li>
<li>Maven: <code>@extend %maven;</code></li>
Expand Down Expand Up @@ -411,7 +419,8 @@ <h3>Available Mixins</h3>
<li>Gingham: <code>@include gingham();</code></li>
<li>Hudson: <code>@include hudson();</code></li>
<li>Inkwell: <code>@include inkwell();</code></li>
<li>Kelvin: <code>@include kelvin();</code></li>
<li>Juno: <code>@include juno();</code></li>
<li>Kelvin: <code>@include kelvin();</code></li>
<li>Lark: <code>@include lark();</code></li>
<li>Lo-Fi: <code>@include lofi();</code></li>
<li>Maven: <code>@include maven();</code></li>
Expand Down
2 changes: 1 addition & 1 deletion site/test/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1641,7 +1641,7 @@ <h3>CSSgram</h3>

</section>
<section id="Juno">
<h2 class="filter-header"><a href="#Juno">Juno</a> <span class="done done--nope">✗</span></h2>
<h2 class="filter-header"><a href="#Juno">Juno</a> <span class="done done--yep">✓</span></h2>

<div class="headers">
<h3>Instagram</h3>
Expand Down
42 changes: 42 additions & 0 deletions source/css/cssgram.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1013,6 +1013,48 @@
background: #382c34;
mix-blend-mode: color-dodge; }

/*
*
* Juno
*
*/

.juno {
position: relative;
-webkit-filter: contrast(1.25) saturate(1.1) grayscale(0.19);
filter: contrast(1.25) saturate(1.1) grayscale(0.19); }

.juno img {
width: 100%;
z-index: 1; }

.juno:before {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
z-index: 2; }

.juno:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
z-index: 3; }

.juno::after {
background: -webkit-radial-gradient(circle, rgba(150, 160, 150, 0.8) 100%, #c06ec9);
background: radial-gradient(circle, rgba(150, 160, 150, 0.8) 100%, #c06ec9);
mix-blend-mode: overlay; }

/*
*
* Maven
Expand Down
2 changes: 1 addition & 1 deletion source/css/cssgram.min.css
View file
Open in desktop

Large diffs are not rendered by default.

41 changes: 41 additions & 0 deletions source/css/juno.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
*
* Juno
*
*/

.juno {
position: relative;
-webkit-filter: contrast(1.25) saturate(1.1) grayscale(0.19);
filter: contrast(1.25) saturate(1.1) grayscale(0.19); }

.juno img {
width: 100%;
z-index: 1; }

.juno:before {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
z-index: 2; }

.juno:after {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
z-index: 3; }

.juno::after {
background: -webkit-radial-gradient(circle, rgba(150, 160, 150, 0.8) 100%, #c06ec9);
background: radial-gradient(circle, rgba(150, 160, 150, 0.8) 100%, #c06ec9);
mix-blend-mode: overlay; }
1 change: 1 addition & 0 deletions source/css/juno.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions source/scss/cssgram.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,6 @@
@import 'brannan';
@import 'valencia';
@import 'kelvin';
@import 'juno';
@import 'maven';
@import 'stinson';
41 changes: 41 additions & 0 deletions source/scss/juno.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
*
* Juno
*
*/
@import 'shared';

// mixin to extend juno filter
// @mixin juno
// @param $filters... {filter} - Zero to many css filters to be added
// @example
// img {
// @include juno;
// }
// or
// img {
// @include juno(blur(2px));
// }
// or
// img {
// @include juno(blur(2px)) {
// /*...*/
// };
// }
@mixin juno($filters...) {
@include filter-base;
filter: contrast(1.25) saturate(1.1) grayscale(.19) $filters;

&::after {
background: radial-gradient(circle, rgba(150, 160, 150, .8) 100%, rgb(192, 110, 201));
mix-blend-mode: overlay;
}

@content;
}

// juno Instagram filter
%juno,
.juno {
@include juno;
}
2 changes: 1 addition & 1 deletion source/scss/kelvin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,4 @@
%kelvin,
.kelvin {
@include kelvin;
}
}