guide.scss

$c1: #f16475; $c1dark: #652931; $c1t: #ffca9d;
$c2: #544fe5; $c2dark: #413c6d; $c2t: #fff899;
$c3: #51b4ce; $c3dark: #245663; $c3t: #94f0d7;
$c4: #4FE553; $c4dark: #67471c;

$c5: #4993e6; $c5dark: #67471c;
$c6: #ffda41;
$c7: #36e2e4;

$c1: lighten( $c1, 15% );
$c2: lighten( $c2, 15% );
$c3: lighten( $c3, 15% );
$c4: lighten( $c4, 15% );
$c5: lighten( $c5, 15% );
$c6: lighten( $c6, 15% );
$c7: lighten( $c7, 15% );

$Y: #f16475;
$Ylight: #ff7485;
$Ydark: #991f2e;

$ctheano:$c5;
$ckeras:#f0E8EC;
$ctensorflow:$c6;
$ctorch:$c7;

$stripe-width: 10px;
$stripe-base-left: 44px;
$stripe-base-right: 74px;
$stripe-distance: 10px;

body {
	background-image: linear-gradient(#fff3ed, #fff6f3);
	background-size: 100% 1200px;
    background-repeat: repeat-x;
    font-family: 'Muli', 'Open Sans';
    background-color: #fff6f3;
	font-size: 13px;
    color: #4a4a4a;
    font-weight: 400;
	min-width: 1170px;
}

.container a{
	color: #444;
	text-decoration:underline;
}

h1.title{
	text-align:center;
	// background: $Y;
	color: $Y;
	margin: 0;
	padding: 40px 0 40px 0;
	font-size: 36px;
	background-image: linear-gradient(rgba(255, 243, 237, 1),rgba(255, 243, 237, 0.6));
	
}
.logo {
	display: inline-block;
}
.logo svg{
	display: inline-block;
	width: 96px;
	height:96px;
	vertical-align:middle;
	background: $Y;
	margin-left: 10px;
}

.container{
	position:relative;
	width: 1170px;
}
.container .well{
	overflow:auto;
	background:none;
	border:none;
	box-shadow:none;
	border-radius: 0;
}
section.top{
	background: #fff;
    margin: 0;
    color: #777;
    border-radius: 6px 6px 0 0;
    overflow: auto;
    padding: 32px 14px;
    font-size: 15px;
}
section.top a,
.prerequisites a{
	color: $Ydark;
	font-weight: 400;
}
.prerequisites{
	background: $Y;
	color: $Ydark;
	overflow: auto;
	padding: 12px 0 32px;
	font-size: 15px;
    line-height: 22px;
	.container {
		padding: 0 30px;
	}
	ul {
		list-style: none;
		margin-left: 0;
		padding: 0;
	}
}
.footer {
	color: $Ydark;
    overflow: auto;
    padding: 262px 0 80px;
    margin-top: -210px;
    font-size: 14px;
    line-height: 22px;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff 50%);
	h2 {
		margin:0 0 10px 0;
		padding:20px;
		text-align: center;
	}
	.container {
		padding: 0 30px;
	}
	ul {
		list-style: none;
		margin-left: 0;
		padding: 0;
	}
}

.left{ 
	width: 626px;
	float: left;
	padding: 0 15px;
}

.right{ 
	width: 484px;
	float: left;
	padding: 0 15px;
}

.well h2, .prerequisites h2{
	margin:0 0 10px 0;
	padding:20px;
	text-align: center;
	color: $Y;
}
.well.top h2,
.prerequisites h2{
	color: $Ydark;
}
.well .content{
	float:left;
	padding-left: 10px;
	width: 600px;
	/*   background: yellow */
}
.prerequisites .content{
	float:left;
	padding-left: 10px;
	width: 600px;
	/*   background: yellow */
}
.well .right-content{
	float:left;
	padding-left:30px;
	width: 482px;
}
.well .right-content ul li{
	margin-left:0;
}
.well .right-content p{
	padding-left:8px;
	padding-right:30px;
}
.well p {
	font-size: 15px;
	padding: 0 0 10px 68px;
}
.well ul{
	margin: 0;
	padding: 0;
	list-style-type:none;
}
.well ul li{
	margin-left: 60px;
	padding: 6px 8px 6px 10px;
}
.well .right-content ul li{
	margin-right: 40px;
	margin-left: 0;
	padding: 6px 10px 6px 8px;
}
.well {

	ul li.c1{
		padding-left: 70px;
		margin-left: 0;
		background: $c1;
	}
	ul li.c2{
		padding-left: 60px;
		margin-left: 10px;
		background: $c2;
	}
	ul li.c3{
		padding-left: 50px;
		margin-left: 20px;
		background: $c3;
	}
	ul li.c4{
		padding-left: 40px;
		margin-left: 30px;
		background: $c4;
	}
	ul li.theano{
		padding-right: 40px;
		margin-right: 20px;
		background: $ctheano;
	}
	ul li.torch{
		padding-right: 60px;
		margin-right: 0px;
		background: $ctorch;
	}
	ul li.tensorflow{
		padding-right: 50px;
		margin-right: 10px;
		background: $ctensorflow;
	}
}


.stripe{
	background:black;
	z-index:-1;
	width: $stripe-width;
	height:5900px;
	position:absolute;
	top: 0;
}
.stripe.right{
	height:3300px;
}
.stripes {
	& > div {
		position:absolute;
	}
	.c1{
		.stripe {
			background: $c1;
		}
		left: $stripe-base-left + $stripe-distance * 0;
		top: 0;
	}
	.c2{
		.stripe {
			background: $c2;
		}
		left: $stripe-base-left + $stripe-distance * 1;
		top: 0;
	}
	.c3{
		.stripe {
			background: $c3;
		}
		left: $stripe-base-left + $stripe-distance * 2;
		top: 0;
	}
	.c4{
		.stripe {
			background: $c4;
		}
		left: $stripe-base-left + $stripe-distance * 3;
		top: 0;
	}

	

	.theano{
		.stripe {
			background: $c5;
		}
		right: $stripe-base-right - 0 * $stripe-distance;
		top: 0;
	}
	.tensorflow{
		.stripe {
			background: $c6;
		}
		right: $stripe-base-right - 1 * $stripe-distance;
		top: 0;
	}
	.torch{
		.stripe {
			background: $c7;
		}
		right: $stripe-base-right - 2 * $stripe-distance;
		top: 0;
	}
}

.well.head{
	border-color: transparent;
}


@-webkit-keyframes smooth-entry {
	0% {
		opacity: 0;
		-webkit-transform: translateY(+1.4em);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes smooth-entry {
	0% {
		opacity: 0;
		-moz-transform: translateY(+1.4em);
	}
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@keyframes smooth-entry {
	0% {
		opacity: 0;
		-webkit-transform: translateY(+1.4em);
		-moz-transform: translateY(+1.4em);
		-ms-transform: translateY(+1.4em);
		-o-transform: translateY(+1.4em);
		transform: translateY(+1.4em);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}