Parker Bossier

UI • UX • U Got It

@colorDark: #1b1a1a;
// https://stackoverflow.com/questions/29591465/use-css-variables-with-rgba-for-gradient-transparency
@colorDarkRgb: red(@colorDark), green(@colorDark), blue(@colorDark);
@splitLayoutThreshold: 1300px;

.darkVars() {
	--bg-color: @colorDark;
	// https://stackoverflow.com/questions/29591465/use-css-variables-with-rgba-for-gradient-transparency
	--bg-color-rgb: @colorDarkRgb;
	--muted-color: #555555;
	--text-color: #dddddd;
}
.lightVars() {
	--bg-color: white;
	--bg-color-rgb: 255, 255, 255;
	--muted-color: #bbbbbb;
	--text-color: @colorDark;
}

:root {
	--beard-color: black;
	--gutter: 16px;
	.lightVars();

	@media (prefers-color-scheme: dark) {
		.darkVars();
	}
}

----------

/** Inlines sources and minifies the resulting markup (when in prod) */
function compileHtml() {
	const stream = src('./app/index.html')
		.pipe(inlinesource({
			// only minify inline sources in prod
			compress: isProd()
		}));

	// only minify HTML in prod
	if (isProd())
		stream.pipe(htmlmin({
			collapseWhitespace: true
		}));

	stream.pipe(dest('./bld'));
	return stream;
}

----------

<meta charset="UTF-8" />
<meta
	name="description"
	content="Hello! I'm Parker, and I like to implement usable, thoughtful UX on mobile and the web."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Parker Bossier</title>

<!-- https://www.favicon-generator.org/ (abbreviated) -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- https://fonts.google.com/?category=Monospace&selection.family=Roboto+Mono:400,500 -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap" rel="stylesheet" />
<link href="./reset.css" inline rel="stylesheet" />
<link href="../bld/styles.css" inline rel="stylesheet" />

<!-- Global site tag (gtag.js) - Google Analytics -->
<script defer src="https://www.googletagmanager.com/gtag/js?id=UA-35749496-1"></script>
<link rel="preconnect" href="https://www.google-analytics.com" />