diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..ee09fac
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v20.11.1
diff --git a/.prettierrc b/.prettierrc
index 6dcf33c..4f3714a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,6 +2,8 @@
 	"endOfLine": "lf",
 	"insertPragma": true,
 	"printWidth": 120,
+	"singleAttributePerLine": true,
 	"singleQuote": true,
-	"useTabs": true
-}
\ No newline at end of file
+	"trailingComma": "es5",
+	"useTabs": false
+}
diff --git a/gulpfile.js b/gulpfile.js
index f7da490..9cde609 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -30,7 +30,7 @@ const GENERATED_CSS = DEST + '/*.css';
 
 function sassTask() {
 	return src(SASS_SOURCES)
-		.pipe(sass())
+		.pipe(sass({ outputStyle: 'compressed' }))
 		.pipe(
 			autoprefixer({
 				cascade: false,
diff --git a/package.json b/package.json
index 88e6e30..43a8344 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"start": "gulp",
+		"format": "prettier --write sass/*.scss",
 		"test": "echo \"Error: no test specified\" && exit 1"
 	},
 	"repository": {
diff --git a/sass/_base.scss b/sass/_base.scss
index 1d82849..2247eaf 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -1,4 +1,14 @@
-/** @format */
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
 
 @import 'variables';
 @import 'functions';
@@ -9,9 +19,9 @@ textarea,
 keygen,
 select,
 button {
-	font-family: Rubik, sans-serif;
-	font-size: 14px;
-	font-weight: 400;
+  font-family: Rubik, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
 }
 
 h1,
@@ -20,223 +30,223 @@ h3,
 h4,
 h5,
 h6 {
-	font-weight: 500;
+  font-weight: 500;
 }
 
 @mixin set-bg-border-colors($bgcolor) {
-	$color: foreground-meeting-color-contrast($bgcolor);
+  $color: foreground-meeting-color-contrast($bgcolor);
 
-	background-color: $bgcolor;
-	border-color: darken($bgcolor, 6.667%);
-	color: $color;
+  background-color: $bgcolor;
+  border-color: darken($bgcolor, 6.667%);
+  color: $color;
 
-	a {
-		color: $color;
-	}
+  a {
+    color: $color;
+  }
 
-	.active {
-		a {
-			color: $color;
-		}
-	}
+  .active {
+    a {
+      color: $color;
+    }
+  }
 }
 
 .dark-gray {
-	@include set-bg-border-colors($dark-gray);
+  @include set-bg-border-colors($dark-gray);
 }
 .medium-gray {
-	@include set-bg-border-colors($medium-gray);
+  @include set-bg-border-colors($medium-gray);
 }
 .light-gray {
-	@include set-bg-border-colors($light-gray);
+  @include set-bg-border-colors($light-gray);
 }
 .lightest-gray {
-	@include set-bg-border-colors($lightest-gray);
+  @include set-bg-border-colors($lightest-gray);
 }
 .dark-blue {
-	@include set-bg-border-colors($dark-blue);
+  @include set-bg-border-colors($dark-blue);
 }
 .medium-blue {
-	@include set-bg-border-colors($medium-blue);
+  @include set-bg-border-colors($medium-blue);
 }
 .light-blue {
-	@include set-bg-border-colors($light-blue);
+  @include set-bg-border-colors($light-blue);
 }
 .lightest-blue {
-	@include set-bg-border-colors($lightest-blue);
+  @include set-bg-border-colors($lightest-blue);
 }
 .dark-green {
-	@include set-bg-border-colors($dark-green);
+  @include set-bg-border-colors($dark-green);
 }
 .medium-green {
-	@include set-bg-border-colors($medium-green);
+  @include set-bg-border-colors($medium-green);
 }
 .light-green {
-	@include set-bg-border-colors($light-green);
+  @include set-bg-border-colors($light-green);
 }
 .lightest-green {
-	@include set-bg-border-colors($lightest-green);
+  @include set-bg-border-colors($lightest-green);
 }
 .dark-red {
-	@include set-bg-border-colors($dark-red);
+  @include set-bg-border-colors($dark-red);
 }
 .medium-red {
-	@include set-bg-border-colors($medium-red);
+  @include set-bg-border-colors($medium-red);
 }
 .light-red {
-	@include set-bg-border-colors($light-red);
+  @include set-bg-border-colors($light-red);
 }
 .lightest-red {
-	@include set-bg-border-colors($lightest-red);
+  @include set-bg-border-colors($lightest-red);
 }
 .dark-amber {
-	@include set-bg-border-colors($dark-amber);
+  @include set-bg-border-colors($dark-amber);
 }
 .medium-amber {
-	@include set-bg-border-colors($medium-amber);
+  @include set-bg-border-colors($medium-amber);
 }
 .light-amber {
-	@include set-bg-border-colors($light-amber);
+  @include set-bg-border-colors($light-amber);
 }
 .lightest-amber {
-	@include set-bg-border-colors($lightest-amber);
+  @include set-bg-border-colors($lightest-amber);
 }
 .dark-accent {
-	@include set-bg-border-colors($dark-accent);
+  @include set-bg-border-colors($dark-accent);
 }
 .medium-accent {
-	@include set-bg-border-colors($medium-accent);
+  @include set-bg-border-colors($medium-accent);
 }
 .light-accent {
-	@include set-bg-border-colors($light-accent);
+  @include set-bg-border-colors($light-accent);
 }
 .lightest-accent {
-	@include set-bg-border-colors($lightest-accent);
+  @include set-bg-border-colors($lightest-accent);
 }
 .dark-plum {
-	@include set-bg-border-colors($dark-plum);
+  @include set-bg-border-colors($dark-plum);
 }
 .medium-plum {
-	@include set-bg-border-colors($medium-plum);
+  @include set-bg-border-colors($medium-plum);
 }
 .light-plum {
-	@include set-bg-border-colors($light-plum);
+  @include set-bg-border-colors($light-plum);
 }
 .lightest-plum {
-	@include set-bg-border-colors($lightest-plum);
+  @include set-bg-border-colors($lightest-plum);
 }
 .dark-raspberry {
-	@include set-bg-border-colors($dark-raspberry);
+  @include set-bg-border-colors($dark-raspberry);
 }
 .medium-raspberry {
-	@include set-bg-border-colors($medium-raspberry);
+  @include set-bg-border-colors($medium-raspberry);
 }
 .light-raspberry {
-	@include set-bg-border-colors($light-raspberry);
+  @include set-bg-border-colors($light-raspberry);
 }
 .lightest-raspberry {
-	@include set-bg-border-colors($lightest-raspberry);
+  @include set-bg-border-colors($lightest-raspberry);
 }
 .dark-banana {
-	@include set-bg-border-colors($dark-banana);
+  @include set-bg-border-colors($dark-banana);
 }
 .medium-banana {
-	@include set-bg-border-colors($medium-banana);
+  @include set-bg-border-colors($medium-banana);
 }
 .light-banana {
-	@include set-bg-border-colors($light-banana);
+  @include set-bg-border-colors($light-banana);
 }
 .lightest-banana {
-	@include set-bg-border-colors($lightest-banana);
+  @include set-bg-border-colors($lightest-banana);
 }
 
 // Generates aliases for level colors
 @each $level in danger, error, warning, info, success {
-	@each $tone in dark, medium, light, lightest {
-		.#{$tone}-#{$level} {
-			@if $level == error or $level == danger {
-				@extend .#{$tone}-red;
-			} @else if $level == warning {
-				@extend .#{$tone}-amber;
-			} @else if $level == info {
-				@extend .#{$tone}-blue;
-			} @else if $level == success {
-				@extend .#{$tone}-green;
-			}
-		}
-	}
+  @each $tone in dark, medium, light, lightest {
+    .#{$tone}-#{$level} {
+      @if $level == error or $level == danger {
+        @extend .#{$tone}-red;
+      } @else if $level == warning {
+        @extend .#{$tone}-amber;
+      } @else if $level == info {
+        @extend .#{$tone}-blue;
+      } @else if $level == success {
+        @extend .#{$tone}-green;
+      }
+    }
+  }
 }
 
 @mixin set-color($color, $tone: medium) {
-	@extend .#{$tone}-#{'' + $color};
+  @extend .#{$tone}-#{'' + $color};
 }
 
 @mixin set-normal-color($color, $tone) {
-	&.#{'' + $color} {
-		@include set-color($color, $tone);
-	}
+  &.#{'' + $color} {
+    @include set-color($color, $tone);
+  }
 }
 
 @mixin normal-active-colors($color, $tone) {
-	@include set-color($color, $tone);
+  @include set-color($color, $tone);
 
-	@each $state in /*hover, focus,*/ active {
-		&:#{$state} {
-			@if $state == hover {
-				@include set-color($color, $tone);
-			} @else {
-				@include set-color($color, dark);
-			}
-		}
-	}
+  @each $state in /*hover, focus,*/ active {
+    &:#{$state} {
+      @if $state == hover {
+        @include set-color($color, $tone);
+      } @else {
+        @include set-color($color, dark);
+      }
+    }
+  }
 }
 
 @mixin set-normal-active-colors($color, $tone) {
-	&.#{'' + $color} {
-		@include set-color($color, $tone);
+  &.#{'' + $color} {
+    @include set-color($color, $tone);
 
-		@each $state in /*hover, focus,*/ active {
-			&:#{$state} {
-				@if $state == hover {
-					@include set-color($color, $tone);
-				} @else {
-					@include set-color($color, dark);
-				}
-			}
-		}
-	}
+    @each $state in /*hover, focus,*/ active {
+      &:#{$state} {
+        @if $state == hover {
+          @include set-color($color, $tone);
+        } @else {
+          @include set-color($color, dark);
+        }
+      }
+    }
+  }
 }
 
 @mixin levels($tone: medium) {
-	@each $level in accent, danger, error, warning, info, success {
-		@include set-normal-color($level, $tone);
-	}
+  @each $level in accent, danger, error, warning, info, success {
+    @include set-normal-color($level, $tone);
+  }
 }
 
 @mixin active-levels($tone: medium) {
-	@each $level in accent, danger, error, warning, info, success {
-		@include set-normal-active-colors($level, $tone);
-	}
+  @each $level in accent, danger, error, warning, info, success {
+    @include set-normal-active-colors($level, $tone);
+  }
 }
 
 @mixin colors($tone: medium) {
-	@each $color in accent, blue, green, red, amber, banana, raspberry, plum {
-		@include set-normal-color($color, $tone);
-	}
+  @each $color in accent, blue, green, red, amber, banana, raspberry, plum {
+    @include set-normal-color($color, $tone);
+  }
 }
 
 @mixin active-colors($tone: medium) {
-	@each $color in accent, blue, green, red, amber, banana, raspberry, plum {
-		@include set-normal-active-colors($color, $tone);
-	}
+  @each $color in accent, blue, green, red, amber, banana, raspberry, plum {
+    @include set-normal-active-colors($color, $tone);
+  }
 }
 
 @mixin reset-first-last-margin {
-	> :first-child {
-		margin-top: 0;
-	}
+  > :first-child {
+    margin-top: 0;
+  }
 
-	> :last-child {
-		margin-bottom: 0;
-	}
+  > :last-child {
+    margin-bottom: 0;
+  }
 }
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
index 065de51..8ff0e4b 100644
--- a/sass/_buttons.scss
+++ b/sass/_buttons.scss
@@ -1,3 +1,15 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
 @import 'variables';
 @import 'base';
 
