Improve GitHub link styling

It makes more sense for the link to be part of <header>, both semantically and for styling.

diff --git a/index.html b/index.html
index 2ed3bde7d92f564f9ae32e9d063d1e02981723d0..c133cc09cbc46e9a8d5ee649b8a89169ae4b690b 100644 (file)
--- a/index.html
+++ b/index.html
@@ -21,7 +21,9 @@
 
     header {
       display: flex;
-      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      margin-block: 24px;
     }
 
     main {
@@ -29,6 +31,11 @@
       margin-inline: auto;
     }
 
+    h1,
+    a {
+      margin: 0;
+    }
+
     a {
       inline-size: fit-content;
       text-decoration: none;
@@ -36,11 +43,6 @@
       color: hsl(216deg 50% 40%);
     }
 
-    .github {
-      display: block;
-      margin-block: 24px;
-    }
-
     .github:hover,
     .github:focus {
       text-decoration: underline;
@@ -175,11 +177,10 @@
 <body>
   <header>
     <h1>solc-metadata</h1>
+    <a href="https://github.com/ardislu/solc-metadata" class="github">GitHub</a>
   </header>
 
   <main>
-    <a href="https://github.com/ardislu/solc-metadata" class="github">GitHub</a>
-
     <form>
       <label for="address">Smart contract address</label>
       <input name="address" id="address" value="0x63c1735a6b7419ae4c7b87c486ac7c393d983980" required data-1p-ignore data-lpignore>