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 1 commit
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
Prev Previous commit
Kelvin is back after some strange conflict
  • Loading branch information
@camilaazuma
camilaazuma committed Nov 17, 2016
commit 1b71de84a75e5503ea7c42ca7932ec7101ea32b4
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.

2 changes: 1 addition & 1 deletion 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.

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.

8 changes: 4 additions & 4 deletions source/css/juno.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@

.juno {
position: relative;
-webkit-filter: contrast(1.25) brightness(0.989) saturate(1.1) grayscale(0.19);
filter: contrast(1.25) brightness(0.989) saturate(1.1) grayscale(0.19); }
-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%;
Expand Down Expand Up @@ -36,6 +36,6 @@
z-index: 3; }

.juno::after {
background: -webkit-radial-gradient(circle, rgba(150, 160, 150, 0.4) 100%, #c06ec9);
background: radial-gradient(circle, rgba(150, 160, 150, 0.4) 100%, #c06ec9);
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; }
2 changes: 1 addition & 1 deletion 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.

2 changes: 0 additions & 2 deletions source/scss/juno.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,3 @@
.juno {
@include juno;
}
@include juno;
}
48 changes: 48 additions & 0 deletions source/scss/kelvin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Kelvin
*
*/
@import 'shared';

// mixin to extend kelvin filter
// @mixin kelvin
// @param $filters... {filter} - Zero to many css filters to be added
// @example
// img {
// @include kelvin;
// }
// or
// img {
// @include kelvin(blur(2px));
// }
// or
// img {
// @include kelvin(blur(2px)) {
// /*...*/
// };
// }
@mixin kelvin($filters...) {
@include filter-base;

@if length($filters) > 0 {
filter: $filters;
}

&::after{
background: rgb(183, 125, 33);
mix-blend-mode: overlay;
}

&::before {
background: rgb(56, 44, 52);
mix-blend-mode: color-dodge;
}

@content;
}

// kelvin Instagram filter
%kelvin,
.kelvin {
@include kelvin;
}