Greg Whitworth gregwhitworth

## example-css-usage.json
{
  "types": [
    0,
    10003,
    0,
    3,
    113,
    47,
    0,
    24,

## get-shopify-urls.js
/*
Go to your files page under Settings -> Files
Open the devtools and run this script

You'll then inputTextArr which is an array of all CDN values for files on the page.
*/

let anchors = []
let inputTextArr = [];
let images = [];

## index.html
<p>Variable Fonts</p>

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

## 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);
}

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

## 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},

## 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-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-building.css
--building-r-mod: 0;
--building-g-mod: 0;
--building-b-mod: 0;
	/*
	Go to your files page under Settings -> Files
	Open the devtools and run this script

	You'll then inputTextArr which is an array of all CDN values for files on the page.
	*/

	let anchors = []
	let inputTextArr = [];
	let images = [];
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	.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);
	}
	<!doctype html>
	<html>
	<head>
	<title>Fallbacks!!!</title>
	<style>
	#test {
	width: 100px;
	height: 100px;
	background: red;
	}
	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},
	.tail
	{
	transform: translateY(10px) rotate(var(--tail-rotate));
	transform-origin: 60% 84%;
	animation: wagTail 250ms infinite;
	}

	@keyframes wagTail
	{
	from
	.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)))
	);
	}
	--building-r-mod: 0;
	--building-g-mod: 0;
	--building-b-mod: 0;