lonekorean

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

lonekorean

@mixin code-wrap {
    border: 1px dashed #ccc;
    background-color: #f2f2f2;
}

code {
    font-family: 'Source Code Pro', monospace;
}

// inline code

lonekorean

exports.createPages = ({ graphql, actions }) => {
    return new Promise((resolve, reject) => {
        graphql(`
            {
                allMarkdownRemark(
                    sort: { fields: [frontmatter___date], order: DESC }
                ) {
                    edges {
                        node {
                            fields {

lonekorean

// 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',

lonekorean

#bg1 {
    z-index: -1;
    filter: url('#goo');
}

#bg2 {
    z-index: -2;
    filter: url('#goo') blur(4px);
}

lonekorean

<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

options: {
    canvasSelector: '',             // to find <canvas> in DOM to draw on
    radiusRange: [75, 150],         // random range of body radii
    xVarianceRange: [-1, 1],        // random range of x velocity scaling on bodies
    yVarianceRange: [0.5, 1.5],     // random range of y velocity scaling on bodies
    airFriction: 0.04,              // air friction of bodies
    opacity: 1,                     // opacity of bodies
    collisions: false,              // do bodies collide or pass through
    scrollVelocity: 0.015,          // scaling of scroll delta to velocity applied to bodies
    pixelsPerBody: 50000,           // viewport pixels required for each body added

lonekorean

options: {
    canvasSelector: '',             // to find <canvas> in DOM to draw on
    radiusRange: [30, 60],          // random range of body radii
    xVarianceRange: [0.1, 0.3],     // random range of x velocity scaling on bodies
    yVarianceRange: [0.5, 1.5],     // random range of y velocity scaling on bodies
    airFriction: 0.03,              // air friction of bodies
    opacity: 0.5,                   // opacity of bodies
    collisions: false,              // do bodies collide or pass through
    scrollVelocity: 0.025,          // scaling of scroll delta to velocity applied to bodies
    pixelsPerBody: 40000,           // viewport pixels required for each body added

lonekorean

// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
    // start first hex bokeh background
    Object.create(hexBokeh).init({
        canvasSelector: '#bg1'
    });

    // start second hex bokeh background
    Object.create(hexBokeh).init({
        canvasSelector: '#bg2',

lonekorean

#bg1 {
    z-index: -1;
    filter: blur(1px);
}

#bg2 {
    z-index: -2;
    filter: blur(10px);
}