crswll

import React from "react";
import classnames from "classnames";

export const BaseButton = ({ className: parentClassNames, ...props }) => (
  <button
    className={classnames(
      parentClassNames,
      "inline-block outline-none px-4 transition-bg transition-color transition-fast select-none"
    )}
    {...props}

crswll

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,main{display:block}a{background-color:transparent;-webkit-text-decoration-skip:objects}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}svg:not(:root){overflow:hidden}button,input,select{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{color:inherit;display:table;max-width:100%;white-space:normal}[ty

crswll

import React from 'react'
import styles from './CircularProgressBar.module.css'

const circlePath = 'M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831'

const CircularProgressBar = ({
  percentage = 0,
  ...props
}) => {
  return (

crswll

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,main{display:block}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}svg:not(:root){overflow:hidden}button,input,select{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{color:inherit;display:table;max-width:100%;white-space:normal}[

crswll

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,main{display:block}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}svg:not(:root){overflow:hidden}button,input,select{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{color:inherit;display:table;max-width:100%;white-space:normal}[

crswll

Back Button (Query/Hash Params)

Put where to go back to in the URL when leaving the page via a query or hash param.

Example

Pillar

1. Overview: /
2. Click Profile Pillar 666: /profiles/666#back=overview

crswll

let grid = [
  'c', 'a', 't',
  'o', 's', 'k',
  'p', 'y', 'u',
]

let words = [
  'cat',
  'copy',
  'ask',

crswll

<template>
  <span class="icon"/>
</template>

<style>
  .icon {
    display: inline-block;
  }

  .icon > svg {

crswll

"use strict"

const scene = 'px:scene.1.js'
const querystring = 'querystring'
const keys = 'px:tools.keys.js'
const lines = [
  { name: 'Bill', number: '1234567890' },
  { name: 'Mary', number: '2345678901' },
]

crswll

import { EVENTS } from '../constants'
import { getKeyFromKeyCode } from '../helpers'
import Remote from '../remote'

export default {
  props: {
    guid: {
      type: String,
      required: true,
    },