@angelscmf/front 1.0.17 → 1.0.19

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@angelscmf/front",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "",
   "license": "ISC",
   "author": "",
   "scripts": {
     "a-dev-watching": "gulp angelsDevWatching",
     "a-static-server": "php -S localhost:8000 -t ./public",
-    "a-static-server--": "php -S localhost:8000 -t ./public ./public/angels_site_router.php",
     "build": "tsup",
     "publish": "npm publish --access public",
     "test": "echo \"Error: no test specified\" && exit 1"

package/sass/AngelsDesign.scss

@@ -2,4 +2,6 @@
 @forward 'AngelsTheme';
 @forward 'AngelsPageLayout';
 @forward 'AngelsHTMLElements';
-@forward 'angelsTags/a-block';
+@forward 'angelsTags/a-block';
+@forward 'angelsTags/a-infra';
+@forward 'angelsTags/a-page';

package/sass/_AngelsHTMLElements.scss

@@ -1,193 +1,222 @@
-/**
- *  Angels' CMF HTML Elements styles.
- *  
- *  @version 2025-07-31
- *    * Adds `a` styles.
- *    * Adds `button` styles.
- *    * Adds `h1.a-h1` styles.
- *    * Adds `h2.a-h2` styles.
- *    * Adds `h3.a-h3` styles.
- *    * Adds `h4.a-h4` styles.
- *    * Adds `h5.a-h5` styles.
- *    * Adds `h6.a-h6` styles.
- *    * Adds `input` styles.
- *    * Adds `p` styles.
- *    * Adds `table.a-table` styles.
- *    * Adds `table.a-table td` styles.
- *    * Adds `textarea` styles.
- */
-
-@use "AngelsVariables";
-
-* {
-    box-sizing: border-box;
-}
-
-:root {
-    --a-link-color: #551c74;
-    --a-link-hover-color: #8F54B0;
-}
-
-a {
-    color: var(--a-link-color);
-
-    &:hover {
-        color: var(--a-link-hover-color);
-    }
-
-    &:focus {
-        box-shadow: var(--a-focus-box-shadow);
-        outline-color: var(--a-focus-outline-color);
-    }
-}
-
-:root {
-    --a-button-background: #fff;
-    --a-button-color: #8F54B0;
-    /* 1/2em */
-    --a-button-gap: var(--a-half-size);
-    /* 2em */
-    --a-button-min-height: var(--a-double-size);
-    --a-button-padding-left: var(--a-size);
-    --a-button-padding-right: var(--a-size);
-    --a-button-padding-top: var(--a-half-size);
-    --a-button-padding-bottom: var(--a-half-size);
-    --a-button-border-color: #8F54B0;
-    --a-button-border-style: solid;
-    --a-button-border-width: 2px;
-}
-
-button {
-    background: var(--a-button-background);
-    border-radius: var(--a-border-radius);
-    border-color: var(--a-button-border-color);
-    border-style: var(--a-button-border-style);
-    border-width: var(--a-button-border-width);
-    color: var(--a-button-color);
-    display: inline-flex;
-    gap: var(--a-button-gap);
-    min-height: var(--a-button-min-height);
-    padding-left: calc(var(--a-button-padding-left) - var(--a-button-border-width));
-    padding-right: calc(var(--a-button-padding-right) - var(--a-button-border-width));
-    padding-top: calc(var(--a-button-padding-top) - var(--a-button-border-width));
-    padding-bottom: calc(var(--a-button-padding-bottom) - var(--a-button-border-width));
-    transition: all 0.3s ease;
-
-    &:enabled {
-        cursor: pointer;
-    }
-}
-
-:root {
-    --a-submit-background: #8F54B0;
-    --a-submit-border-color: #551C74;
-    --a-submit-color: #fff;
-}
-
-button[type=submit] {
-    background: var(--a-submit-background);
-    border-width: var(--a-submit-border-width, --a-button-border-width);
-    color: var(--a-submit-color);
-
-    &:hover {
-        background: var(--a-submit-hover-background);
-    }
-}
-
-:root {
-    --a-header1-margin: 0;
-    --a-header1-size: #{AngelsVariables.$a-font-size + 6};
-}
-
-h1,
-h1.a-h1 {
-    color: var(--a-header-color);
-    font-size: var(--a-header1-size);
-    margin: var(--a-header1-margin);
-    padding: 0;
-}
-
-:root {
-    --a-header2-margin: 0;
-    --a-header2-size: #{AngelsVariables.$a-font-size + 5};
-}
-
-h2,
-h2.a-h2 {
-    color: var(--a-header-color);
-    font-size: var(--a-header2-size);
-    font-weight: normal;
-    letter-spacing: 2px;
-    margin: var(--a-header2-margin);
-    padding: 0;
-}
-
-:root {
-    --a-header3-margin: 0;
-    --a-header3-size: #{AngelsVariables.$a-font-size + 4};
-}
-
-h3,
-h3.a-h3 {
-    color: var(--a-header-color);
-    font-size: var(--a-header3-size);
-    font-weight: normal;
-    letter-spacing: 2px;
-    margin: var(--a-header3-margin);
-    padding: 0;
-}
-
-:root {
-    --a-header4-margin: 0;
-    --a-header4-size: #{AngelsVariables.$a-font-size + 3};
-}
-
-h4,
-h4.a-h4 {
-    font-size: var(--a-header4-size);
-    margin: var(--a-header4-margin);
-    padding: 0;
-}
-
-:root {
-    --a-header5-margin: 0;
-    --a-header5-size: #{AngelsVariables.$a-font-size + 2};
-}
-
-h5,
-h5.a-h5 {
-    font-size: var(--a-header5-size);
-    margin: var(--a-header5-margin);
-    padding: 0;
-}
-
-:root {
-    --a-header6-margin: 0;
-    --a-header6-size: #{AngelsVariables.$a-font-size + 1};
-}
-
-h6,
-h6.a-h6 {
-    font-size: var(--a-header6-size);
-    margin: var(--a-header6-margin);
-    padding: 0;
-}
-
-input {
-    border-radius: var(--a-border-radius);
-}
-
-p {
-    text-align: justify;
-}
-
-table.a-table {
-
-    td {
-        padding: .1em var(--a-half-size);
-    }
-}
-
-textarea {
-    border-radius: var(--a-border-radius);
-}
+    /**
+    *  Angels' CMF HTML Elements styles.
+    *  
+    *  @version 2025-07-31
+    *    * Adds `a` styles.
+    *    * Adds `button` styles.
+    *    * Adds `h1.a-h1` styles.
+    *    * Adds `h2.a-h2` styles.
+    *    * Adds `h3.a-h3` styles.
+    *    * Adds `h4.a-h4` styles.
+    *    * Adds `h5.a-h5` styles.
+    *    * Adds `h6.a-h6` styles.
+    *    * Adds `input` styles.
+    *    * Adds `p` styles.
+    *    * Adds `table.a-table` styles.
+    *    * Adds `table.a-table td` styles.
+    *    * Adds `textarea` styles.
+    */
+
+    @use "AngelsVariables";
+
+    * {
+        box-sizing: border-box;
+    }
+
+    [hidden] {
+        // Hidden tags should be hidden always.
+        display: none !important;
+    }
+
+    :root {
+        --a-link-textColor: #551c74;
+        --a-link-hoverTextColor: #8F54B0;
+    }
+
+    a {
+        color: var(--a-link-textColor);
+
+        &:hover {
+            color: var(--a-link-hoverTextColor);
+        }
+
+        &:focus {
+            box-shadow: var(--a-focusBoxShadow);
+            outline-color: var(--a-focusOutlineColor);
+        }
+    }
+
+    :root {
+        --a-button-background: #fff;
+        --a-button-color: #8F54B0;
+        /* 1/2em */
+        --a-button-gap: var(--a-halfSize);
+        /* 2em */
+        --a-button-minHeight: var(--a-doubleSize);
+        --a-button-paddingLeft: var(--a-baseSize);
+        --a-button-paddingRight: var(--a-baseSize);
+        --a-button-paddingTop: var(--a-halfSize);
+        --a-button-paddingBottom: var(--a-halfSize);
+        --a-button-borderColor: #8F54B0;
+        --a-button-borderStyle: outset;
+        --a-button-borderWidth: 2px;
+        --a-button-hoverBackground: #551C74;
+        --a-button-hoverTextColor: #fff;
+    }
+
+    button {
+        align-items: center;
+        background: var(--a-button-background);
+        border-radius: var(--a-borderRadius);
+        border-color: var(--a-button-borderColor);
+        border-style: var(--a-button-borderStyle);
+        border-width: var(--a-button-borderWidth);
+        color: var(--a-button-color);
+        display: inline-flex;
+        gap: var(--a-button-gap);
+        min-height: var(--a-button-minHeight);
+        padding-left: calc(var(--a-button-paddingLeft) - var(--a-button-borderWidth));
+        padding-right: calc(var(--a-button-paddingRight) - var(--a-button-borderWidth));
+        padding-top: calc(var(--a-button-paddingTop) - var(--a-button-borderWidth));
+        padding-bottom: calc(var(--a-button-paddingBottom) - var(--a-button-borderWidth));
+        transition: all 0.3s ease;
+
+        &:enabled {
+            cursor: pointer;
+        }
+
+        &:hover {
+            background: var(--a-button-hoverBackground);
+            color: var(--a-button-hoverTextColor);
+        }
+    }
+
+    :root {
+        --a-submit-background: #8F54B0;
+        --a-submit-borderColor: #551C74;
+        --a-submit-borderWidth: 2px;
+        --a-submit-color: #fff;
+        --a-submit-hoverBackground: #551C74;
+        --a-submit-hoverTextColor: #fff;
+    }
+
+    button[type=submit] {
+        background: var(--a-submit-background);
+        border-color: var(--a-submit-borderColor);
+        border-width: var(--a-submit-borderWidth);
+        color: var(--a-submit-color);
+
+        &:hover {
+            background: var(--a-submit-hoverBackground);
+            color: var(--a-submit-hoverTextColor);
+        }
+    }
+
+    :root {
+        --a-headers-color: orangered;
+        --a-headers-lineHeight: 2;
+    }
+
+    :root {
+        --a-header1-lineHeight: var(--a-headers-lineHeight);
+        --a-header1-margin: 0;
+        --a-header1-size: #{AngelsVariables.$aFontSize + 6};
+    }
+
+    h1,
+    h1.a-h1 {
+        color: var(--a-header1-color, --a-headers-color);
+        font-size: var(--a-header1-size);
+        margin: var(--a-header1-margin);
+        padding: 0;
+    }
+
+    :root {
+        --a-header2-lineHeight: var(--a-headers-lineHeight);
+        --a-header2-margin: 0;
+        --a-header2-size: #{AngelsVariables.$aFontSize + 5};
+    }
+
+    h2,
+    h2.a-h2 {
+        color: var(--a-header2-color, --a-headers-color);
+        font-size: var(--a-header2-size);
+        font-weight: normal;
+        letter-spacing: 2px;
+        margin: var(--a-header2-margin);
+        padding: 0;
+    }
+
+    :root {
+        --a-header3-lineHeight: var(--a-headers-lineHeight);
+        --a-header3-margin: 0;
+        --a-header3-size: #{AngelsVariables.$aFontSize + 4};
+    }
+
+    h3,
+    h3.a-h3 {
+        color: var(--a-header3-color, --a-headers-color);
+        font-size: var(--a-header3-size);
+        font-weight: normal;
+        letter-spacing: 2px;
+        margin: var(--a-header3-margin);
+        padding: 0;
+    }
+
+    :root {
+        --a-header4-lineHeight: var(--a-headers-lineHeight);
+        --a-header4-margin: 0;
+        --a-header4-size: #{AngelsVariables.$aFontSize + 3};
+    }
+
+    h4,
+    h4.a-h4 {
+        font-size: var(--a-header4-size);
+        margin: var(--a-header4-margin);
+        padding: 0;
+    }
+
+    :root {
+        --a-header5-lineHeight: var(--a-headers-lineHeight);
+        --a-header5-margin: 0;
+        --a-header5-size: #{AngelsVariables.$aFontSize + 2};
+    }
+
+    h5,
+    h5.a-h5 {
+        font-size: var(--a-header5-size);
+        margin: var(--a-header5-margin);
+        padding: 0;
+    }
+
+    :root {
+        --a-header6-lineHeight: var(--a-headers-lineHeight);
+        --a-header6-margin: 0;
+        --a-header6-size: #{AngelsVariables.$aFontSize + 1};
+    }
+
+    h6,
+    h6.a-h6 {
+        font-size: var(--a-header6-size);
+        margin: var(--a-header6-margin);
+        padding: 0;
+    }
+
+    input {
+        border-radius: var(--a-borderRadius);
+    }
+
+    p {
+        text-align: justify;
+    }
+
+    table.a-table {
+
+        td {
+            padding: .1em var(--a-halfSize);
+        }
+    }
+
+    textarea {
+        border-radius: var(--a-borderRadius);
+    }

package/sass/_AngelsPageLayout.scss

@@ -19,117 +19,25 @@ html {
 }
 
 :root {
-    --a-backgorund-color: #{AngelsVariables.$a-main-background-color};
+    --a-backgorundColor: #{AngelsVariables.$aMainBackgroundColor};
 }
 
 body {
-    background-color: var(--a-backgorund-color);
-    color: var(--a-text-color);
-    font-family: var(--a-font-family);
-    font-size: var(--a-font-size);
-    line-height: var(--a-line-height);
+    background-color: var(--a-backgorundColor);
+    color: var(--a-textColor);
+    font-family: var(--a-fontFamily);
+    font-size: var(--a-fontSize);
+    line-height: var(--a-lineHeight);
     min-height: 100vh;
     min-width: AngelsVariables.$a-mobile-min-width;
     margin: 0;
 }
 
-:root {
-    --a-page-background-color: var(--a-backgorund-color);
-    --a-page-gap: 0;
-}
-
-a-page {
-    background-color: var(--a-page-background-color);
-    display: flex;
-    flex-direction: column;
-    gap: var(--a-page-gap);
-    min-height: 100vh;
-}
-
-:root {
-    --a-page-header-background-color: #{AngelsVariables.$a-second-background-color};
-    --a-page-header-text-color: #{AngelsVariables.$a-second-text-color};
-    --a-page-header-padding: 1em;
-}
-
-a-page-header {
-    background-color: var(--a-page-header-background-color);
-    color: var(--a-page-header-text-color);
-    display: flex;
-    padding: var(--a-page-header-padding);
-
-    &:empty {
-        display: none;
-    }
-}
-
-:root {
-    --a-page-body-gap: var(--a-4x-size);
-    --a-page-body-padding: var(--a-4x-size) var(--a-size);
-}
-
-a-page-body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: var(--a-page-body-gap);
-    padding: var(--a-page-body-padding);
-}
-
-:root {
-    --a-page-footer-background-color: #{AngelsVariables.$a-second-background-color};
-    --a-page-footer-padding: var(--a-size);
-    --a-page-footer-gap: var(--a-double-size);
-    --a-page-footer-text-color: #{AngelsVariables.$a-second-text-color};
-}
-
-a-page-footer {
-    background-color: var(--a-page-footer-background-color);
-    color: var(--a-page-footer-text-color);
-    display: grid;
-    font-family: monospace;
-    gap: var(--a-page-footer-gap);
-    padding: var(--a-page-footer-padding);
-
-    &:empty {
-        display: none;
-    }
-}
-
-a-infra {
-    color: steelblue;
-    display: flex;
-    gap: var(--a-double-size);
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: center;
-
-    address {
-        font-style: normal;
-    }
-}
-
-a-infral {
-    display: grid;
-    gap: var(--a-size);
-    min-width: 200px;
-
-    >header {}
-
-    >nav {
-        display: grid;
-
-        >a {
-            width: fit-content;
-        }
-    }
-}
-
 a-law {
     font-family: monospace;
 
     display: grid;
-    gap: var(--a-size);
+    gap: var(--a-baseSize);
 }
 
 

