lonekorean

self.addEventListener('message', receiveMessage);

function receiveMessage(e) {
    self.postMessage('Sup, ' + e.data + '?');
}

lonekorean

window.addEventListener('keydown', function(e) {
    if (e.keyCode === 116 || (e.ctrlKey && e.keyCode === 82)) { // f5 or ctrl + r
        // parse URL
        var split = window.location.href.split('#');
        var url = split[0];
        var hash = split[1];

        // set cache-busting query string param
        var pair = 'cachebuster=' + Date.now();
        if (url.indexOf('cachebuster=') > -1) {

lonekorean

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
  
    /* ...and various other button styles */
}

button:hover {

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

heroku login

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

.items {
    display: flex;
    flex-direction: column;
}

.done {
    order: 1;
}

input:checked + label {

lonekorean

CSS.registerProperty({
    name: '--dot-spacing',
    syntax: '<length>',
    initialValue: '20px',
    inherits: false
});
CSS.registerProperty({
    name: '--dot-fade-offset',
    syntax: '<percentage>',
    initialValue: '0%',