Skip to content

Instantly share code, notes, and snippets.

Avatar

Will Boyd lonekorean

View GitHub Profile
@lonekorean
lonekorean / file.css
Last active Nov 1, 2020
Prefers reduced motion test
View file.css
@media (prefers-reduced-motion) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
@lonekorean
lonekorean / file.scss
Created Mar 11, 2019
Coder's Block v6 code styles
View file.scss
@mixin code-wrap {
border: 1px dashed #ccc;
background-color: #f2f2f2;
}
code {
font-family: 'Source Code Pro', monospace;
}
// inline code
@lonekorean
lonekorean / file.js
Created Dec 20, 2018
A chunk of my gatsby-node.js
View file.js
exports.createPages = ({ graphql, actions }) => {
return new Promise((resolve, reject) => {
graphql(`
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
node {
fields {
@lonekorean
lonekorean / gist:8757625
Last active Nov 6, 2018
Query string get with null coalescing
View gist:8757625
string city = Request.QueryString["city"] ?? "";
@lonekorean
lonekorean / gist:1b9a17bbf235a7557a0e
Created Jun 10, 2015
Checkbox trickery, ordering with flexbox
View gist:1b9a17bbf235a7557a0e
.items {
display: flex;
flex-direction: column;
}
.done {
order: 1;
}
input:checked + label {
@lonekorean
lonekorean / file.js
Last active Oct 14, 2018
Custom properties for polka dots
View file.js
CSS.registerProperty({
name: '--dot-spacing',
syntax: '<length>',
initialValue: '20px',
inherits: false
});
CSS.registerProperty({
name: '--dot-fade-offset',
syntax: '<percentage>',
initialValue: '0%',
@lonekorean
lonekorean / file.js
Last active Oct 14, 2018
Registering custom properties
View file.js
CSS.registerProperty({
name: '--tooth-width',
syntax: '<length>',
initialValue: '40px',
inherits: false
});
CSS.registerProperty({
name: '--tooth-height',
syntax: '<length>',
initialValue: '20px',
@lonekorean
lonekorean / file.html
Last active Jun 11, 2018
Goo blobs SVG filter
View file.html
<svg>
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 50 -16
" result="matrix" />
@lonekorean
lonekorean / file.js
Created Jun 10, 2018
Starting both goo blobs backgrounds
View file.js
// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
// start first goo blobs background
Object.create(gooBlobs).init({
canvasSelector: '#bg1'
});
// start second goo blobs background
Object.create(gooBlobs).init({
canvasSelector: '#bg2',
View file.css
#bg1 {
z-index: -1;
filter: url('#goo');
}
#bg2 {
z-index: -2;
filter: url('#goo') blur(4px);
}