Improve SEO of background patterns story

Add titles for each pattern, then use CSS to hide the
default code block annotation and place the title in
place of the annotation, allowing it to be linkable and
discoverable by search engines.

content/snippets/css/s/10-css-background-patterns.md

@@ -17,14 +17,32 @@ dateModified: 2024-05-09
   width: 100%;
   height: 144px;
   border-radius: var(--layout-border-radius) var(--layout-border-radius) 0 0;
-  margin-top: var(--layout-row-spacing);
 }
 
 .pattern-box + pre {
   margin-block-start: calc(-1 * var(--layout-row-spacing, 0));
   border-radius: 0 0 var(--layout-border-radius) var(--layout-border-radius);
 }
 
+.pattern-box + pre::before {
+  opacity: 0;
+}
+
+main > article > h2 {
+  margin: 0;
+  font-size: var(--font-sm);
+  transform: translateY(186px);
+  z-index: 1;
+  height: 0;
+}
+
+main > article > h2::after {
+  display: inline-block;
+  font-size: var(--font-sm);
+  content: "(CSS)";
+  margin-inline-start: var(--spacing-2);
+}
+
 .lines-2 {
   background-color: #fefefe;
   background-image: linear-gradient(to right, #5394fd, #5394fd 12px, #fefefe 12px, #fefefe );
@@ -91,6 +109,8 @@ dateModified: 2024-05-09
 }
 </style>
 
+## Stripes pattern
+
 <div class="pattern-box lines-2"></div>
 
 ```css
@@ -107,6 +127,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Zig zag pattern
+
 <div class="pattern-box zigzag"></div>
 
 ```css
@@ -126,6 +148,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Polka dot pattern
+
 <div class="pattern-box polka"></div>
 
 ```css
@@ -136,6 +160,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Checkerboard pattern
+
 <div class="pattern-box rectangles"></div>
 
 ```css
@@ -164,6 +190,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Rhombus pattern
+
 <div class="pattern-box rhombus"></div>
 
 ```css
@@ -183,6 +211,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Paper pattern
+
 <div class="pattern-box paper"></div>
 
 ```css
@@ -205,6 +235,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Diagonal pattern
+
 <div class="pattern-box diagonal"></div>
 
 ```css
@@ -220,6 +252,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Triangles pattern
+
 <div class="pattern-box triangle"></div>
 
 ```css
@@ -230,6 +264,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Waves pattern
+
 <div class="pattern-box wavy"></div>
 
 ```css
@@ -244,6 +280,8 @@ dateModified: 2024-05-09
 }
 ```
 
+## Isometric pattern
+
 <div class="pattern-box isometric"></div>
 
 ```css