Stephen Koch skoch

title

description

tabs

Button

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```

Usage

Style

Code

Accessibility

Some mdx text, with a component

	/**
	* Allows you to use retina images at various pixel densities on Contentful.
	* Note: you will need to upload the highest resolution!
	* Examples:
	*
	* @include retina("/images/mypic.jpg", 2);
	* @include retina("/images/mypic.jpg", 3, 100px 100px, left top no-repeat transparent);
	*
	* @param {Value} $path The path to the file name.
	* @param {Value} $base_size The base size to start with. Will at least create @1x and @2x and more if cap is 3 or higher

	/* usage */
	.something {
	@include contentful_retina('space_id/asset_id/token/name.jpg', 1024, 3, cover, no-repeat center center);
	}
	/* output */
	.something {
	background: url("http://images.contentful.com/space_id/asset_id/token/name.jpg?w=1024") no-repeat center center;
	background-size: cover; }
	@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
	.something {

	module.exports = function(pattern, callback) {
	var konami = {
	addEvent: function(obj, type, fn, refObj) {
	if (obj.addEventListener) {
	obj.addEventListener(type, fn, false);
	} else if (obj.attachEvent) {
	// IE
	obj[`e${type}${fn}`] = fn;
	obj[type + fn] = function() {
	obj[`e${type}${fn}`](window.event, refObj);

	# see: https://www.digitalocean.com/community/tutorials/how-to-implement-browser-caching-with-nginx-s-header-module-on-centos-7

	# Expires map
	map $sent_http_content_type $expires {
	default off;
	text/html epoch;
	text/css max;
	application/javascript max;
	~image/ max;
	}

	server {
	listen 80 default_server;
	listen [::]:80 default_server;
	server_name example.com www.example.com;
	return 301 https://$server_name$request_uri;
	}

	server {
	# listen 80;

	[[NSNotificationCenter defaultCenter] addObserver:self
	selector:@selector(tokenRefreshNotification:)
	name:kFIRInstanceIDTokenRefreshNotification object:nil];

	const markerSvg = {
	url: 'data:image/svg+xml,%3Csvg width="39" height="49" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cpath d="M19.5 2C29.165 2 37 9.835 37 19.5c0 13.933-15.267 26.984-17.5 26.984C16.982 46.484 2 33.433 2 19.5 2 9.835 9.835 2 19.5 2zm.126 25.18a6.715 6.715 0 1 0 0-13.43 6.715 6.715 0 0 0 0 13.43z" fill="%23000" fill-rule="nonzero"/%3E%3Cpath d="M19.5 1C29.717 1 38 9.283 38 19.5c0 6.465-3.099 13.192-8.139 19.35-3.85 4.706-8.608 8.634-10.361 8.634-1.878 0-6.608-3.876-10.47-8.637C4.06 32.723 1 25.977 1 19.5 1 9.283 9.283 1 19.5 1zm.126 25.18a5.715 5.715 0 1 0 0-11.43 5.715 5.715 0 0 0 0 11.43z" stroke="%23FFF" stroke-width="2" fill="%231D5FE2"/%3E%3C/g%3E%3C/svg%3E',
	};

	const markerSvgOver = {
	url: 'data:image/svg+xml,%3Csvg width="39" height="49" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cpath d="M19.5 2C29.165 2 37 9.835 37 19.5c0 13.933-15.267 26.984-17.5 26.984C16.982 46.484 2 33.433 2 19.5 2 9.835 9.835 2 19.5 2zm.12

	select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10'%3E%3Cpolyline fill='none' stroke='%233194E0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='1 1 8.5 8.5 16 1'/%3E%3C/svg%3E%0A");
	background-position: calc(100% - 2rem) 2.6rem;
	background-repeat: no-repeat;

	&:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10'%3E%3Cpolyline fill='none' stroke='%23C9EEFE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='1 1 8.5 8.5 16 1'/%3E%3C/svg%3E%0A");
	}
	}