@@ -76,7 +88,7 @@ to give the button a special semantic cue.
 }
 
 @mixin base-btn {
-  transition: box-shadow .2s ease-in;
+  transition: box-shadow 0.2s ease-in;
   background-color: $white;
   border: $border-size solid $light-gray;
   border-radius: $border-radius;
diff --git a/sass/_decorators.scss b/sass/_decorators.scss
index f278e76..41258df 100644
--- a/sass/_decorators.scss
+++ b/sass/_decorators.scss
@@ -1,46 +1,64 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
+/**
+ * _doc
+ * ---
+ * title: Ribbon
+ * name: ribbon
+ * category: decorators
+ * ---
+ * Use the `ribbon` class on panels and other block-level containers to add a visual cue.
+ * 
+ * ```html_example
+ * <section class="panel ribbon">
+ *     <p>
+ *         The Heian period was preceded by the Nara period and began in 794 A.D.
+ *         after the movement of the capital of Japan to Heian-kyō (present-day Kyōto),
+ *         by the 50th emperor, Emperor Kanmu.
+ *     </p>
+ * </section>
+ * ```
+ *
+ * @format
+ */
 
-/*_doc
----
-title: Ribbon
-name: ribbon
-category: decorators
----
-Use the `ribbon` class on panels and other block-level containers to add a visual cue.
-
-```html_example
-<section class="panel ribbon">
-    <p>
-        The Heian period was preceded by the Nara period and began in 794 A.D.
-        after the movement of the capital of Japan to Heian-kyō (present-day Kyōto),
-        by the 50th emperor, Emperor Kanmu.
-    </p>
-</section>
-```
-*/
 .ribbon {
-    position: relative;
-    overflow: hidden;
-    transition: opacity .5s ease-in-out, top .5s ease-in-out, right .5s ease-in-out;
+  position: relative;
+  overflow: hidden;
+  transition:
+    opacity 0.5s ease-in-out,
+    top 0.5s ease-in-out,
+    right 0.5s ease-in-out;
 
-    :first-child:before {
-        background: linear-gradient(#68B1FA 0%, #0D81FF 100%);
-        color: #fff;
+  :first-child:before {
+    background: linear-gradient(#68b1fa 0%, #0d81ff 100%);
+    color: #fff;
 
-        content: '\2605';
-        border-top-color: #4aa0fa;
-        border-bottom-color: #055fff;
+    content: '\2605';
+    border-top-color: #4aa0fa;
+    border-bottom-color: #055fff;
 
-        opacity: 1;
+    opacity: 1;
 
-        position: absolute;
-        right: -45px;
-        top: 9px;
+    position: absolute;
+    right: -45px;
+    top: 9px;
 
-        padding: 5px;
-        width: 120px;
+    padding: 5px;
+    width: 120px;
 
-        transform: rotate(45deg);
-        text-align: center;
-        text-shadow: 1px 0 1px #444;
-    }
-}
\ No newline at end of file
+    transform: rotate(45deg);
+    text-align: center;
+    text-shadow: 1px 0 1px #444;
+  }
+}
diff --git a/sass/_forms.scss b/sass/_forms.scss
index 8c4222e..a412dbc 100644
--- a/sass/_forms.scss
+++ b/sass/_forms.scss
@@ -1,3 +1,15 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
 @import 'variables';
 @import 'base';
 @import 'buttons';
@@ -73,9 +85,9 @@ Dangerous actions, e.g. actions that have a destructive effect, should use the
     }
 
     .form-field {
-      @each $type in text, number, password, date, datetime-local, search {
-        input[type=#{$type}] {
-          transition: box-shadow .2s ease-in;
+      @each $type in text, number, password, date, datetime-local, search, url {
+        input[type='#{$type}'] {
+          transition: box-shadow 0.2s ease-in;
           border: $border-size solid $light-gray;
           border-radius: $border-radius;
           padding: 6px 6px 4px 6px;
@@ -108,7 +120,7 @@ Dangerous actions, e.g. actions that have a destructive effect, should use the
     padding: 10px 0;
 
     @each $type in submit, reset, button {
-      input[type=#{$type}] {
+      input[type='#{$type}'] {
         @extend .btn;
       }
     }
diff --git a/sass/_functions.scss b/sass/_functions.scss
index 4b9c4be..078490e 100644
--- a/sass/_functions.scss
+++ b/sass/_functions.scss
@@ -1,4 +1,14 @@
-/** @format */
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
 
 @use 'sass:math';
 
@@ -8,22 +18,22 @@
 // From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
 
 @function exponent($base, $exponent) {
-	// reset value
-	$value: $base;
-	// positive intergers get multiplied
-	@if $exponent > 1 {
-		@for $i from 2 through $exponent {
-			$value: $value * $base;
-		}
-	}
-	// negitive intergers get divided. A number divided by itself is 1
-	@if $exponent < 1 {
-		@for $i from 0 through -$exponent {
-			$value: $value / $base;
-		}
-	}
-	// return the last value written
-	@return $value;
+  // reset value
+  $value: $base;
+  // positive intergers get multiplied
+  @if $exponent > 1 {
+    @for $i from 2 through $exponent {
+      $value: $value * $base;
+    }
+  }
+  // negitive intergers get divided. A number divided by itself is 1
+  @if $exponent < 1 {
+    @for $i from 0 through -$exponent {
+      $value: $value / $base;
+    }
+  }
+  // return the last value written
+  @return $value;
 }
 
 /*
@@ -42,45 +52,45 @@ GsRGB = G8bit/255
 BsRGB = B8bit/255
 */
 @function relative-luminance($color: #fff) {
-	$r_srgb: math.div(red($color), 255);
-	$g_srgb: math.div(green($color), 255);
-	$b_srgb: math.div(blue($color), 255);
+  $r_srgb: math.div(red($color), 255);
+  $g_srgb: math.div(green($color), 255);
+  $b_srgb: math.div(blue($color), 255);
 
-	$r: 1;
-	$g: 1;
-	$b: 1;
+  $r: 1;
+  $g: 1;
+  $b: 1;
 
-	@if $r_srgb <= 0.03928 {
-		$r: math.div($r_srgb, 12.92);
-	} @else {
-		$r: math.pow(math.div(($r_srgb + 0.055), 1.055), 2.4);
-	}
-	@if $g_srgb <= 0.03928 {
-		$g: math.div($g_srgb, 12.92);
-	} @else {
-		$g: math.pow(math.div(($g_srgb + 0.055), 1.055), 2.4);
-	}
-	@if $b_srgb <= 0.03928 {
-		$b: math.div($b_srgb, 12.92);
-	} @else {
-		$b: math.pow(math.div(($b_srgb + 0.055), 1.055), 2.4);
-	}
+  @if $r_srgb <= 0.03928 {
+    $r: math.div($r_srgb, 12.92);
+  } @else {
+    $r: math.pow(math.div(($r_srgb + 0.055), 1.055), 2.4);
+  }
+  @if $g_srgb <= 0.03928 {
+    $g: math.div($g_srgb, 12.92);
+  } @else {
+    $g: math.pow(math.div(($g_srgb + 0.055), 1.055), 2.4);
+  }
+  @if $b_srgb <= 0.03928 {
+    $b: math.div($b_srgb, 12.92);
+  } @else {
+    $b: math.pow(math.div(($b_srgb + 0.055), 1.055), 2.4);
+  }
 
-	@return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+  @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
 }
 
 @function contrast-ratio($foreground: $black, $background: $white) {
-	@return math.div((relative-luminance($foreground) + 0.05), (relative-luminance($background) + 0.05));
+  @return math.div((relative-luminance($foreground) + 0.05), (relative-luminance($background) + 0.05));
 }
 
 @function foreground-meeting-color-contrast($background: $white, $font-size: 10pt) {
-	$c: 4.5;
-	@if $font-size > 18pt {
-		$c: 3;
-	}
-	@if contrast-ratio($white, $background) > 4.5 {
-		@return $white;
-	} @else {
-		@return $black;
-	}
+  $c: 4.5;
+  @if $font-size > 18pt {
+    $c: 3;
+  }
+  @if contrast-ratio($white, $background) > 4.5 {
+    @return $white;
+  } @else {
+    @return $black;
+  }
 }
diff --git a/sass/_layout.scss b/sass/_layout.scss
index b7d2a8d..0b2c574 100644
--- a/sass/_layout.scss
+++ b/sass/_layout.scss
@@ -1,4 +1,14 @@
-/** @format */
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
 
 @import 'variables';
 @import 'base';
@@ -23,11 +33,11 @@ A panel encloses a section of the document with a border and whitespace.
 ```
 */
 .panel {
-	border: $border-size solid $lightest-gray;
-	border-radius: $border-radius;
-	padding: 20px;
+  border: $border-size solid $lightest-gray;
+  border-radius: $border-radius;
+  padding: 20px;
 
-	@include reset-first-last-margin;
+  @include reset-first-last-margin;
 }
 
 /*doc
@@ -88,57 +98,57 @@ The `well-small` modifier class reduces the padding and borders of the well.
 ```
 */
 .well {
-	background-color: $snow;
-	padding: 20px;
-	border-radius: 2 * $border-radius;
-	border: $border-radius solid $lightest-gray;
-	box-shadow: inset 0 1px 2px 2px $light-gray;
-
-	@include reset-first-last-margin;
-
-	@mixin well-header-footer {
-		margin-left: -20px;
-		margin-right: -20px;
-	}
-
-	header {
-		padding: 0 20px 10px 20px;
-		border-bottom: 1px solid $light-gray;
-
-		@include well-header-footer;
-		@include reset-first-last-margin;
-	}
-
-	footer {
-		padding: 10px 20px 0 20px;
-		border-top: 1px solid $light-gray;
-
-		@include well-header-footer;
-	}
-
-	&.well-small {
-		padding: 10px;
-		border-radius: 1.5 * $border-radius;
-		border: 0.5 * $border-radius solid $lightest-gray;
-		box-shadow: inset 0 1px 1px 1px $light-gray;
-
-		@mixin well-small-header-footer {
-			margin-left: -10px;
-			margin-right: -10px;
-		}
-
-		header {
-			padding: 0 10px 5px 10px;
-			border-bottom: 1px solid $light-gray;
-
-			@include well-small-header-footer;
-		}
-
-		footer {
-			padding: 5px 10px 0 10px;
-			border-top: 1px solid $light-gray;
-
-			@include well-small-header-footer;
-		}
-	}
+  background-color: $snow;
+  padding: 20px;
+  border-radius: 2 * $border-radius;
+  border: $border-radius solid $lightest-gray;
+  box-shadow: inset 0 1px 2px 2px $light-gray;
+
+  @include reset-first-last-margin;
+
+  @mixin well-header-footer {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+
+  header {
+    padding: 0 20px 10px 20px;
+    border-bottom: 1px solid $light-gray;
+
+    @include well-header-footer;
+    @include reset-first-last-margin;
+  }
+
+  footer {
+    padding: 10px 20px 0 20px;
+    border-top: 1px solid $light-gray;
+
+    @include well-header-footer;
+  }
+
+  &.well-small {
+    padding: 10px;
+    border-radius: 1.5 * $border-radius;
+    border: 0.5 * $border-radius solid $lightest-gray;
+    box-shadow: inset 0 1px 1px 1px $light-gray;
+
+    @mixin well-small-header-footer {
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+
+    header {
+      padding: 0 10px 5px 10px;
+      border-bottom: 1px solid $light-gray;
+
+      @include well-small-header-footer;
+    }
+
+    footer {
+      padding: 5px 10px 0 10px;
+      border-top: 1px solid $light-gray;
+
+      @include well-small-header-footer;
+    }
+  }
 }
diff --git a/sass/_messages.scss b/sass/_messages.scss
index 54f6054..1e4f546 100644
--- a/sass/_messages.scss
+++ b/sass/_messages.scss
@@ -1,3 +1,15 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
 @import 'variables';
 @import 'base';
 
@@ -71,7 +83,7 @@ Finally, setting a modifier of `msg-icon`, the message will include an icon.
     @each $level in error, info, warning, success {
       &.#{$level} :first-child:before {
         font-family: 'FontAwesome';
-        margin-right: .8em;
+        margin-right: 0.8em;
         vertical-align: middle;
 
         @if $level == error {
diff --git a/sass/_navbar.scss b/sass/_navbar.scss
index fc642c6..0f7161b 100644
--- a/sass/_navbar.scss
+++ b/sass/_navbar.scss
@@ -1,4 +1,14 @@
-/** @format */
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
 
 @import 'variables';
 @import 'base';
@@ -104,58 +114,58 @@ Of course you can give your navbar a kick by adding a color class to the `navbar
 ```
 */
 .navbar {
-	border-width: 0;
-	border-bottom-width: 1px;
-	border-style: solid;
-	box-sizing: border-box;
-	display: block;
-
-	@include set-color(gray, lightest);
-
-	@include colors(medium);
-
-	ul.nav {
-		display: inline-block;
-		margin: 0;
-		padding: 0;
-
-		li {
-			display: inline-block;
-			vertical-align: middle;
-
-			a {
-				display: block;
-				box-sizing: border-box;
-				height: 45px;
-				padding: 15px 20px;
-				text-decoration: none;
-
-				@include set-color(gray, lightest);
-			}
-
-			&.active {
-				a {
-					font-weight: 500;
-					@include set-color(gray, light);
-				}
-			}
-		}
-	}
-
-	@each $color in accent, blue, green, red, amber, banana, raspberry, plum {
-		&.#{'' + $color} {
-			ul.nav {
-				li {
-					a {
-						@include set-color($color, medium);
-					}
-					&.active {
-						a {
-							@include set-color($color, dark);
-						}
-					}
-				}
-			}
-		}
-	}
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-style: solid;
+  box-sizing: border-box;
+  display: block;
+
+  @include set-color(gray, lightest);
+
+  @include colors(medium);
+
+  ul.nav {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: inline-block;
+      vertical-align: middle;
+
+      a {
+        display: block;
+        box-sizing: border-box;
+        height: 45px;
+        padding: 15px 20px;
+        text-decoration: none;
+
+        @include set-color(gray, lightest);
+      }
+
+      &.active {
+        a {
+          font-weight: 500;
+          @include set-color(gray, light);
+        }
+      }
+    }
+  }
+
+  @each $color in accent, blue, green, red, amber, banana, raspberry, plum {
+    &.#{'' + $color} {
+      ul.nav {
+        li {
+          a {
+            @include set-color($color, medium);
+          }
+          &.active {
+            a {
+              @include set-color($color, dark);
+            }
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/sass/_pager.scss b/sass/_pager.scss
index 40ed750..97df88c 100644
--- a/sass/_pager.scss
+++ b/sass/_pager.scss
@@ -1,3 +1,15 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
 @import 'variables';
 @import 'base';
 
@@ -81,35 +93,35 @@ through the Font Awesome icons `fa-fast-backward` and `fa-fast-forward` respecti
 ```
 */
 .nav-pager {
-    border: $border-size solid $light-gray;
-    border-radius: $border-radius;
-    display: table;
-    margin: 0 auto;
-    margin-bottom: 10px;
-    padding: 0;
+  border: $border-size solid $light-gray;
+  border-radius: $border-radius;
+  display: table;
+  margin: 0 auto;
+  margin-bottom: 10px;
+  padding: 0;
 
-    li {
-        display: table-cell;
-        border-right: 1px solid $light-gray;
-        vertical-align: middle;
-    
-        &:last-child {
-            border-right-width: 0;
-        }
+  li {
+    display: table-cell;
+    border-right: 1px solid $light-gray;
+    vertical-align: middle;
 
-        &.active {
-            a {
-                background-color: $lightest-gray;
-            }
-        }
+    &:last-child {
+      border-right-width: 0;
     }
 
-    a {
-        box-sizing: border-box;
-        display: block;
-        font-weight: $bold-weight;
-        padding: 8px 12px;
-        text-decoration: none;
-        white-space: nowrap;
+    &.active {
+      a {
+        background-color: $lightest-gray;
+      }
     }
+  }
+
+  a {
+    box-sizing: border-box;
+    display: block;
+    font-weight: $bold-weight;
+    padding: 8px 12px;
+    text-decoration: none;
+    white-space: nowrap;
+  }
 }
diff --git a/sass/_tables.scss b/sass/_tables.scss
index 7f4c257..f8e14f4 100644
--- a/sass/_tables.scss
+++ b/sass/_tables.scss
@@ -1,4 +1,14 @@
-/** @format */
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
 
 @import 'variables';
 @import 'base';
@@ -33,19 +43,19 @@ headings from the body with a horizontal line.
 ```
 */
 .table {
-	border-collapse: collapse;
+  border-collapse: collapse;
 
-	td,
-	th {
-		padding: 4px 8px;
-	}
+  td,
+  th {
+    padding: 4px 8px;
+  }
 
-	th {
-		font-weight: 500;
-		border-bottom: $border-size solid $light-gray;
-	}
+  th {
+    font-weight: 500;
+    border-bottom: $border-size solid $light-gray;
+  }
 
-	/*doc
+  /*doc
 ---
 title: Striped Table
 name: table-striped
@@ -137,21 +147,21 @@ the color of stripes.
 </table>
 ```
 */
-	&.table-striped {
-		tr:nth-of-type(2n) {
-			background-color: $lightest-accent;
-		}
+  &.table-striped {
+    tr:nth-of-type(2n) {
+      background-color: $lightest-accent;
+    }
 
-		@each $color in accent, blue, green, red, amber, banana, raspberry, plum {
-			&.#{'' + $color} {
-				tr:nth-of-type(2n) {
-					@include set-color($color, lightest);
-				}
-			}
-		}
-	}
+    @each $color in accent, blue, green, red, amber, banana, raspberry, plum {
+      &.#{'' + $color} {
+        tr:nth-of-type(2n) {
+          @include set-color($color, lightest);
+        }
+      }
+    }
+  }
 
-	/*doc
+  /*doc
 ---
 title: Compact Table
 name: table-compact
@@ -179,10 +189,10 @@ Use the `table-compact` modifier class on tables to reduce the cell padding for
 </table>
 ```
 */
-	&.table-compact {
-		td,
-		th {
-			padding: 2px 4px;
-		}
-	}
+  &.table-compact {
+    td,
+    th {
+      padding: 2px 4px;
+    }
+  }
 }
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 8854bde..e408abe 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -1,3 +1,15 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
 $dark-gray: #666;
 $medium-gray: #999;
 $light-gray: #ccc;
@@ -15,50 +27,77 @@ $dark-main: #298597;
 
 $blue: #83bfce;
 
-$l1: 36%;
-$l2: 42%;
-$l3: 72%;
-$l4: 92%;
-
-$dark-blue:          hsla(206, 58%, $l1, 100%); // #295a99;
-$medium-blue:        hsla(206, 58%, $l2, 100%); // #4e86d0;
-$light-blue:         hsla(206, 58%, $l3, 100%); // #96b8e3;
-$lightest-blue:      hsla(206, 58%, $l4, 100%); // #deeef2;
-
-$dark-green:         hsla(121, 32%, $l1, 100%);    //#29992b;
-$medium-green:       hsla(121, 32%, $l2, 100%);    //#4ed050;
-$light-green:        hsla(121, 32%, $l3, 100%);    //#96e398;
-$lightest-green:     hsla(121, 32%, $l4, 100%);    //#dbf5db;
-
-$dark-red:           hsla(355, 72%, $l1, 100%);
-$medium-red:         hsla(355, 72%, $l2, 100%);
-$light-red:          hsla(355, 72%, $l3, 100%);
-$lightest-red:       hsla(355, 72%, $l4, 100%);
-
-$dark-amber:         hsla(30, 84%, $l1*1.2, 100%);
-$medium-amber:       hsla(30, 84%, $l2*1.2, 100%);
-$light-amber:        hsla(30, 84%, $l3*1.2, 100%);
-$lightest-amber:     hsla(30, 84%, $l4*1.2, 100%);
-
-$dark-accent:        hsla(192, 58%, $l1*.9, 100%);
-$medium-accent:      hsla(192, 58%, $l2, 100%);
-$light-accent:       hsla(192, 58%, $l3, 100%);
-$lightest-accent:    hsla(192, 58%, $l4, 100%);
-
-$dark-plum:          hsla(271, 36%, $l1*.9, 100%);
-$medium-plum:        hsla(271, 36%, $l2, 100%);
-$light-plum:         hsla(271, 36%, $l3, 100%);
-$lightest-plum:      hsla(271, 36%, $l4, 100%);
-
-$dark-raspberry:     hsla(341, 69%, $l1, 100%);
-$medium-raspberry:   hsla(341, 69%, $l2, 100%);
-$light-raspberry:    hsla(341, 69%, $l3, 100%);
-$lightest-raspberry: hsla(341, 69%, $l4, 100%);
-
-$dark-banana:        hsla(45, 84%, $l1*1.2, 100%);
-$medium-banana:      hsla(45, 84%, $l2*1.2, 100%);
-$light-banana:       hsla(45, 84%, $l3*1.2, 100%);
-$lightest-banana:    hsla(45, 84%, $l4*1.2, 100%);
+$lightness-dark: 36%;
+$lightness-medium: 42%;
+$lightness-light: 72%;
+$lightness-lightest: 92%;
+
+$hue-blue: 206;
+$hue-green: 121;
+$hue-red: 355;
+$hue-amber: 29;
+$hue-accent: 192;
+$hue-plum: 271;
+$hue-raspberry: 341;
+$hue-banana: 45;
+
+$saturation-blue: 58%;
+$saturation-green: 32%;
+$saturation-red: 72%;
+$saturation-amber: 84%;
+$saturation-accent: 58%;
+$saturation-plum: 36%;
+$saturation-raspberry: 69%;
+$saturation-banana: 84%;
+
+$multiplier-blue: 1;
+$multiplier-green: 0.93;
+$multiplier-red: 1;
+$multiplier-amber: 1.2;
+$multiplier-accent: 0.89;
+$multiplier-plum: 0.9;
+$multiplier-raspberry: 1;
+$multiplier-banana: 1.2;
+
+$dark-blue: hsla($hue-blue, $saturation-blue, $multiplier-blue * $lightness-dark, 100%);
+$medium-blue: hsla($hue-blue, $saturation-blue, $multiplier-blue * $lightness-medium, 100%);
+$light-blue: hsla($hue-blue, $saturation-blue, $multiplier-blue * $lightness-light, 100%);
+$lightest-blue: hsla($hue-blue, $saturation-blue, $multiplier-blue * $lightness-lightest, 100%);
+
+$dark-green: hsla($hue-green, $saturation-green, $multiplier-green * $lightness-dark, 100%);
+$medium-green: hsla($hue-green, $saturation-green, $multiplier-green * $lightness-medium, 100%);
+$light-green: hsla($hue-green, $saturation-green, $multiplier-green * $lightness-light, 100%);
+$lightest-green: hsla($hue-green, $saturation-green, $multiplier-green * $lightness-lightest, 100%);
+
+$dark-red: hsla($hue-red, $saturation-red, $multiplier-red * $lightness-dark, 100%);
+$medium-red: hsla($hue-red, $saturation-red, $multiplier-red * $lightness-medium, 100%);
+$light-red: hsla($hue-red, $saturation-red, $multiplier-red * $lightness-light, 100%);
+$lightest-red: hsla($hue-red, $saturation-red, $multiplier-red * $lightness-lightest, 100%);
+
+$dark-amber: hsla($hue-amber, $saturation-amber, $multiplier-amber * $lightness-dark, 100%);
+$medium-amber: hsla($hue-amber, $saturation-amber, $multiplier-amber * $lightness-medium, 100%);
+$light-amber: hsla($hue-amber, $saturation-amber, $multiplier-amber * $lightness-light, 100%);
+$lightest-amber: hsla($hue-amber, $saturation-amber, $multiplier-amber * $lightness-lightest, 100%);
+
+$dark-accent: hsla($hue-accent, $saturation-accent, $multiplier-accent * $lightness-dark, 100%);
+$medium-accent: hsla($hue-accent, $saturation-accent, $multiplier-accent * $lightness-medium, 100%);
+$light-accent: hsla($hue-accent, $saturation-accent, $multiplier-accent * $lightness-light, 100%);
+$lightest-accent: hsla($hue-accent, $saturation-accent, $multiplier-accent * $lightness-lightest, 100%);
+
+$dark-plum: hsla($hue-plum, $saturation-plum, $multiplier-plum * $lightness-dark, 100%);
+$medium-plum: hsla($hue-plum, $saturation-plum, $multiplier-plum * $lightness-medium, 100%);
+$light-plum: hsla($hue-plum, $saturation-plum, $multiplier-plum * $lightness-light, 100%);
+$lightest-plum: hsla($hue-plum, $saturation-plum, $multiplier-plum * $lightness-lightest, 100%);
+
+$dark-raspberry: hsla($hue-raspberry, $saturation-raspberry, $multiplier-raspberry * $lightness-dark, 100%);
+$medium-raspberry: hsla($hue-raspberry, $saturation-raspberry, $multiplier-raspberry * $lightness-medium, 100%);
+$light-raspberry: hsla($hue-raspberry, $saturation-raspberry, $multiplier-raspberry * $lightness-light, 100%);
+$lightest-raspberry: hsla($hue-raspberry, $saturation-raspberry, $multiplier-raspberry * $lightness-lightest, 100%);
+
+$dark-banana: hsla($hue-banana, $saturation-banana, $multiplier-banana * $lightness-dark, 100%);
+$medium-banana: hsla($hue-banana, $saturation-banana, $multiplier-banana * $lightness-medium, 100%);
+$light-banana: hsla($hue-banana, $saturation-banana, $multiplier-banana * $lightness-light, 100%);
+$lightest-banana: hsla($hue-banana, $saturation-banana, $multiplier-banana * $lightness-lightest, 100%);
 
 $border-radius: 4px;
 $border-size: 2px;
diff --git a/sass/aoi.scss b/sass/aoi.scss
index af756ef..81f4ae2 100644
--- a/sass/aoi.scss
+++ b/sass/aoi.scss
@@ -1,3 +1,15 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
 @import 'forms';
 @import 'buttons';
 @import 'tables';
diff --git a/sass/aoi_guide.scss b/sass/aoi_guide.scss
index c71641c..ed97570 100644
--- a/sass/aoi_guide.scss
+++ b/sass/aoi_guide.scss
@@ -1,3 +1,15 @@
+/**
+ *                _
+ *   ____ _____  (_)
+ *  / __ `/ __ \/ /
+ * / /_/ / /_/ / /
+ * \__,_/\____/_/
+ * 
+ * (c) Claudio Procida 2017-2024
+ * 
+ * @format
+ */
+
 @import 'variables';
 @import 'base';
 
@@ -5,8 +17,8 @@ $lightest-aoi: $light-accent;
 $light-aoi: $medium-accent;
 $dark-aoi: $dark-accent;
 
-
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
 }
@@ -30,10 +42,12 @@ nav.sg {
   border-bottom: 1px solid $dark-aoi;
   background: linear-gradient(90deg, $light-aoi 0%, $dark-aoi 100%);
   display: flex;
-  
+
   a {
     text-decoration: none;
-    transition: background-color .1s ease-in, color .1s ease-in;
+    transition:
+      background-color 0.1s ease-in,
+      color 0.1s ease-in;
 
     &:focus,
     &:hover {
@@ -59,7 +73,7 @@ nav.sg {
 
   li {
     display: inline-block;
-    
+
     a {
       align-items: center;
       display: inline-flex;
@@ -97,7 +111,8 @@ main {
 }
 
 .codeTable {
-  th, td {
+  th,
+  td {
     display: block;
   }
 }
@@ -105,7 +120,7 @@ main {
 pre.hljs {
   border-radius: 4px;
   margin: 10px 0;
-  padding: .8em;
+  padding: 0.8em;
   white-space: pre-wrap;
 }
 
@@ -113,7 +128,10 @@ h1 {
   text-transform: capitalize;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   color: $dark-accent;
 }
 
@@ -121,12 +139,12 @@ footer {
   a {
     color: $white;
   }
-  
+
   p {
-   margin: 0;
-   padding: 10px;
-   background-color: $lightest-aoi;
-   text-align: center;
+    margin: 0;
+    padding: 10px;
+    background-color: $lightest-aoi;
+    text-align: center;
   }
 }
 
@@ -192,7 +210,8 @@ ul.colors {
   }
 
   .codeTable {
-    th, td {
+    th,
+    td {
       display: table-cell;
     }
   }