ywwtf.css

/*
PushIn.js
=========
CSS document for working sample.
PushIn.js is a plugin which can be attached to any
div element to simulate a dolly-in or push-in effect.
*/


/* CONSOLE FOR DEBUGING */

header {
	position: fixed;
	top: 0;
	height: 40px;
	width: 100%;
	text-align: center;
	padding-top: 5px;
	z-index: 9999;
	background: white;
}


/* LAYOUT */


html {
	height: 100%;
}

body {
	height: 8000px;
}

* {
	box-sizing: border-box;
	margin: 0;
	}

#wrapper {
	position: fixed;
	top: 0px;
	bottom: 0px;
	display: block;
	width: 100%;
	overflow: auto;
}

#scroller, .layer {
	display: block;
	width: 100%;
}

#scroller {
	position: absolute;
	height: 100%;
	background: linear-gradient(90deg, #FFF200, #DA36E2);
	background-size: 400%;
	animation: BackgroundAnimation 12s ease infinite;
}

.layer {
	position: fixed;
	text-align: center;
	height: 100vh;
	opacity: 1.0;
}




/* LAYER 1 STYLING */

.dot {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 20%;            /* Effects height and width together */
	margin: -20% 5%;
	top: 50%;
	border-radius: 50%;
}

/*
	Pseudo-class keeps aspect ratio when resizing
	http://www.mademyday.de/css-height-equals-width-with-pure-css.html
*/
.dot:before {
	content: '';
	display: inline-block;
	padding-top: 100%;      /* 1:1 aspect ratio */
}

.content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding-top: 50%;
}

.layer h4 {
	width: 50%;
	margin: 0 auto;
	font-size: 5vw;
}

@media (min-width: 767px) {
	.layer h4 {
		font-size: 28.4px;
    width: 66%;
	}
}



/* FUNCTIONAL */


.layer {
	transition: opacity 1000ms ease;
	display: flex;
	align-items: center;
	height: 100vh;
}

.hide {
	width: 0px !important;
	height: 0px !important;
	color: transparent !important;
	opacity: 0 !important;
}



/* COLORS */

.blue,
.green,
.purple {
	animation: ColorPulse 1s linear infinite;
}

.blue {
	background: linear-gradient(90deg, #007eff, transparent);
}

.red {
	background: linear-gradient(90deg, red, transparent);
}

.green {
	background: linear-gradient(90deg, green, transparent);
}

@keyframes ColorPulse {
	0% {background-position: 0% 0%; }
	50% {background-position: 100% 0%; }
	100% {background-position: 0% 0%; }
}

@keyframes BackgroundAnimation{
  0%{background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0% 50%;}
}

.screen-wipe {
	height: 100vh;
	width: 100vw;
	background: linear-gradient(to right, rgba(255, 0, 0, 0) 0%,#f72d00 62%,#0089f9 82%,#10f700 91%,#fcef00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	z-index: 3;
	position: fixed;
	transform: translateX(-100vw);
}

.screen-wipe.animate {
	animation: screen-wipeAnimation 8s linear;
}
@keyframes screen-wipeAnimation {
	0%{transform: translateX(-100vw);}
	50%{transform: translateX(0vw);}
	100%{transform: translateX(100vw);}
}
/* container was used to enclose the title and all contents on the index page of my name site.
   Currently, container isn't being used as a class on any of the HTML for this site.
*/
.container {
	margin: 0 auto;
  text-align: center;
  position: relative;
  right: 18px;
  padding-bottom: 60px;
}

#book-title h4{
	color: #000;
	font-size: 8vw;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .75px;
	text-align: left;
	display: inline-block;
	padding-left: 54px;
	padding-top: 54px;
}
#book-title h4 span{
	display: block;
	text-align: right;
}