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

MrGrigri

@layer reset {
  /*
    Josh's Custom CSS Reset
    https://www.joshwcomeau.com/css/custom-css-reset/
  */

  /* Modified by Michael Richins */
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

MrGrigri

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.

MrGrigri

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

* {
  outline-offset: -2px;
}

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

MrGrigri

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

MrGrigri

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

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

  constructor() {}

MrGrigri

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

MrGrigri

<section data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'>
  <h2>Gist-Powered by Mike</h2>
  <h1>Reveal.js</h1>
  <h2>Slideshow Presentations</h2>
  <br/>
  <h1 class='fragment grow'><a style='color:deepskyblue;' href='http://gist-reveal.it'>gist-reveal.it</a></h1>
</section>
<section data-background-transition='zoom' data-transition='linear' id='try-it'>
  <h2>Try it out!</h2>
  <p>Create your own deck by forking a copy of <a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>https://gist.github.com/ryanj/af84d40e58c5c2a908dd</a></p>

MrGrigri

@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin flexDirection($direction: row) {
    $boxOrient: horizontal;

MrGrigri

  @echo off
  @reg delete "HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text 3"
  @reg delete "HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text 3"
  @reg delete "HKEY_CLASSES_ROOT\*\shell\Open with Sublime Text 3\command"
  @reg delete "HKEY_CLASSES_ROOT\Folder\shell\Open with Sublime Text 3"
  @reg delete "HKEY_CLASSES_ROOT\Folder\shell\Open with Sublime Text 3"
  @reg delete "HKEY_CLASSES_ROOT\Folder\shell\Open with Sublime Text 3\command"