When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}| export let action: ActionFunction = async ({ request, params }) => { | |
| let session = await requireAuthSession(request); | |
| await ensureUserAccount(session.get("auth")); | |
| let data = Object.fromEntries(await request.formData()); | |
| invariant(typeof data._action === "string", "_action should be string"); | |
| switch (data._action) { | |
| case Actions.CREATE_TASK: | |
| case Actions.UPDATE_TASK_NAME: { |
| function ThumbnailGenerator() { | |
| this.resizeCanvas = document.createElement('canvas'); | |
| this.generate = function (imgSrc, thumbDims, compression) { | |
| [this.resizeCanvas.width, this.resizeCanvas.height] = [thumbDims.x, thumbDims.y]; | |
| const ctx = this.resizeCanvas.getContext("2d"); | |
| const tmp = new Image(); | |
| const ret = new Promise(resolve => { |
| $space-inset-default = 16px 16px 16px 16px; | |
| $space-inset-xs = 4px 4px 4px 4px; | |
| $space-inset-s = 8px 8px 8px 8px; | |
| $space-inset-m = 16px 16px 16px 16px; | |
| $space-inset-l = 32px 32px 32px 32px; | |
| $space-inset-xl = 64px 64px 64px 64px; | |
| $space-stack-default = 0 0 16px 0; | |
| $space-stack-xs = 0 0 4px 0; | |
| $space-stack-s = 0 0 8px 0; | |
| $space-stack-m = 0 0 16px 0; |
| // Add on element with overflow | |
| -webkit-mask-image: -webkit-radial-gradient(white, black); |
| #!/bin/bash | |
| case $# in | |
| 0) | |
| echo "Usage: $0 {start|stop}" | |
| exit 1 | |
| ;; | |
| 1) | |
| case $1 in | |
| start) |
| /** | |
| * A redux middleware for processing Meteor methods | |
| * When an action is dispatched, it will pass through our middleware. | |
| * if denoted a method, we will dispatch the action with readyState of loading | |
| * The method passed in is then called, and dispatches further ready states for success/error | |
| * The reducer shape should include { data, readyState } for use in the UI | |
| * @returns {Function} | |
| */ | |
| export default function methodMiddleware() { | |
| return (next) => { |
| // Image preload | |
| import { ensureArray } from './util'; | |
| export default function preload(images, callback) { | |
| let done = () => { | |
| counter--; | |
| if (counter === 0) { | |
| callback(errors.length ? errors : null); | |
| } |
| // Polyfill ES6 for older browsers | |
| import 'babel/polyfill'; | |
| // Trigger globals / methods | |
| import 'simon/client/startup'; | |
| import './routes'; |
| /** | |
| * This code is licensed under the terms of the MIT license | |
| * | |
| * Deep diff between two object, using lodash | |
| * @param {Object} object Object compared | |
| * @param {Object} base Object to compare with | |
| * @return {Object} Return a new object who represent the diff | |
| */ | |
| function difference(object, base) { | |
| function changes(object, base) { |