Nikita Pashinsky nikitapashinsky

Namespace	Utility classes
`--accent-color-*`	Accent color utilities like `accent-blue-600`
`--animate-*`	Animation utilities like `animate-spin`
`--aspect-*`	Aspect ratio utilities like `aspect-video`
`--backdrop-blur-*`	Backdrop blur utilities like `backdrop-blur-md`
`--backdrop-brightness-*`	Backdrop brightness utilities like `backdrop-brightness-125`
`--backdrop-contrast-*`	Backdrop contrast utilities like `backdrop-contrast-125`
`--backdrop-grayscale-*`	Backdrop grayscale utilities like `backdrop-grayscale`
`--backdrop-hue-rotate-*`	Backdrop hue rotate utilities like `backdrop-hue-rotate-60`

Change Arc Browser Icon

A collection of commands that change the Arc Browser icon on macOS.

Commands

Theme	Command
Candy Arc	`defaults write company.thebrowser.Browser currentAppIconName candy`

Fontsource with Remix

Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the @font-face src.

Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own @font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.

Install your font:

npm install --save @fontsource/montserrat

Hexadecimal color code for transparency

How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.

	var gulp = require('gulp');
	var browserSync = require('browser-sync').create();

	// Static Server + watching css/html files
	gulp.task('serve', ['css'], function() {

	browserSync.init({
	proxy: "http://localhost:2368"
	});

	:root {
	--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
	--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
	--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
	--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
	--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
	--ease-in-circ: cubic-bezier(.6, .04, .98, .335);

	--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
	--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

	/*
	* Динамическая сетка
	* Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell...
	*/

	.grid
	box-sizing border-box

	/*
	* Генерирует стили для сетки

	<!doctype html>

	<!-- Adapted from https://gist.github.com/tfausak/2222823 -->

	<html>
	<head>
	<title>Mobile-ready web app</title>

	<!-- CONFIGURATION -->

	<!-- http://www.brucelawson.co.uk/2010/a-minimal-html5-document/ -->

	<!doctype html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<title>blah</title>
	</head>
	<body>
	<p>I'm the content</p>