anyproxy/index.less

@main : #00AAEE;
@dark : #326EEB;
@gray : #F9F9F9;
@darkGray : #DEDEDE;
@textDark : #5A5A5A;
@textLight: #777;

@wideContent : 1200px;
@normalContent : 890px;

@wideContentMobile : 100%;
@normalContentMobile : 100%;

@font-face {
	font-family: 'iconfont';
	src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/
	src: url('//at.alicdn.com/t/font_1438330832_106274.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('//at.alicdn.com/t/font_1438330832_106274.woff') format('woff'), /* chrome、firefox */
	url('//at.alicdn.com/t/font_1438330832_106274.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url('//at.alicdn.com/t/font_1438330832_106274.svg#iconfont') format('svg'); /* iOS 4.1- */
}

i.iconfont{
	font-family: "iconfont";
	font-style: normal;
}

body{
	margin: 0;
	padding: 0;
	font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wrapper{
	.cornerBtn{
		position : absolute;
		right    : 10px;
		top      : 10px;
		z-index  : 1; 
	}

	a,
	a:hover{
		text-decoration: none;
	}	

	a{
		font-size: 16px;
		color: @main;
	}

	h4.subTitle{
		font-size: 30px;
		margin: 0;
		padding: 50px 0 10px 0;
		width: 100%;
		text-align: center;
		color: @textDark;
	}

	h4.subTitle.white{
		color: #FFF;
	}

	code{
		display: inline-block;
	}

	.actionBtn.actionBtnWhite{
		color: #FFF;
		border: 1px solid #FFF;

	}

	.actionBtn.actionBtnWhite:hover{
		background: @gray;
		color: @dark;
	}

	.actionBtn{
		color: @dark;
		border: 1px solid @dark;
		line-height: 30px;
		font-size: 30px;
		padding: 20px 45px;
		border-radius: 30px;
		display: inline-block;
		transition:0.3s;

		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			font-size:20px;
			padding: 10px 20px;
		}
	}

	.actionBtn:hover{
		background: @dark;
		color: @gray;
	}
}

.wrapper>div{
	width: 100%;
	min-width: @normalContent;

	@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 600px)
	and (-webkit-min-device-pixel-ratio: 2){
		min-width: @normalContentMobile;
	}
}



.brief{
	height: 300px;
	text-align: center;
	padding: 100px 0;
	position: relative;
	margin-top: 20px;


	@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 600px)
	and (-webkit-min-device-pixel-ratio: 2){
		padding: 60px 0 90px;
	}

	.slogan{
		font-size: 16px;
		color: @textDark;
		padding: 0 20px;
	}
}

.feature{
	background: @darkGray; 

	.featureContent{
		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			width: @wideContentMobile;
		}

		width: @wideContent;
		margin: 0 auto;

		.item{
			padding: 30px 0 20px;
			width: 280px;
			/*border: 1px solid #AAA;*/
			margin: 0 10px;
			float: left;
			box-sizing:border-box;
			-webkit-box-sizing:border-box;
			font-size: 30px;
			text-align: center;
		}

		.iconWrapper{
			display: inline-block;
			line-height: 40px;
			width: 70px;
			text-align: center;
			font-size: 40px;
			color: @textDark;
		}
		.iconWrapper .bigger{
			font-size: 44px;
		}

		h4{
			color: @textDark;
			margin: 12px auto 8px;
			font-size: 20px;
		}

		h5{
			color: @textLight;
			margin: 0;
		}

		h5,
		a{
			font-size: 14px;
			line-height: 20px;
		}


		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			.item{
				padding: 20px 0;
				float     :none;
				margin    : 0 auto;
				font-size : 24px;
			}

			.iconWrapper{
				font-size: 25px;
				line-height: 25px;
			}	

			.iconWrapper .bigger{
				font-size: 30px;
			}

			h4{
				font-size: 16px;
				margin: 4px;
			}

		}
	}
}

.quickstart{
	background: @gray;

	.quickstartContent{
		position: relative;
	}

	.screenshot{
		position: absolute;
		right: 0;
		bottom: 0;

		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			display : none;
		}
	}

	code.simpleBash{
	    font-family: monospace;
	    font-weight: bold;
	    color: #333;
	    padding: 0;
	}
}

.listSection{
	.listContent{

		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			width: @normalContentMobile;
		}

		width: @normalContent;
		margin: 0 auto;
	}

	ul{
		margin: 0 auto;

		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			padding: 0 20px 0 30px;
		}
	}

	li{
		color: @textDark;
		font-size: 16px;
		line-height: 40px;
	}
}

.sample{
	background: @gray;
	.sampleContent{

		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			width: @normalContentMobile;
		}

		width: @normalContent;
		margin: 0 auto;
	}


	.item{
		margin: 10px;
	}

	.itemTitle{
		font-size: 16px;
		margin: 0px 10px;
		color: @textDark;

		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			margin :0;
		}
	}

	.figure{
		vertical-align: top;
		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			display: block;
		    margin: 0 auto;
		    text-align: center;
		}
	}

	pre{
		margin: 0;
		display: inline-block;
		vertical-align: top;
		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			width: 100%;
		}
	}

	code{
		width: 495px;
		@media only screen 
		and (min-device-width: 320px) 
		and (max-device-width: 600px)
		and (-webkit-min-device-pixel-ratio: 2){
			width:100%;
			margin: 0 auto;
		    word-wrap: break-word;
		    padding: 0;
		}
	}

	hr{
		border: none;
		border-top: 1px solid @textLight;
		width: 80%;
		margin: 0 auto;
		padding: 15px 0;
	}

	.readmoreBtn{
		margin-left: 10px;
		padding-bottom: 20px;
	}
}

.readMore{
	background: @gray;
	padding-bottom: 50px;
}

.learnMore{
	background: @dark;
	text-align: center;
	position: relative;
	padding: 120px 0;
	@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 600px)
	and (-webkit-min-device-pixel-ratio: 2){
		padding: 70px 0;
	}

	h4.subtitle{
		padding: 0;
		margin-bottom: 30px;
	}

	.btnWrapper{
		text-align: center;
	}
}