Cleanup markup.

Pictogrammers · May 11, 2022 · bda9680 · bda9680
1 parent f1fd44a
commit bda9680
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 28 deletions.
diff --git a/scripts/createIndex.js b/scripts/createIndex.js
@@ -34,26 +34,28 @@ exports.createIndex = function(components, mode) {
     const markdown = read(input.replace(/([^\/\\]+)$/, 'README.md'))
       .replace(/^# [^\r\n]+/, '');
     const type = m === null ? 'Shared' : m[1];
-    contentHtml.push(`<h2 id="${name}H2">`);
-    contentHtml.push(camelToDash(name));
-    contentHtml.push(`<a title="Link to ${camelToDash(name)}" href="#${camelToDash(name)}" id="${camelToDash(name)}">`);
-    contentHtml.push(`<svg viewBox="0 0 24 24">`);
-    contentHtml.push(`<path fill="currentColor" d="${mdiLink}">`);
-    contentHtml.push(`</svg>`);
-    contentHtml.push(`</a>`);
-    contentHtml.push(`<span class="label">component</span>`);
-    contentHtml.push(`<a title="View Code" href="https://github.com/Templarian/MaterialDesign-Components/tree/master/src/${namespace}/${component}" target="_blank">`);
-    contentHtml.push(`<svg viewBox="0 0 24 24">`);
-    contentHtml.push(`<path fill="currentColor" d="${mdiGithub}">`);
-    contentHtml.push(`</svg>`);
-    contentHtml.push(`</a>`);
-    contentHtml.push(`<button id="${name}Readme" title="Expand Documentation">`);
-    contentHtml.push(`<svg viewBox="0 0 24 24">`);
-    contentHtml.push(`<path fill="currentColor" d="${mdiFile}">`);
-    contentHtml.push(`</svg>`);
-    contentHtml.push(`</button>`);
-    contentHtml.push(`<span class="line"></span>`);
-    contentHtml.push('</h2>');
+    const contentH2 = [];
+    contentH2.push(`<h2 id="${name}H2">`);
+    contentH2.push(camelToDash(name));
+    contentH2.push(`<a title="Link to ${camelToDash(name)}" href="#${camelToDash(name)}" id="${camelToDash(name)}">`);
+    contentH2.push(`<svg viewBox="0 0 24 24">`);
+    contentH2.push(`<path fill="currentColor" d="${mdiLink}">`);
+    contentH2.push(`</svg>`);
+    contentH2.push(`</a>`);
+    contentH2.push(`<a title="View Code" href="https://github.com/Templarian/MaterialDesign-Components/tree/master/src/${namespace}/${component}" target="_blank">`);
+    contentH2.push(`<svg viewBox="0 0 24 24">`);
+    contentH2.push(`<path fill="currentColor" d="${mdiGithub}">`);
+    contentH2.push(`</svg>`);
+    contentH2.push(`</a>`);
+    contentH2.push(`<span class="label">component</span>`);
+    contentH2.push(`<button id="${name}Readme" title="Expand Documentation">`);
+    contentH2.push(`<svg viewBox="0 0 24 24">`);
+    contentH2.push(`<path fill="currentColor" d="${mdiFile}">`);
+    contentH2.push(`</svg>`);
+    contentH2.push(`</button>`);
+    contentH2.push(`<span class="line"></span>`);
+    contentH2.push('</h2>');
+    contentHtml.push(contentH2.join(''));
     contentHtml.push(`<div class="markdown" id="${name}Container"></div>`);
     contentHtml.push('<script>');
     contentHtml.push(`markdown("${name}", ${JSON.stringify(markdown)})`);

diff --git a/src/index.html b/src/index.html
@@ -129,6 +129,7 @@
     main > h2 > a {
       text-decoration: none;
       color: #aaa;
+      margin: 0 0 0 0.5rem;
     }
     main > h2 > a:hover {
       color: #453C4F;
@@ -326,7 +327,6 @@ <h1>Pictogrammers Components</h1>
     </aside>
     <main>
       <p>This page is generated from <code>npm start</code>. To render only specific components use <code>npm start pg-button</code>.</p>
-
       <!-- [Examples] -->
     </main>
   </div>

diff --git a/src/pg/annoy/annoy.css b/src/pg/annoy/annoy.css
@@ -3,17 +3,17 @@
   font-family: var(--pg-font-family);
 }
 
-[part~=list] {
+[part=list] {
   width: 12rem;
   font-size: 1rem;
   transition: 0.1s margin-bottom ease-in;
 }
 
-[part~=list] > div {
+[part=list] > div {
   display: none;
 }
 
-[part~=list] > div.show {
+[part=list] > div.show {
   display: grid;
   padding: 0.5rem;
   border: 1px solid #fff;
@@ -26,7 +26,7 @@
   margin-bottom: 4rem;
 }
 
-[part~=close] {
+[part=close] {
   position: relative;
   left: 11.25rem;
   width: 1.5rem;
@@ -44,17 +44,28 @@
   outline: none;
 }
 
-[part~=close]:hover {
+[part=close]:hover {
   color: #453C4F;
   border-color: rgba(69, 60, 79, 0.6);
 }
 
-[part~=close]:active {
+[part=close]:active {
   box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.2);
   border-color: rgba(69, 60, 79, 0.9);
 }
 
-[part~=close] svg {
+[part=close]:focus::before {
+  content: '';
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+}
+
+[part=close] svg {
   width: 1rem;
   height: 1rem;
 }