package/sass/_AngelsTheme.scss

@@ -2,39 +2,38 @@
  *  Angels' CMF Theme Custom Variables
  *
  *  @version 2025-05-18
- *      * --a-header1-size based on Angels_ThemeVariables.$a-font-size
- *      * --a-header2-size based on Angels_ThemeVariables.$a-font-size
- *      * --a-header3-size based on Angels_ThemeVariables.$a-font-size
- *      * --a-header4-size based on Angels_ThemeVariables.$a-font-size
- *      * --a-header5-size based on Angels_ThemeVariables.$a-font-size
- *      * --a-header6-size based on Angels_ThemeVariables.$a-font-size
+ *      * --a-header1-size based on Angels_ThemeVariables.$aFontSize
+ *      * --a-header2-size based on Angels_ThemeVariables.$aFontSize
+ *      * --a-header3-size based on Angels_ThemeVariables.$aFontSize
+ *      * --a-header4-size based on Angels_ThemeVariables.$aFontSize
+ *      * --a-header5-size based on Angels_ThemeVariables.$aFontSize
+ *      * --a-header6-size based on Angels_ThemeVariables.$aFontSize
  */
 
 @use "AngelsVariables";
 
 :root {
     // 1/2em = 8px;
-    --a-half-size: 8px;
+    --a-halfSize: 8px;
     // 1em = 16px;
-    --a-size: 16px;
+    --a-baseSize: 16px;
     // 2em = 32px;
-    --a-double-size: 32px;
+    --a-doubleSize: 32px;
     // 4em = 64px;
-    --a-4x-size: 64px;
+    --a-4xSize: 64px;
 }
 
 :root {
-    /* --a-border-radius: 4px = 1em/4 = 16px/4 */
-    --a-border-radius: 4px;
-    --a-font-family: Verdana, Arial, Helvetica, sans-serif;
-    --a-font-size: 16px;
-    --a-header-color: orangered;
-    --a-line-height: 24px;
+    /* --a-borderRadius: 4px = 1em/4 = 16px/4 */
+    --a-borderRadius: 4px;
+    --a-fontFamily: Verdana, Arial, Helvetica, sans-serif;
+    --a-fontSize: 16px;
+    --a-lineHeight: 24px;
     --a-note-color: palevioletred;
-    --a-text-color: #4B2E2E;
+    --a-textColor: #4B2E2E;
 }
 
 :root {
-    --a-focus-box-shadow: 0 0 10px #551c74;
-    --a-focus-outline-color: #8f54b0;
+    --a-focusBoxShadow: 0 0 10px #551c74;
+    --a-focusOutlineColor: #8f54b0;
 }

