nk_jtb 0.13.0 → 0.13.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nk_jtb",
     "description": "Yet another utility based framework.",
-    "version": "0.13.0",
+    "version": "0.13.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/naykel76/nk_jtb.git"

package/src/base/_base.scss

@@ -41,7 +41,7 @@ body {
 
 hr {
     height: 0; 
-    border-color: #ccc;
+    border-color: #e5e7eb;
     border-top-width: 2px; 
     margin: $content-gap 0;
 }

package/src/components/_menu.scss

@@ -1,5 +1,5 @@
-@use "../variables" as *;
-@use "../functions/colorFunctions" as *;
+@use '../variables' as *;
+@use '../functions/colorFunctions' as *;
 
 .menu {
     display: flex;
@@ -9,12 +9,13 @@
     list-style: none;
     margin-left: 0; // remove margin for ul
 
-    // limit opinionated styles to allow parent styles to trickle down
+    li {
+        margin: 0;
+    }
+
     :where(a, li a, .menu-item) {
         color: inherit;
         padding: $menu-padding-y $menu-padding-x;
-        // this was initially set to display block but it is too difficult to
-        // work with icons and chevrons on the anchor element.
         display: flex;
         align-items: center;
 

package/src/extras/_nk-docs.scss

@@ -123,40 +123,42 @@ $question-color: #2299dd !default;
 
 question {
     color: $question-color;
-    margin-top: 1.5rem;
-    font-size: 1.1rem;
+    margin-block-start: $content-gap;
     font-weight: 700;
     font-style: italic;
+    display: block;
 }
 
-answer,
-h3:has(question) + p {
-    margin-top: 0.5rem;
-    + ul {
-        margin-top: 0.5rem;
-        margin-left: 1.5rem;
-    }
+// make the margin between the question and the following content smaller.
+//
+// <p><question></question></p>
+// <p></p>
+//
+p:has(question) > p {
+    margin-block-start: 0.5rem;
 }
 
-// remove top margin when inside `p` tag and let the `q&a` tag handle the margin
-p:has(question),
-p:has(answer) {
-    margin-top: 0;
-}
+// removed 14-02-25 i do not think this is needed
+// h3:has(question) + p {
+//     + ul {
+//         margin-top: 0.5rem;
+//         margin-left: 1.5rem;
+//     }
+// }
 
-// this is a hack to make the question play nice with the `h3` tag
-h3 {
-    > question {
-        margin-top: 0;
-    }
-    &:has(question) {
-        display: inline-flex;
-        align-items: center;
-        a {
-            margin-right: 0.5rem;
-        }
-    }
-}
+// // this is a hack to make the question play nice with the `h3` tag
+// h3 {
+//     > question {
+//         margin-top: 0;
+//     }
+//     &:has(question) {
+//         display: inline-flex;
+//         align-items: center;
+//         a {
+//             margin-right: 0.5rem;
+//         }
+//     }
+// }
 
 // ==========================================================================
 // --  --
@@ -203,15 +205,6 @@ h3 {
         background: red;
         margin-top: 0.5rem !important;
     }
-
-    // all lists on a page
-    .list-space-all {
-        ~ ul li {
-            margin-top: 0.5rem;
-        }
-    }
-
-
 }
 
 .mermaid > svg {
@@ -229,11 +222,6 @@ h3 {
     }
 }
 
-
-
-
-
-
 ////
 /// @group spacing-hacks
 ////
@@ -251,3 +239,19 @@ h3 {
 .adjacent-list-space-1 + ul li:not(:first-child) {
     margin-block-start: 1rem;
 }
+
+.adjacent-list-space-05 + ul li:not(:first-child) {
+    margin-block-start: 0.5rem;
+}
+
+.indent-all-lists-2 ~ ul {
+    margin-inline-start: 2rem;
+}
+
+
+// all lists on a page
+.list-space-all-1 {
+    ~ ul li {
+        margin-top: 1rem;
+    }
+}

package/src/utilities/_state.scss

@@ -1,3 +1,6 @@
+@use '../functions/helpers' as *;
+@use '../variables' as *;
+@use '../mixins/media' as *;
 
 // ==========================================================================
 // -- DISABLED --
@@ -12,17 +15,17 @@
 // -- REVIEW --
 // ==========================================================================
 
-// .hover\:txt-primary:hover {
-//     color: $primary;
-// }
+.hover\:txt-primary:hover {
+    color: $primary;
+}
 
-// .hover\:txt-secondary:hover {
-//     color: $secondary;
-// }
+.hover\:txt-secondary:hover {
+    color: $secondary;
+}
 
-// .hover\:txt-white:hover {
-//     color: #fff;
-// }
+.hover\:txt-white:hover {
+    color: #fff;
+}
 
 // .hover\:text-white:hover {
 //     --tw-text-opacity: 1;