v.5.2.3

Author: SimonPadbury

docs/docs/5-typographic-utilities/inline-text/index.html

@@ -605,7 +605,8 @@ <h3 id="panel-links" tabindex="-1">Panel links</h3>
 </a>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>block t-link-inside<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h4 t-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsim dolor sit amet ...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre>
 <p>Above, that <code>&lt;h4 class=&quot;t-link&quot;&gt;</code> pseudo link’s color change on hover is not very obvious. But you can add some extras, to suit your own design—whether from Codebase utilities or your own CSS.</p>
-<p>A second example — setting the underline to appear only on the <code>t-link</code> and only on hover (and a box shadow that appears only on hover):</p>
+<p>It’s easier if you use your own CSS at this point (e.g. make your own <code>.special-panel</code> class). But if you want to  use Codebase utilities, you will need to interrupt the cascade of the <code>a</code> anchor tag styling.</p>
+<p>A second example: using cascade interruption to set the underline to appear only on the <code>t-link</code> and only on hover (and a box shadow that appears only on hover):</p>
 <style>
     .t-link-inside.t-decoration-none .t-link,
     .t-link-inside.hover\:t-decoration-underline:hover {
@@ -621,7 +622,7 @@ <h3 id="panel-links" tabindex="-1">Panel links</h3>
 </a>
 <p>The box shadow on hover above is supplied by a Codebase <a href="/codebase-5/docs/4-decoration-utilities/box-shadows">box shadow</a>.</p>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br>    <span class="token selector">.t-link-inside.t-decoration-none .t-link,<br>    .t-link-inside.hover\:t-decoration-underline:hover</span> <span class="token punctuation">{</span><br>        <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br>    <span class="token selector">.hover\:t-decoration-underline:hover .t-link</span> <span class="token punctuation">{</span><br>        <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>block mb-3 b-thin p-2 hover:bs-3 t-link-inside t-decoration-none hover:t-decoration-underline<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h4 mb-1 t-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsim dolor sit amet ...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre>
-<p>A third example — removing the underline (i.e. is affected the additional styling above), and controlling the text color in base and hover states (plus adding a background color on hover):</p>
+<p>A third example: again using cascade interruption to removing the underline (i.e. the below is also affected the additional styling above), but now adding in different text colors in base and hover states (plus adding a background color on hover):</p>
 <style>
     .t-link-inside.t-green-500 {
         color: unset;

src/docs/5-typographic-utilities/inline-text.md

@@ -103,7 +103,9 @@ Example:
 
 Above, that `<h4 class="t-link">` pseudo link’s color change on hover is not very obvious. But you can add some extras, to suit your own design—whether from Codebase utilities or your own CSS.
 
-A second example — setting the underline to appear only on the `t-link` and only on hover (and a box shadow that appears only on hover):
+It’s easier if you use your own CSS at this point (e.g. make your own `.special-panel` class). But if you want to  use Codebase utilities, you will need to interrupt the cascade of the `a` anchor tag styling.
+
+A second example: using cascade interruption to set the underline to appear only on the `t-link` and only on hover (and a box shadow that appears only on hover):
 
 <style>
     .t-link-inside.t-decoration-none .t-link,
@@ -139,7 +141,7 @@ The box shadow on hover above is supplied by a Codebase [box shadow]({{ '/docs/4
 </a>
 ```
 
-A third example — removing the underline (i.e. is affected the additional styling above), and controlling the text color in base and hover states (plus adding a background color on hover):
+A third example: again using cascade interruption to removing the underline (i.e. the below is also affected the additional styling above), but now adding in different text colors in base and hover states (plus adding a background color on hover):
 
 <style>
     .t-link-inside.t-green-500 {