code.less

@import url('./_variables.less');
@import url('./_colors.less');
@import url('./_mixins.less');


.highlight code,		// Normal or overridden highlighted code block
div + pre {				// Unhighlighted code block preceded by language override
	position: relative;
	display: block;
	padding: 10px;
	overflow-x: auto;
	white-space: pre;
	&:before {
		font-weight: 100;
		font-family: 'Source Sans Pro', sans-serif;
		letter-spacing: 8px;
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 60px;
		pointer-events: none;	// Make sure this doesn't interfere with selecting code.  (Chrome bug)
		opacity: .7;			// Makes code behind the label a little more readable.  I can't figure out how to send the label to back without making every span position: relative (perf hit)
		.hoverTransition(opacity);
	}
	&:hover:before{
		opacity: .1;			// On mouseover, make the code more readable by near-hiding the label (especially on narrow screens)
	}
	@media only screen and (max-width: 599px) {
		&:before {
			display: none;	// Caption doesn't fit on mobile
		}
	}
}

div.small {
	& + .highlighter-rouge code:before,	// Highlighted Markdown code block preceded by small marker
	& + .highlight code:before,			// Highlighted Jekyll code block preceded by small marker
	& + pre:before {					// Unhighlighted code block preceded by small marker
		font-size: 30px;
	}
}

.defineCategoryColors({
	@hue: hue(@baseColor);
	@saturation: saturation(@baseColor);

	& when not (@name = '') {						// Guards are only currently allowed on a single selector
		.highlighter-rouge.language-@{class} code,	// Normal highlighted code block from Markdown
		.highlight code.language-@{class},			// Normal highlighted code block from legacy Jekyll posts
		@{selector} + .highlighter-rouge code,		// Highlighted Markdown code block preceded by language override (force to be more specific than ordinary highlight)
		@{selector} + .highlight code,				// Highlighted Jekyll code block preceded by language override (force to be more specific than ordinary highlight)
		@{selector} + pre {							// Unhighlighted code block preceded by language override
			background-color: hsl(@hue, @saturation, 90%);
			outline-color: hsl(@hue, @saturation, 75%);

			&:before {
				content: @name;
				color: hsl(@hue, @saturation, 40%);
			}
		}
	}
});

/////////////////////////////////////
// Language-specific syntax overrides

// Hide error styling for overridden languages.
// Pygments doesn't support LESS and other LESS
// and other languages.  I mark them as similar
// languages, but this produces spurious errors
.less, .razor {
	+ .highlight .err,
	+ .highlighter-rouge .err {
		color: inherit;
		background-color: inherit;
	}
}