Snek/src/less/snek.less

// full CSS reset
@import 'fullreset.less';

// load the font
@import url('https://fonts.googleapis.com/css?family=Fira+Code:400,700&display=swap');
html {
	font-family: 'Fira Code', monospace;
}

// setup REM units
html {
	font-size: 62.5% !important;
}

// setup the colors and styles
@accentbg: #fba49b;
@bg: #ffefdf;
@accentfg: #930a16;
@fg: #23090d;

body {
	color: @fg;
}

h1, h2, h3, h4, h5, h6, strong, a {
	color: @accentfg;
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: .1em;
}

p + p {
	margin-top: 1em;
}

a {
	text-decoration: inherit;
	display: contents;
}

em {
	font-style: italic;
}

code {
	background: @accentbg;
	font-weight: bold;
}

header, footer {
	background: @accentbg;

	img {
		border: 4px solid @accentfg;
		border-radius: 2px;
	}
}

// setup the layout
html, body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

header img, footer img {
	float: left;
	margin-right: 1rem;
}
header img {
	height: 8rem;
}
footer img {
	height: 4rem;
}

header ul {
	display: flex;
	list-style-type: none;

	li {
		margin-right: 1ex;
		font-size: 2rem;

		a {
			color: @fg;
		}
	}
}

header, footer, main {
	padding: 2rem;
}
main {
	flex: 1;
	display: flex;
	position: relative;
	background: @bg;

	canvas {
		position: absolute;
		top: 0;
		left: 0;
	}
}

h1 {
	font-size: 4rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.9rem;
}
h4 {
	font-size: 1.8rem;
}
h5 {
	font-size: 1.7rem;
}
p {
	font-size: 1.6rem;
}

.hidden {
	display: none !important;
}

// setup the progress bar
@import 'progressBar';

// setup the main menu
@import 'mainMenu';

// setup the popups
@import 'popup';

// setup the hud
@import 'hud';

// setup the help file
@import 'help';