v.5.3.2

Author: SimonPadbury

CHANGELOG.md

@@ -5,6 +5,7 @@
 ## 11 Nov 2024 -- v.5.3.2
 
 * Focus ring now copying the [Accessability Style Guide](https://a11y-style-guide.com/style-guide/section-general.html#kssref-general-link-focus).
+* Heading tags that are `:first-child` now have their top margins removed.
 
 ## 8 Nov 2024 -- v.5.3.1
 

docs/dist/codebase.css

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/dist/codebase.css.map

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/1-getting-started/accessibility/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/1-getting-started/css-variables/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/1-getting-started/element-grid/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/1-getting-started/improvements-since-codebase-4/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/1-getting-started/introduction/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }
@@ -540,10 +536,10 @@ <h2 id="paragraphs" tabindex="-1">Paragraphs</h2>
 <p>A simple paragraph:</p>
 <p>Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.</p>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Lorem ipsum 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></code></pre>
-<p>Paragraphs have zero top margin while the bottom margin is set as equal to <strong>1rem</strong> (=2 element grid units), thereby leaving a little whitespace between paragraphs (and other typographic block elements).</p>
+<p>Paragraphs have zero top margin while the bottom margin is set as equal to 1rem (=2 element grid units), thereby leaving a little whitespace between paragraphs (and other typographic block elements).</p>
 <h2 id="headings" tabindex="-1">Headings</h2>
 <p>Heading font weights have been set to <code>semibold</code> (default). You can override this for all headings in the SCSS default variables, or set a different weight yourself on a per-heading or per-word basis, for emphasis.</p>
-<p>Since Codebase v.5.2.5, heading tags have <strong>2rem</strong> top margin while the bottom margin is set as equal to <strong>1rem</strong>. Heading variables are set using a Sass map in the default variables file.</p>
+<p>Heading tags have 2rem top margin while the bottom margin is set as equal to 1rem (<strong>exception:</strong> if the heading is the <code>:first-child</code> of any wrapper, then its top margin is removed). Heading variables are set using a Sass map in the default variables file.</p>
 <p>(The demo headings below are simulated using <code>h1</code> to <code>h6</code> <a href="/codebase-5/docs/5-typographic-utilities/inline-text">text utility classes</a> – so that they are not included in the generated “Contents” list on this page.)</p>
 <p class="h1 t-semibold"><code>h1</code> heading</p>
 <p class="h2 t-semibold"><code>h2</code> heading</p>
@@ -554,7 +550,7 @@ <h2 id="headings" tabindex="-1">Headings</h2>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>h2 heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>h1 heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>h3 heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">></span></span>h4 heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">></span></span>h5 heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h6</span><span class="token punctuation">></span></span>h6 heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h6</span><span class="token punctuation">></span></span></code></pre>
 <p>Since v.5.3.5 heading sizes have been set as follows:</p>
 <pre class="language-scss"><code class="language-scss"><span class="token selector">:root </span><span class="token punctuation">{</span><br>  <span class="token property">--h1</span><span class="token punctuation">:</span> 2.25em<span class="token punctuation">;</span> <span class="token comment">// 36px</span><br>  <span class="token property">--h2</span><span class="token punctuation">:</span> 1.875em<span class="token punctuation">;</span> <span class="token comment">// 30px</span><br>  <span class="token property">--h3</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span> <span class="token comment">// 24px</span><br>  <span class="token property">--h4</span><span class="token punctuation">:</span> 1.25em<span class="token punctuation">;</span> <span class="token comment">// 20px</span><br>  <span class="token property">--h5</span><span class="token punctuation">:</span> 1.125em<span class="token punctuation">;</span> <span class="token comment">// 18px</span><br>  <span class="token property">--h6</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token comment">// 16px</span><br><span class="token punctuation">}</span></code></pre>
-<p><strong>Removed in v.5.3.5:</strong> <s>Above the md medium media query breakpoint (1024px, default), heading variables --h1 thorugh --h6 are size increased slightly.</s></p>
+<p>Removed in v.5.3.5: <s>Above the md medium media query breakpoint (1024px, default), heading variables --h1 thorugh --h6 are size increased slightly.</s></p>
 <h2 id="lists" tabindex="-1">Lists</h2>
 <h3 id="ordered-lists-(numbered)" tabindex="-1">Ordered lists (numbered)</h3>
 <ol>

docs/docs/1-getting-started/responsive-design/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/2-classless-basics/block-elements/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/2-classless-basics/form-elements/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/2-classless-basics/inline-elements/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/2-classless-basics/media/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/3-layout-utilities/aspect-ratios/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/3-layout-utilities/blocks/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/3-layout-utilities/containers/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/3-layout-utilities/dimensions/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/3-layout-utilities/flexbox/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }

docs/docs/3-layout-utilities/floats/index.html

@@ -33,10 +33,6 @@
       width: 50px;
     }
 
-    main > div > h2:first-child {
-      margin-top: 0;
-    }
-
     pre code {
       white-space: pre-wrap !important;
     }
@@ -65,7 +61,7 @@
       .ms-windows #site-navigation:hover > div {
         overflow-y: auto;
       }
-      main h2, main h3, main h4, main h5, main h6 {
+      :target {
         scroll-margin-top: 72px;
       }
     }