Merge branch 'main' into gh-pages

.prettierrc

@@ -1,6 +1,8 @@
 {
+	"cssDeclarationSorterOrder": "alphabetical",
 	"endOfLine": "lf",
 	"insertPragma": true,
+	"plugins": ["prettier-plugin-css-order"],
 	"printWidth": 120,
 	"singleAttributePerLine": true,
 	"singleQuote": true,

doc_assets/_header.html

@@ -25,9 +25,12 @@
     <nav class="sg">
       <%
         fa_icons = {
-          'controls' => 'fa-check-square',
+          'buttons' => 'fa-check-square',
+          'controls' => 'fa-font',
+          'forms' => 'fa-i-cursor',
           'layout' => 'fa-th',
-          'navigation' => 'fa-ship',
+          'messages' => 'fa-warning',
+          'navigation' => 'fa-map-signs',
           'tables' => 'fa-table'
         }
       %>

package.json

@@ -29,6 +29,9 @@
 		"gulp-sourcemaps": "^3.0.0",
 		"map-stream": "^0.0.7",
 		"plugin-error": "^2.0.1",
+		"postcss": "^8.4.35",
+		"prettier": "^3.2.5",
+		"prettier-plugin-css-order": "^2.0.1",
 		"sass": "^1.77.8",
 		"st": "^3.0.0"
 	},

sass/_base.scss

@@ -13,6 +13,10 @@
 @import 'variables';
 @import 'functions';
 
+* {
+  box-sizing: border-box;
+}
+
 html,
 input,
 textarea,

sass/_buttons.scss

@@ -15,9 +15,9 @@
 
 /*doc
 ---
-title: Button
-name: btn
-category: controls
+title: Buttons
+name: 1-buttons
+category: buttons
 ---
 Use the `btn` class on `<button>` or `<input type="button">` elements.
 
@@ -30,9 +30,24 @@ Use the `btn` class on `<button>` or `<input type="button">` elements.
 
 /*doc
 ---
-title: Large Button
-name: btn-large
-category: controls
+title: Small buttons
+name: 2-small-buttons
+category: buttons
+---
+Add the `btn-small` class to other button classes to obtain a smaller affordance.
+
+```html_example_table
+<input type="button" class="btn btn-small" value="Button"/>
+
+<button class="btn btn-small">Button</button>
+```
+*/
+
+/*doc
+---
+title: Large buttons
+name: 3-large-buttons
+category: buttons
 ---
 Add the `btn-large` class to other button classes to obtain a larger affordance.
 
@@ -45,24 +60,24 @@ Add the `btn-large` class to other button classes to obtain a larger affordance.
 
 /*doc
 ---
-title: Small Button
-name: btn-small
-category: controls
+title: Huge buttons
+name: 4-huge-buttons
+category: buttons
 ---
-Add the `btn-small` class to other button classes to obtain a smaller affordance.
+Add the `btn-huge` class to other button classes to obtain an even larger affordance.
 
 ```html_example_table
-<input type="button" class="btn btn-small" value="Button"/>
+<input type="button" class="btn btn-huge" value="Button"/>
 
-<button class="btn btn-small">Button</button>
+<button class="btn btn-huge">Button</button>
 ```
 */
 
 /*doc
 ---
-title: Colored Buttons
-name: btn-colored
-category: controls
+title: Colorful buttons
+name: 5-colorful-buttons
+category: buttons
 ---
 Add the `accent`, `danger`, `warning`, `info`, or `success` classes to a button
 to give the button a special semantic cue.
@@ -81,18 +96,18 @@ to give the button a special semantic cue.
 */
 
 @mixin active-focused {
-  outline: none;
   border-color: $dark-gray;
   box-shadow: 0 0 3px 1px $light-accent;
+  outline: none;
   // border-color: $medium-accent;
 }
 
 @mixin base-btn {
-  transition: box-shadow 0.2s ease-in;
   background-color: $white;
   border: $border-size solid $light-gray;
   border-radius: $border-radius;
   padding: 6px 12px;
+  transition: box-shadow 0.2s ease-in;
 
   &:hover {
     background-color: $lightest-gray;
@@ -118,13 +133,20 @@ to give the button a special semantic cue.
 
   @include active-colors;
 
+  &.btn-small {
+    font-size: 0.9rem;
+    padding: 4px 8px;
+  }
+
   &.btn-large {
     font-size: 1.2rem;
     padding: 8px 16px;
   }
 
-  &.btn-small {
-    font-size: 0.9rem;
-    padding: 4px 8px;
+  &.btn-huge {
+    border-radius: 2 * $border-radius;
+    font-size: 1.5667rem;
+    height: 72px;
+    padding: 16px 32px;
   }
 }