React for Developers

index.slim

/! Created by SiamakMokhtari Twitter: @siamak.

.circle.jiggle
.hold
  h1 React for Developers
  h6 Hello World!
footer #irDevConf ■ @siamak

React for Developers.markdown

React for Developers

React for Developers at #irDevConf ■ Presentation Cover.

A Pen by Siamak Mokhtari on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=PT+Serif:700|Roboto+Mono);

* {
	box-sizing: border-box;
}

html {
	background-color: #FFF;
	width: 100%;
	height: 100%;
	padding: 1.1rem 1.2rem;
	font: 1rem PT Serif, Roboto Mono, sans-serif;
	color: #FFF;
}

body {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #2C4BD6;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #2C4BD6;
	box-shadow: 0 9px 26px -8px rgba(0, 0, 0, 0.3),
				8px -11px 6px -12px rgba(0, 0, 0, 0.2),
				-8px -11px 6px -12px rgba(0, 0, 0, 0.2);
	border-radius: 100%;
	width: 20rem;
	max-width: 80vw;
	z-index: 1px;
	&:before {
		content: '';
		float: right;
		padding-bottom: 100%;
	}
}

.hold {
	position: relative;
	text-align: center;
	z-index: 2;
}

h1 {
	font-weight: bold;
	font-size: 3.35rem;
	line-height: 4rem;
	letter-spacing: -0.01em;
	margin-top: 2rem;
	margin-bottom: 1.25rem;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.312);
}

h6 {
	font-family: Roboto Mono;
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 2rem;
	letter-spacing: -0.015em;
	margin: 0;
	color: #F7F3F1;
}

footer {
	position: absolute;
	bottom: 2em;
	left: 50%;
	letter-spacing: 2px;
	transform: translateX(-50%);
	font-size: 1.125em;
	font-family: Roboto Mono;
	color: #F7F3F1;
}

.jiggle {
	will-change: transform;
	animation: jiggle 1s infinite alternate;
	animation-timing-function: cubic-bezier(0, 0.15, 1, 1);
}

@keyframes jiggle {
	0% {
		transform: translate(-50%, -50%) rotate(14deg);
	}
	40% {
		transform: translate(-50%, -50%) scale(1.1);
	}
	70% {
		transform: translate(-50%, -50%) scale(0.86);
	}
	100% {
		transform: translate(-50%, -51%) rotate(-14deg) scale(1)
	}
}