1 files changed, 86 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/css-gram.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/css-gram.scss
new file mode 100644
index 00000000..9fd2f49c
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/tiled-gallery/css-gram.scss
@@ -0,0 +1,86 @@
+/**
+ * This code is based on CSS gram:
+ * https://github.com/una/CSSgram/tree/master
+ *
+ * Due to the packaging options available, the source has been duplicated and adapted here
+ * to best fit our specific needs.
+ */
+
+/* From https://github.com/una/CSSgram/blob/0.1.12/source/scss/_shared.scss */
+@mixin pseudo-elem {
+	content: '';
+	display: block;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+@mixin filter-base {
+	position: relative;
+
+	img {
+		width: 100%;
+		z-index: 1;
+	}
+
+	&::before {
+		@include pseudo-elem;
+		z-index: 2;
+	}
+
+	&::after {
+		@include pseudo-elem;
+		z-index: 3;
+	}
+}
+
+/**
+ * 1977
+ * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/1977.scss
+ */
+@mixin _1977( $filters... ) {
+	@include filter-base;
+	filter: contrast( 1.1 ) brightness( 1.1 ) saturate( 1.3 ) $filters;
+
+	&::after {
+		background: rgba( 243, 106, 188, 0.3 );
+		mix-blend-mode: screen;
+	}
+
+	@content;
+}
+
+/*
+ * Clarendon
+ * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/clarendon.scss
+ */
+@mixin clarendon( $filters... ) {
+	@include filter-base;
+	filter: contrast( 1.2 ) saturate( 1.35 ) $filters;
+
+	&::before {
+		background: rgba( 127, 187, 227, 0.2 );
+		mix-blend-mode: overlay;
+	}
+
+	@content;
+}
+
+/**
+ * Gingham
+ * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/gingham.scss
+ */
+@mixin gingham( $filters... ) {
+	@include filter-base;
+	filter: brightness( 1.05 ) hue-rotate( -10deg ) $filters;
+
+	&::after {
+		background: rgb( 230, 230, 250 );
+		mix-blend-mode: soft-light;
+	}
+
+	@content;
+}