docs: clean up examples

- remove grunticon example - tidy up styles on the CSS styling example
bryanbraun · Jan 7, 2023 · ab52088 · ab52088
1 parent 30f1b6a
commit ab52088
Show file tree

Hide file tree

Showing 8 changed files with 6 additions and 96 deletions.
diff --git a/docs/grunticon/grunticon.loader.js b/docs/grunticon/grunticon.loader.js
diff --git a/docs/grunticon/icons.data.png.css b/docs/grunticon/icons.data.png.css
diff --git a/docs/grunticon/icons.data.svg.css b/docs/grunticon/icons.data.svg.css
diff --git a/docs/grunticon/icons.fallback.css b/docs/grunticon/icons.fallback.css
diff --git a/docs/grunticon/png/grunticon-link.png b/docs/grunticon/png/grunticon-link.png
diff --git a/docs/grunticon/preview.html b/docs/grunticon/preview.html
diff --git a/docs/index.html b/docs/index.html
@@ -21,13 +21,6 @@
   <link rel="stylesheet" href="fonts/fonts.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-twilight.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="grunticon/grunticon.loader.js"></script>
-  <script>
-    grunticon(["grunticon/icons.data.svg.css", "grunticon/icons.data.png.css", "grunticon/icons.fallback.css"]);
-  </script>
-  <noscript>
-    <link rel="stylesheet" href="grunticon/icons.fallback.css">
-  </noscript>
 </head>
 <body>
   <a href="https://github.com/bryanbraun/anchorjs" class="github-corner" aria-label="View source on GitHub">
@@ -554,7 +547,7 @@ <h3>Link w/CSS Styling</h3>
   margin-top: 4px;
   margin-left: -1.4em !important;
 }
-.anchorjs-link::before {
+.anchorjs-link::after {
   margin-left: 7px;
   margin-top: -4px;
   display: block;
@@ -664,32 +657,6 @@ <h3>Emoji</h3>
         </div>
       </div>
 
-      <div class="example">
-        <div class="example-content">
-          <h3>Grunticon</h3>
-          <p>Lorem ipsum dolor consectetur amet nulla elit. Vivamus luctus urna sed urna ultricies. Vivamus luctus urna sed.</p>
-          <a href="#" class="example-code-link">{}</a>
-        </div>
-        <div class="example-code">
-          <pre class="js"><code>// Assuming you have set up
-// grunticon and you have a
-// grunticon class named
-// 'icon-grunticon-link'...
-anchors.options = {
-  visible: 'always',
-  class: 'icon-grunticon-link'
-  icon: ''
-};
-anchors.add('h3');</code></pre>
-          <pre class="css"><code>.anchorjs-link {
-  display: inline-block;
-  margin-left: .375em;
-  width: .375em;
-  height: 20px;
-}</code></pre>
-        </div>
-      </div>
-
     </div>
 
     <h2 id="hover-examples" class="title">Hover examples</h2>
@@ -933,13 +900,6 @@ <h3>Tooltip</h3>
     });
     ex15.add('.examples .example:nth-child(15) p');
 
-    var ex16 = new AnchorJS({
-      visible: 'always',
-      class: 'icon-grunticon-link',
-      icon: ''
-    });
-    ex16.add('.examples .example:nth-child(16) h3');
-
     var hovEx1 = new AnchorJS();
     hovEx1.add('.hover-examples .example:nth-child(1) h3');
 

diff --git a/docs/styles.css b/docs/styles.css
@@ -341,20 +341,21 @@ pre > code {
 }
 
 .examples .example:nth-child(10) .anchorjs-link::after {
-  margin-left: 7px;
-  margin-top: -4px;
-  display: block;
+  position: absolute;
+  top: -5px;
+  left: 5px;
 }
 
 .examples .example:nth-child(10) .anchorjs-link {
   background-color: #ff5231;
   height: 32px;
-  width: 18px;
+  width: 32px;
   border-radius: 50%;
   display: inline-block;
   color: #fff;
   margin-top: 4px;
   margin-left: -1.4em !important;
+  padding: 0 !important;
 }
 
 .examples .example:nth-child(12) .anchorjs-link {