Michael Richins MrGrigri

Basic Light and Dark color scheme/palette

These colors are based on the Atlasian's design system.

This can be paired with my other animated-outline.css Gist

Simple vanilla JavaScript router

This is a very minimal router to be used in a vanilla JavaScript project. There are only two exposed functions and one options object.

I have used this with a simple ViteJs web server.

Functions

initializeRoutes(routes, options): This function will initialize the routing. A routes object must be passed as well as an optional options object. goToRoute(route): This function is to be called in JavaScript and will navigate to the route.

	@layer utils {
	:is(.sr-only, .sr-only-focusable:not(:focus, :focus-within)) {
	border: 0 !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	width: 1px !important;
	white-space: nowrap !important;

	@property --min-inline-size {
	syntax: "<length>";
	inherits: false;
	initial-value: 100px;
	}

	.container {
	display: grid;
	grid-template-rows: var(--min-inline-size);
	grid-auto-rows: var(--min-inline-size);

	import { isPlatformBrowser } from '@angular/common';
	import {
	EventEmitter,
	inject,
	Injectable,
	Output,
	PLATFORM_ID,
	} from '@angular/core';

	@Injectable({ providedIn: 'root' })

	@layer reset {
	:root {
	--_body-font-family: var(--reset-body-font-family, sans-serif);
	--_heading-font-family: var(--reset-heading-font-family, serif);
	--_code-font-family: var(--reset-code-font-family, monospace);

	--_text-max-width: var(--reset-text-max-width, 65ch);

	--_details-duration: var(--reset-details-duration, 175ms);
	--_details-timing: var(--reset-details-timing, ease-out);

	:root {
	--outline-color: #346ebd;
	--outline: 2px solid var(--outline-color);
	}

	* {
	outline-offset: -2px;
	}

	*:not(:active):focus-visible {

	<datalist id="us_states">
	<option value="al" label="Alabama">Alabama</option>
	<option value="ak" label="Alaska">Alaska</option>
	<option value="az" label="Arizona">Arizona</option>
	<option value="ar" label="Arkansas">Arkansas</option>
	<option value="ca" label="California">California</option>
	<option value="co" label="Colorado">Colorado</option>
	<option value="ct" label="Connecticut">Connecticut</option>
	<option value="de" label="Delaware">Delaware</option>
	<option value="fl" label="Florida">Florida</option>

	import { Injectable } from '@angular/core';

	@Injectable({
	providedIn: 'root',
	})
	export class IdService {
	public ids: string[] = [];

	constructor() {}

	:root {
	--material-color-red: #f44336;
	--material-color-red-50: #ffebee;
	--material-color-red-100: #ffcdd2;
	--material-color-red-200: #ef9a9a;
	--material-color-red-300: #e57373;
	--material-color-red-400: #ef5350;
	--material-color-red-500: var(--material-color-red);
	--material-color-red-600: #e53935;
	--material-color-red-700: #d32f2f;