mundi morgado mundizzle

58 bytes of CSS to look great nearly everywhere

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;
}

	// // LUI Next Colors
	// // LUI Now colors live in @lendi-ui/color package
	import hexToRgba from 'hex-to-rgba';

	export const isHex = (str: string) => str.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/);

	type Shade = Partial<950 \| 900 \| 800 \| 700 \| 600 \| 500 \| 400 \| 300 \| 200 \| 100 \| 50 \| 25 \| 0>;
	type Format = 'hexadecimal' \| 'rgba';
	type Category = 'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'shade' \| 'focus';
	type ColorObject = Partial<{ [key in Shade]: { value: string; format: Format } }>;

	const { existsSync } = require('fs');
	const { execSync } = require('child_process');

	// ================
	// Check existence.
	// ================

	const distFolderExists = existsSync('dist');
	const srcFolderExists = existsSync('src');

	/*
	Helper to mock DOM methods, for
	when an element might not exist.
	*/
	const getDomFallback = () => {
	return {
	// Props.
	children: [],
	className: '',
	classList: {

	html:not([data-has-css-animation='true']) {
	@include remove-css-animation;
	}

	@media (prefers-reduced-motion: reduce) {
	@include remove-css-animation;
	}

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()

	/* Highliting accessibility errors in HTML */

	/* highlight HTML element with invalid value for lang attribute */
	html:not([lang]),
	html[lang=""] {
	border: 2px dotted red !important;
	}

	/* highlight images missing alt text */
	img:not([alt]) {

	Seven different types of CSS attribute selectors

	// This attribute exists on the element
	[value]

	// This attribute has a specific value of cool
	[value='cool']

	// This attribute value contains the word cool somewhere in it
	[value*='cool']

	import React, { useContext } from 'react'

	import { UserContext, UserContextProvider } from './UserContext'

	export default (props) => {
	const [user, setUser] = useContext(UserContext)
	return (
	<UserContextProvider user={null}>
	<div>User name: {user && user.name}</div>
	</UserContextProvider>

	<?xml version="1.0" encoding="UTF-8"?>
	<opml version="1.0">
	<head>
	<title>RSS subscriptions for [email protected]</title>
	<dateCreated>Sun, 09 Jun 2019 11:05:23 -0500</dateCreated>
	<ownerEmail>[email protected]</ownerEmail>
	</head>
	<body>
	<outline text="A List Apart: The Full Feed" title="A List Apart: The Full Feed" type="rss" xmlUrl="http://feeds.feedburner.com/alistapart/main" htmlUrl=" https://alistapart.com "/>
	<outline text="Cognition by Happy Cog" title="Cognition by Happy Cog" type="rss" xmlUrl="http://feeds.feedburner.com/cognitionfeed" htmlUrl="http://cognition.happycog.com/feed"/>