%h2.title Click on + to read more
%br/
.blog-card
	.blog-card-close{onclick: "openArticle();"} +
	.blog-card-header
		.blog-card-link{onclick: "openArticle();"}
		.blog-card-perspective
			- 6.times do
				.header-walls
	.blog-card-content
		%span.date 11 • 09 • 2018
		%h2.title Article title
		%p.description Lets talk about idiocratic principles of usual routine
	.blog-article
		.blog-article-inner
			%p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae recusandae, dolores in doloremque veritatis eius esse debitis veniam aliquid cum culpa consequatur eos amet eligendi corporis est laudantium quam reprehenderit?
			%img(src="https://images.unsplash.com/photo-1516918755199-39c769071dea?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=cc4a57b4b2edd0fc0ba6ebdf15264d54" alt="")/
			%small Photo by Unsplash Hero
			%p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae recusandae, dolores in doloremque veritatis eius esse debitis veniam aliquid cum culpa consequatur eos amet eligendi corporis est laudantium quam reprehenderit?
			%p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae recusandae, dolores in doloremque veritatis eius esse debitis veniam aliquid cum culpa consequatur eos amet eligendi corporis est laudantium quam reprehenderit?

@import url('https://fonts.googleapis.com/css?family=Megrim|Raleway:300')
$a: 360deg
$n: 6

body
	display: flex
	justify-content: center
	align-items: center
	height: 100vh
	flex-direction: column

.blog-card
	width: 50vh
	height: 70vh
	box-shadow: 0 0 5px 1px rgba(#000, .15)
	border-radius: 3px
	overflow: hidden
	cursor: crosshair
	position: relative
	&:hover 
		.header-walls
			height: 100vh
			--bgY: 100vh
		.blog-card-link
			transform: translate(-50%, -50%) scale(1.2)
	
.blog-card-header
	height: 70%
	position: relative
	transform-style: preserve-3d
	perspective: 40vh
	overflow: hidden
	transition: height .5s ease-out
	will-change: height
	.-is-opened &
		height: 0
	div
		transform-style: preserve-3d

.blog-card-link
	position: absolute
	width: 10vh
	height: 10vh
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)
	transition: transform .3s ease-out
	&:after
		content: "+"
		font-family: 'Megrim', cursive
		position: absolute
		left: 50%
		top: 50%
		display: block
		transform: translate(-50%, -50%)
		font-size: 20vh
		margin-top: -2vh

.blog-card-perspective
	position: relative
	height: 100%
	transform: rotatex(90deg)

.header-walls
	position: absolute
	top: 50%
	left: 50%
	width: 100px
	height: 120vh
	margin-left: -.5*100px
	margin-top: -.5*50vh
	will-change: background-position
	transition: height .3s ease-out
	background-image: repeating-linear-gradient(to top, #dad217 0, #d8c503 20%, #db8c0e 30%, #d8640b 40%, #de2d15 40%, #dd1518 50%, #d10b26 50%, #860938 60%, #6e0b43 60%, #3c0b42 70%, #3c0b42 80%, #220e3a 90%, #150f53 100%)
	background-size: 100px 100px
	background-repeat: repeat
	background-size: cover
	--bgY: 120vh
	animation: animationBg 2s ease-in-out infinite
	@for $i from 1 through $n
		&:nth-child(#{$i})
			transform: rotatey($a/$n*$i) rotatez(30deg) translatez(50px)

@keyframes animationBg
	from
		background-position: 0 0
	to
		background-position: 0 var(--bgY)
	
.blog-card-content
	padding: 10px 20px
	display: flex
	justify-content: center
	flex-direction: column
	text-align: left
	box-sizing: border-box
	height: 30%
	transition: height .3s linear
	.-is-opened &
		height: 20%

.date
	color: lighten(#000, 30)
	font-family: 'Raleway', sans-serif
	font-size: 1.4vh
	.-is-opened &
		order: 3

.title 
	font-family: 'Megrim', cursive
	font-size: 4.2vh
	color: #000
	margin: 2vh 0 0
	.-is-opened &
		margin: 0 0 2vh

.description
	font-family: 'Raleway', sans-serif
	font-size: 1.8vh
	font-weight: lighten
	width: 100%
	margin: .8vh 0 0
	transition: all .4s ease-out
	overflow: hidden
	.-is-opened &
		height: 0px
	
.blog-article
	padding: 10px 20px
	height: 80%
	font-family: 'Raleway', sans-serif
	font-size: 1.8vh
	font-weight: lighter
	overflow: hidden
	box-sizing: border-box
	position: relative
	transition: transform .6s ease-out .2s
	transform: translatey(100%)
	.-is-opened &
		transform: translatey(0%)
	&:before,
	&:after
		content: ''
		position: absolute
		left: 0
		right: 0
		height: 10%
		z-index: 10
	&:after
		bottom: 0%
		background-image: linear-gradient(to top, white 0%, white 50%, transparent 100%)
	&:before
		top: 0%
		background-image: linear-gradient(to bottom, white 0%, white 50%, transparent 100%)
	p
		transform: translatey(20px)
		opacity: 0
		transition: .4s ease-out
		.-is-opened &
			transform: translatey(0)
			opacity: 1
	img
		max-width: 100%
		margin: 0 auto
		display: block
	
.blog-article-inner
	overflow-y: scroll
	-webkit-overflow-scrolling: touch
	height: 100%
	padding: 10px 10px 30px 0px
	box-sizing: border-box
	&::-webkit-scrollbar
		width: 5px
	&::-webkit-scrollbar-track
		box-shadow: none
		border-radius: 0
		background: transparent
	&::-webkit-scrollbar-thumb
		background: linear-gradient(to bottom, #dad217 0, #d8c503 20%, #db8c0e 30%, #d8640b 40%, #de2d15 40%, #dd1518 50%, #d10b26 50%, #860938 60%, #6e0b43 60%, #3c0b42 70%, #3c0b42 80%, #220e3a 90%, #150f53 100%)
		box-shadow: none
		border-radius: 0

.blog-card-close
	position: absolute
	right: 0
	top: 0
	z-index: 1
	font-size: 10vh
	line-height: .5
	font-family: 'Megrim', cursive
	cursor: pointer
	transform: scale(0) rotate(45deg)
	transition: transform .1s linear 0s
	margin-top: 1.8vh
	margin-right: 10px
	.-is-opened &
		transition: transform .2s ease-out .6s
		transform: scale(1) rotate(45deg)

'use strict';

let openArticle = ()=> {
	document.querySelector(".blog-card").classList.toggle("-is-opened");
}