added item styling

lib/DDG/Goodie/ChordDiagrams.pm

@@ -117,7 +117,7 @@ sub gen_svg {
         } else {
             $svg->circle(
             cx=>$i * $p_dist + 1,
-            cy=>$top_pad + $fret_dist * $p - $fret_dist/2 + 1,
+            cy=>$top_pad + $fret_dist * $p - $fret_dist/2 + 2,
             r=>5,
             style=>{
                 'stroke'=>'black',
@@ -215,10 +215,14 @@ handle remainder => sub {
                 input => $input
             },
             templates => {
-                group => 'base',
-                item  => 0,
+                detail => 0,
+                item  => 'base_item',
                 options => {
+                    url => "www.google.com",
                     content => 'DDH.chord_diagrams.detail'
+                },
+                variants => {
+                    tile => 'narrow'
                 }
             },
             meta => {}

share/goodie/chord_diagrams/chord_diagrams.css

@@ -2,6 +2,8 @@
     margin: 0;
     padding: 0;
     float: left;
+    width: 100%;
+    text-align: center;
 }
 
 .zci--chord_diagrams .chord * {

share/goodie/chord_diagrams/detail.handlebars

@@ -1,4 +1,3 @@
-<p>{{input}}</p>
 <div class="chord">
 {{{svg}}}
 </div>