MrGrigri

@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);

MrGrigri

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

@Injectable({ providedIn: 'root' })

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

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>