Skip to content

Instantly share code, notes, and snippets.

@gregwhitworth
gregwhitworth / example-css-usage.json
Created Jul 22, 2020
Shows a basic css usage for a website
View example-css-usage.json
This file has been truncated, but you can view the full file.
{
"types": [
0,
10003,
0,
3,
113,
47,
0,
@gregwhitworth
gregwhitworth / get-shopify-urls.js
Last active Apr 25, 2020
Get URLs to all Shopify urls
View 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 = [];
@gregwhitworth
gregwhitworth / index.html
Created Dec 7, 2017
Variable Fonts playground made with Mavo
View index.html
<p>Variable Fonts</p>
View css-grid-example-of-longhands.css
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
View 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);
}
View creating-fallbacks.html
<!doctype html>
<html>
<head>
<title>Fallbacks!!!</title>
<style>
#test {
width: 100px;
height: 100px;
background: red;
}
View 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},
View custom-props-tail-wag.css
.tail
{
transform: translateY(10px) rotate(var(--tail-rotate));
transform-origin: 60% 84%;
animation: wagTail 250ms infinite;
}
@keyframes wagTail
{
from
View 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)))
);
}
View custom-props-building.css
--building-r-mod: 0;
--building-g-mod: 0;
--building-b-mod: 0;
You can’t perform that action at this time.