Greg Whitworth gregwhitworth

## custom-props-get-prop-value.js
var myComponent = document.getElementsByClassName('my-component')[0];
var cs = getComputedStyle(myComponent);
cs.getPropertyValue('--primary');

## custom-props-valid-prop.css
--bg: rgb(calc(var(--r) + var(--modifier)), calc(var(--g) + var(--modifier)), calc(var(--b) + (var(--modifier) + 50)));

## custom-props-building.css
--building-r-mod: 0;
--building-g-mod: 0;
--building-b-mod: 0;

## custom-props-building-calc.css
.distant-building__window
{
    fill: rgb(
    calc(111 + (111 * var(--building-r-mod))),
    calc(79 + (79 * var(--building-g-mod))),
    calc(85 + (85 * var(--building-b-mod)))
    );
}

## custom-props-tail-wag.css
.tail
{
    transform: translateY(10px) rotate(var(--tail-rotate));
    transform-origin: 60% 84%;
    animation: wagTail 250ms infinite;
}

@keyframes wagTail
{
    from

## custom-props-get-property.js
var night = function() {
  vars = [
    {name: "--sky-start", value: "rgb(100, 75, 128)"},
    {name: "--sky-end", value: "rgb(45, 45, 81)"},
    {name: "--light-r-mod", value: "-17.5"},
    {name: "--light-g-mod", value: "25"},
    {name: "--light-b-mod", value: "110"},
    {name: "--show-stars", value: "block"},
    {name: "--building-r-mod", value: "-.25"},
    {name: "--building-g-mod", value: 0},

## creating-fallbacks.html
<!doctype html>
<html>
<head>
    <title>Fallbacks!!!</title>
    <style>
    #test {
        width: 100px;
        height: 100px;
        background: red;
    }

## css-grid-3-by-three.css
.puzzle-game {
	display: grid;
	grid-area: game;
	align-self: start;
	justify-self: center;
	max-width: 35vw;
	border: 10px solid cornflowerblue;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	background: rgba(0, 0, 0, .5);
}

## css-grid-example-of-longhands.css
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;

## index.html
<p>Variable Fonts</p>
	var myComponent = document.getElementsByClassName('my-component')[0];
	var cs = getComputedStyle(myComponent);
	cs.getPropertyValue('--primary');
	--building-r-mod: 0;
	--building-g-mod: 0;
	--building-b-mod: 0;
	.distant-building__window
	{
	fill: rgb(
	calc(111 + (111 * var(--building-r-mod))),
	calc(79 + (79 * var(--building-g-mod))),
	calc(85 + (85 * var(--building-b-mod)))
	);
	}
	.tail
	{
	transform: translateY(10px) rotate(var(--tail-rotate));
	transform-origin: 60% 84%;
	animation: wagTail 250ms infinite;
	}

	@keyframes wagTail
	{
	from
	var night = function() {
	vars = [
	{name: "--sky-start", value: "rgb(100, 75, 128)"},
	{name: "--sky-end", value: "rgb(45, 45, 81)"},
	{name: "--light-r-mod", value: "-17.5"},
	{name: "--light-g-mod", value: "25"},
	{name: "--light-b-mod", value: "110"},
	{name: "--show-stars", value: "block"},
	{name: "--building-r-mod", value: "-.25"},
	{name: "--building-g-mod", value: 0},
	<!doctype html>
	<html>
	<head>
	<title>Fallbacks!!!</title>
	<style>
	#test {
	width: 100px;
	height: 100px;
	background: red;
	}
	.puzzle-game {
	display: grid;
	grid-area: game;
	align-self: start;
	justify-self: center;
	max-width: 35vw;
	border: 10px solid cornflowerblue;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	background: rgba(0, 0, 0, .5);
	}
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;