package/sass/_AngelsVariables.scss

@@ -6,22 +6,24 @@
  * Colour variables
  */
 
-$a-main-background-color: #FFF4E6;
-$a-second-background-color: #ffe9cd;
-$a-second-text-color: #02172c;
+$aMainBackgroundColor: #FFF4E6;
+$aSecondBackgroundColor: #ffe9cd;
+$aSecondColor: #02172c;
 
 /**
  *  Font variables
  */
 
-$a-font-size: 16px;
+$aFontSize: 16px;
 
 /**
  *  Grid variables.
  */
 $a-mobile-min-width: 300px;
-$a-mobile-max-width: 413.98px;
-$a-tablet-min-width: 414px;
+// $a-mobile-max-width: 413.98px;
+$a-mobile-max-width: 533.98px;
+// $a-tablet-min-width: 414px;
+$a-tablet-min-width: 540px;
 $a-tablet-max-width: 767.98px;
 $a-laptop-min-width: 768px;
 $a-laptop-max-width: 1023.98px;

package/sass/angelsTags/_a-block.scss

@@ -1,5 +1,6 @@
 :root {
-    --a-block-borderRadius: var(--a-half-size);
+    --a-block-borderRadius: var(--a-halfSize);
+    --a-block-borderRadius: var(--a-halfSize);
     --a-block-borderColor: lavender;
     --a-block-borderWidth: 1px;
     --a-block-backgroundColor: transparent;
@@ -17,14 +18,14 @@ a-block {
 :root {
     --a-block-header-textColor: indigo;
     --a-block-header-backgroundColor: lavender;
-    --a-block-header-padding: var(--a-half-size) var(--a-double-size);
+    --a-block-header-padding: var(--a-halfSize) var(--a-doubleSize);
 }
 
 a-block-header {
     color: var(--a-block-header-textColor);
     background-color: var(--a-block-header-backgroundColor);
     border-radius: var(--a-block-borderRadius) var(--a-block-borderRadius) 0 0;
-    display: -moz-inline-grid;
+    display: grid;
     padding: var(--a-block-header-padding);
 
     &:empty {
@@ -33,8 +34,8 @@ a-block-header {
 }
 
 :root {
-    --a-block-body-gap: var(--a-double-size);
-    --a-block-body-padding: var(--a-double-size);
+    --a-block-body-gap: var(--a-doubleSize);
+    --a-block-body-padding: var(--a-doubleSize);
 }
 
 a-block-body {
@@ -46,7 +47,7 @@ a-block-body {
 :root {
     --a-block-footer-textColor: indigo;
     --a-block-footer-backgroundColor: lavender;
-    --a-block-footer-padding: var(--a-half-size) var(--a-double-size);
+    --a-block-footer-padding: var(--a-halfSize) var(--a-doubleSize);
 }
 
 a-block-footer {

package/sass/angelsTags/_a-infra.scss

@@ -0,0 +1,41 @@
+@use "../AngelsVariables";
+
+a-infra {
+    color: steelblue;
+    display: flex;
+    gap: var(--a-doubleSize);
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
+
+    @media (max-width: AngelsVariables.$a-mobile-max-width) {
+        flex-direction: column;
+    }
+}
+
+a-infral {
+    display: grid;
+    gap: var(--a-baseSize);
+    min-width: 200px;
+    flex: 1;
+
+    @media (max-width: AngelsVariables.$a-mobile-max-width) {
+        min-width: 100%;
+    }
+
+    >header {
+        font-weight: bold;
+    }
+
+    >nav {
+        display: grid;
+
+        >a {
+            width: fit-content;
+        }
+    }
+
+    address {
+        font-style: normal;
+    }
+}

package/sass/angelsTags/_a-page.scss

@@ -0,0 +1,64 @@
+@use "../AngelsVariables";
+
+:root {
+    --a-page-backgroundColor: var(--a-backgorundColor);
+    --a-page-gap: 0;
+}
+
+a-page {
+    background-color: var(--a-page-backgroundColor);
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-page-gap);
+    min-height: 100vh;
+}
+
+:root {
+    --a-page-header-backgroundColor: #{AngelsVariables.$aSecondBackgroundColor};
+    --a-page-header-textColor: #{AngelsVariables.$aSecondColor};
+    --a-page-header-padding: 1em;
+}
+
+a-page-header {
+    background-color: var(--a-page-header-backgroundColor);
+    color: var(--a-page-header-textColor);
+    display: flex;
+    padding: var(--a-page-header-padding);
+
+    &:empty {
+        display: none;
+    }
+}
+
+:root {
+    --a-page-body-gap: var(--a-4xSize);
+    --a-page-body-padding: var(--a-4xSize) var(--a-baseSize);
+}
+
+a-page-body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--a-page-body-gap);
+    padding: var(--a-page-body-padding);
+}
+
+:root {
+    --a-page-footer-backgroundColor: #{AngelsVariables.$aSecondBackgroundColor};
+    --a-page-footer-padding: var(--a-baseSize);
+    --a-page-footer-gap: var(--a-baseSize);
+    --a-page-footer-textColor: #{AngelsVariables.$aSecondColor};
+}
+
+a-page-footer {
+    background-color: var(--a-page-footer-backgroundColor);
+    color: var(--a-page-footer-textColor);
+    display: grid;
+    font-family: monospace;
+    gap: var(--a-page-footer-gap);
+    padding: var(--a-page-footer-padding);
+
+    &:empty {
+        display: none;
+    }
+}