Used Less Code of this website

Origin

This demo site was created during the Writing CSS with {LESS} - Tutorial From Infinite Skills.

What I did learn?

Used Less Code

@fontSize: 16px;
@baseColor: #3586d8;
@lighterColor: lighten(@baseColor, 45%); // #409fff;
@darkerColor:  darken(@baseColor, 25%); // #163859;
@borderRadius: 10px;

.topBorderRadius(@radius: @borderRadius) {
	border-top-right-radius: @radius;
	border-top-left-radius: @radius;
}

.borderRadius {
	border-radius: @borderRadius;
}

.width (@min; @max: 100%) {
	min-width: @min;  // minimum width for our container
	max-width: @max;  // width must be no greater than this value
}

body {
	font-family: Tahoma, Arial, sans-serif;
	font-size: @fontSize;
}


#container {
	margin: auto;
	width: 80%; // define our width to not take up the whole area
	.width( 350px, 1050px);
}

#header {
	.topBorderRadius;

	background-color: @baseColor;
	margin: 0;

	.title {
		font-size: 2rem;
		font-weight: bold;
		color: @lighterColor;
		margin: 10px 1rem;
		padding-top: 1rem;
		text-shadow: #000 1px 2px;
	}
}
.navigation {
	background: @darkerColor;
	height: 32px;
	padding: 5px 0;
	margin: 0;
	border-bottom: 2px solid #000;

	li {
		display: inline-block;
		float: left;
		margin: 5px;
		list-style: url(none) none outside;
		font-size: (1.1 * @fontSize);
		font-size: 1.1rem;

		a, a:visited {
			padding: 5px;
			decoration: none;
			text-decoration: none;
			color: #FFF;
			font-weight: bold;

			.borderRadius;

			&:hover {
color: @darkerColor;
background-color: @lighterColor;
			}
		}

		&.first {
			margin-left: 1rem;
		}
	}
}



.knowColor (@a) when (lightness(@a) >= 50%) {
	background-color: @darkerColor;
}
.knowColor (@a) when (lightness(@a) < 50%) {
	background-color: #fff;
}
.knowColor (@a) {
	color: @a;
}

#content {
	clear: both;
	margin: 0;
	padding: 0;
	min-height: 75vh;

	h1, h2, p {
		padding-left: 1rem;
	}
	h1 {
		background-color: @darkerColor;
		color: #FFF;
	}
	ul {
		margin-left: (3 * @fontSize);
		margin-left: 3rem;
	}
	h2 {
		border-bottom: 3px @darkerColor solid;
		color: @darkerColor;
	}

	.know {
		.borderRadius;
		.knowColor(#fff);

		width: 35%;
		float: right;
		border: 1px solid @darkerColor;
		margin: 0 10px 10px 10px;

		h1 {
			.topBorderRadius(9px);
			.knowColor(#000);

			margin-top: 0;
			font-size: round(1.6 * @fontSize);
			font-size: 1.6rem;
		}
	}

	pre {
		padding: 2rem;
		background-color: #ddd;
		font-family:"Lucida Console", Monaco, monospace;
		clear: both;

		.borderRadius;
	}
}
#footer {
	clear: both;
	border-top: 1px solid @darkerColor;

	p {
		font-size: .8rem;
	}
}
}