improve demo

mariohamann · Mar 17, 2024 · 2a3e3bd · 2a3e3bd
1 parent b6a0b71
commit 2a3e3bd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -10,11 +10,18 @@
     <main>
       <h1>
         <code>&lt;activity-graph&gt;</code>
-      </h1>
+      </h1><ul>
+        <li><a href="https://github.com/mariohamann/activity-graph">GitHub /
+            Docs</a></li>
+        <li><a href="https://www.npmjs.com/package/@mariohamann/activity-graph"
+            rel="nofollow">NPM</a></li>
+        <li><a href="https://mariohamann.com/activity-graph-component/"
+            rel="nofollow">Blog post</a></li>
+      </ul>
       <h2>Server Side Rendering</h2>
       <activity-graph range-start="2024-01-01" range-end="2024-12-31"
         activity-levels="0,1,2,4"
-        activity-data="2024-01-03,2024-01-04,2024-01-05,2024-01-06">
+        activity-data="2024-01-03,2024-01-04,2024-01-05,2024-01-05,2024-01-08">
       </activity-graph>
       <h2>Client Side Rendering</h2>
       <!-- client
@@ -23,14 +30,13 @@ <h2>Client Side Rendering</h2>
       <li data-activity="2024-01-03">Activity on 2024-01-03</li>
       <li data-activity="2024-01-04">Activity on 2024-01-04</li>
       <li data-activity="2024-01-05">Activity on 2024-01-05</li>
-      <li data-activity="2024-01-06">Activity on 2024-01-06</li>
+      <li data-activity="2024-01-05">Activity on 2024-01-05</li>
+      <li data-activity="2024-01-08">Activity on 2024-01-08</li>
     </ul>
   </activity-graph>
   /client -->
       <div>
-        <a href="https://github.com/mariohamann/activity-graph">github.com</a>
-        <span>•</span>
-        <a href="https://mariohamann.com">mariohamann.com</a>
+        by <a href="https://mariohamann.com">mariohamann.com</a>
       </div>
       <script type="module" src="/src/activity-graph.js"></script>
     </main>

diff --git a/style.css b/style.css
@@ -14,15 +14,22 @@
 
 a {
 	font-weight: 500;
-	color: var(--activity-graph-level-4-bg);
-	text-decoration: inherit;
+	color: var(--activity-graph-text-color);
+	text-decoration: underline;
 }
 a:hover {
-	color: var(--activity-graph-level-3-bg);
+	color: var(--activity-graph-text-color);
+	text-decoration: none;
 }
 
 body {
 	color: var(--activity-graph-text-color);
+	padding: 24px;
+}
+
+main {
+	max-width: 500px;
+	margin: 0 auto;
 }
 
 activity-graph {