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-invalid.css
div {
  --primary: blue;
  margin-top: var(--primary, 12px);
}

## custom-props-feature-detection.css
body {
  background: red;
}

@supports(--foo: blue) {
  body {
    background: green;
  }
}

## custom-props-feature-detection-2.css
:root {
  --foo: true;
}

body {
  background: red;
}

@supports(--foo: false) {
  body {

## custom-props-animate.css
div {
  --pos: 0;
  left: var(--pos);
  animation: move 1s;
}

@keyframes move {
  to {
    --pos: 50px;
  }
	/*
	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;
	}
	body {
	background: red;
	}

	@supports(--foo: blue) {
	body {
	background: green;
	}
	}
	:root {
	--foo: true;
	}

	body {
	background: red;
	}

	@supports(--foo: false) {
	body {
	div {
	--pos: 0;
	left: var(--pos);
	animation: move 1s;
	}

	@keyframes move {
	to {
	--pos: 50px;
	}