From a6e13e3c7dfb23b6daafa750499e5a128b40ea5e Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 9 May 2024 10:32:32 +0300
Subject: [PATCH] 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.
---
 .../css/s/10-css-background-patterns.md       | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/content/snippets/css/s/10-css-background-patterns.md b/content/snippets/css/s/10-css-background-patterns.md
index 062fb3e570a..9a4f703fa96 100644
--- a/content/snippets/css/s/10-css-background-patterns.md
+++ b/content/snippets/css/s/10-css-background-patterns.md
@@ -17,7 +17,6 @@ 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 {
@@ -25,6 +24,25 @@ dateModified: 2024-05-09
   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