#48 : Update style names

src/docs/Carousel.svx

@@ -239,7 +239,7 @@
 
 <Divider />
 
-## Use case!anchorId:features-use-cases;
+## Use cases!anchorId:features-use-cases;
 <AlbumsPreview />
 
 <Divider />

src/docs/Layouts/custom/H/H.svelte

@@ -15,8 +15,8 @@
 </script>
 
 <div>
-  <svelte:component this={titleComponent} id={anchorId} class="title">
+  <svelte:component this={titleComponent} id={anchorId} class="docs__title">
-    <a class="anchor" href={`#${anchorId}`}>
+    <a class="docs__anchor" href={`#${anchorId}`}>
       {title}
       {#if !title}
         <span bind:this={titleEl}><slot /></span>
@@ -26,19 +26,19 @@
 </div>
 
 <style>
-  :global(.title) {
+  :global(.docs__title) {
     display: inline-block;
   }
-  :global(.title:hover .anchor::before) {
+  :global(.docs__title:hover .docs__anchor::before) {
     visibility: visible;
   }
-  .anchor {
+  .docs__anchor {
     position: relative;
     margin-left: 10px;
     text-decoration: none;
     color: #000000;
   }
-  .anchor::before {
+  .docs__anchor::before {
     visibility: hidden;
     font-size: 14px;
     content: "\1F517";

src/docs/Layouts/custom/H/H1/H1.svelte

@@ -8,10 +8,10 @@
 </H>
 
 <style>
-  :global(h1.title) {
+  :global(h1.docs__title) {
     margin: 16px 0;
   }
-  :global(h1.title .anchor::before) {
+  :global(h1.docs__title .docs__anchor::before) {
     top: 15px;
   }
 </style>

src/docs/Layouts/custom/H/H2/H2.svelte

@@ -8,10 +8,10 @@
 </H>
 
 <style>
-  :global(h2.title) {
+  :global(h2.docs__title) {
     margin: 14px 0;
   }
-  :global(h2.title .anchor::before) {
+  :global(h2.docs__title .docs__anchor::before) {
     top: 8px;
   }
 </style>

src/docs/README.md

@@ -0,0 +1 @@
+Source code for demo site