styling

dgrammatiko · dgrammatiko · commit 89cdc3199082 · 2025-02-02T11:53:48.000+02:00
diff --git a/dist/index.html b/dist/index.html
@@ -15,20 +15,19 @@
       display: block;
       aspect-ratio: 1;
       width: 300px;
+      height: 300px;
 
       /** Custom colours */
       &.blue {
         background-color: gold;
-        width: 300px;
-        height: 300px;
 
         &::part(canvas) {
           --canvas-fill: blue;
         }
       }
     }
   </style>
-  <script type="module" crossorigin src="/qr-element/assets/index-CLtdk9yj.js"></script>
+  <script type="module" crossorigin src="/assets/index-CLtdk9yj.js"></script>
 </head>
 <body>
   <h1>Rendering a QR code</h1>
diff --git a/index.html b/index.html
@@ -7,10 +7,6 @@
   <meta name="description" content="A simple QR Code Web Component">
   <script type="module" src="./src/index.mjs" blocking="rendering"></script>
   <style>
-    :root {
-      color-scheme: dark light;
-    }
-
     /** Prevent CLS */
     qr-element {
       display: block;
@@ -27,6 +23,29 @@
         }
       }
     }
+
+    /** basic page styling */
+    :root {
+      color-scheme: dark light;
+    }
+
+    a {
+      color: red;
+    }
+
+    body {
+      margin-inline-start: auto;
+      margin-inline-end: auto;
+      max-width: 30rem;
+    }
+
+    ul {
+      padding: 1rem;
+      background-color: #333;
+      list-style-type: none;
+      display: flex;
+      gap: 2rem;
+    }
   </style>
 </head>
 <body>
@@ -46,6 +65,12 @@ <h2> Custom colors: using the host background-color and the ::part(canvas)</h2>
   <qr-element class="blue" input="https://dgrammatiko.dev"></qr-element>
 
   <hr>
-  <a href="https://github.com/dgrammatiko/qr-element">Github repo</a>
+
+  <ul>
+    <li><a href="https://github.com/dgrammatiko/qr-element">Github repo</a></li>
+    <li><a href="https://github.com/dgrammatiko/qr-element">NPM package</a></li>
+    <li><a href="https://dgrammatiko.dev">by dGrammatiko</a></li>
+  </ul>
+
 </body>
 </html>
