.contenedor
	form
		- var pageTitle=['Home', 'Features', 'Adding pages to this template', '+More', 'About', 'Dummy page', 'Dummy page'] //Add pages by adding title here
		- var content = [
		- 'Pure CSS One page Vertical navigation',
		- 'two',
		- 'three',
		- 'four',
		- 'five'
		- ]
		- for( var n = 0; n < pageTitle.length; n++)
			if n==0
				input(type="radio" id="Slide1" name="slider" titulo=""+pageTitle[0] autofocus checked)
			else
				input(type="radio" id="Slide"+[n+1] name="slider" titulo=""+pageTitle[n])
			
		.labels
			- for( var n = 0; n < pageTitle.length; n++ )
				if n==0
					label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
						.content: h1 <strong>Pure CSS</strong> one page vertical navigation
						.icon
							span: i.fa.fa-keyboard-o
							span Use keyboard
				else if n==1
					label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
						.content
							h1 #{pageTitle[n]}
							.block
								span 
									i.fa.fa-hashtag
									br
									| <strong>No JS</strong>
									br
									| CSS Rules!
								span 
									i.fa.fa-keyboard-o
									br
									| <strong>Pure CSS keyboard navigation</strong>
									br
									| Yep, no kidding
								span
									i.fa.fa-bars
									br
									| <strong>Lateral menu</strong>
								span
									i.fa.fa-codepen
									br
									| <strong>Autogenerate pages</strong>
									br
									| Using Jade & SASS
									
				else if n==2
					label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
						.content
							h1 #{pageTitle[n]}
							.block: ol
									li Add the pages title in the pageTitle array in the HTML editor to generate pages
									li Add the number of pages in the $npages variable in the CSS editor
				else if n==3
					label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
						.content
							h1 #{pageTitle[n]}
							.block
								span: a(href="https://codepen.io/hrtzt/pen/NPZKRN" target="_blank") One Page Navigation CSS Menu
								span: a(href="https://codepen.io/hrtzt/pen/YPoeWd" target="_blank") The simplest CSS switch
								span: a(href="https://codepen.io/hrtzt/pen/JdYaEZ" target="_blank") Animated cube slider CSS only
								span: a(href="https://codepen.io/hrtzt/pen/vGqEJO" target="_blank") Google photos album view with only CSS
				
				else if n==4
					label(for="Slide"+[n+1] id="Slide"+[n+1] class="Slide")
						.content
							h1 #{pageTitle[n]}
							.block
								span
									a(href="https://dribbble.com/hrtzt" target="_blank")
										i.fa.fa-dribbble  
										| Dribbble me
								span
									a(href="https://twitter.com/hrtzt" target="_blank")
										i.fa.fa-twitter
										| Tweet me
									
				else
					label(for="Slide"+[n+1] id="Slide"+[n+1])
						.content
							h1 #{pageTitle[n]}
							.block Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto numquam, totam iusto officia earum perferendis
		
		

$npages: 7 /* This is the number of pages added in "pageTitle" in the HTML editor */
$bg: #2B2B38
$bg-odd: #F5004F
/* The basic stuff to make it work */
.contenedor
	width: 100vw
	height: 100vh
	background: deeppink

	position: relative
	display: flex
	align-items: center

	form
		box-sizing: border-box
		text-align: center
		padding: 22px
		display: inline-flex
		flex-direction: column
		position: fixed
		height: 100vh
		justify-content: center
		
		input
			height: 0
			margin: 12px 0
			z-index: 1
			&:checked
				outline: 0
				border: 0
			&:before
				content: ""
				position: absolute
				display: inline-block
				width: 8px
				height: 8px
				border: 1px solid rgba(255, 255, 255, 0.81)
				border-radius: 11px
				cursor: pointer
				transition: all .25s linear
			&:checked:before 
				background-color: white			
			&:after
				content: ""attr(titulo)""
				position: relative
				left: 30px
				opacity: 0
				color: white
				font-size: 9px
				display: block
				min-width: 80px
				transition: all .25s linear
			&:checked:after
				opacity: 1
				left: 20px
			&:hover:after:not(label)
				opacity: 1		
			@for $i from 1 through $npages	
				&:nth-of-type(#{$i}):checked ~ .labels label
					transform: translateY(-#{($i - 1) * 100%})

		.labels 
			position: absolute
			top: 0
			left: 0
			width: 100vw
			height: 100vh
			display: flex
			flex-direction: column

			label
				min-width: 100vw
				min-height: 100vh
				display: flex
				flex-direction: column
				justify-content: center
				align-items: center
				background-color: $bg
				z-index: 0
				transition: all .75s cubic-bezier(0.75, 0.25, 0, 1.05)
				&:nth-child(odd)
					background-color: $bg-odd
					color: white !important


/* Fancy style */
body
	font:
		family: 'Open sans', sans-serif
		size: 16px
		weight: 100
	color: white

.content 
	width: 100%
	box-sizing: border-box
	padding: 0 110px
	
	.block 
		width: inherit
		font:
			size: 11px
			weight: 400
		line-height: 1.5
		margin: 42px 0
		display: flex
		justify-content: center

	
		span
			margin: 0 42px
	
			i
				margin-bottom: 22px
				@extend span
				&:before
					font-size: 30px

.Slide:nth-child(even) .content .block
	color: #717171



.icon 
	position: absolute
	bottom: 30px
	left: 0
	right: 0
	font-size: 11px
	text-align: center
	line-height: 1.5
	display: flex
	flex-direction: column
	i
		font-size: 22px

#Slide5 .content .block
	flex-direction: column
	i
		margin: 0 12px
		vertical-align: middle

strong
	font-weight: 400

h1
	text-transform: uppercase

ol
	text-align: left
	list-style-type: decimal

a
	text-decoration: none
	color: inherit
	transition: all .25s linear
	&:hover
		color: rebeccapurple



		

/*
@author Alberto Hartzet 
*
*I wouldn't mind if you use this piece of code in your project as long 
as you give credit with a link to my site. www.albertohartzet.com
*
Licence (CC BY-NC-SA 4.0) http://creativecommons.org/licenses/by-nc-sa/4.0/
*/