Add footer

diff --git a/index.html b/index.html
index f12768af23d035ae7f5eca9606c6aa0b6cd1e26c..fa19318c0c236b7bbfaa921eef103988784e2bc2 100644 (file)
--- a/index.html
+++ b/index.html
@@ -80,6 +80,32 @@
     </noscript>
   </main>
 
+  <footer>
+    <div class="footer-links">
+      <a id="edit" href="/">
+        <svg role="img" aria-labelledby="pencil" width="24" height="24" viewBox="0 0 24 24">
+          <title id="pencil">Edit this page</title>
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" />
+        </svg>
+      </a>
+      <a href="https://github.com/ardislu/ardislu.dev">
+        <svg role="img" aria-labelledby="github" width="24" height="24" viewBox="0 0 24 24">
+          <title id="github">GitHub repository</title>
+          <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z" />
+        </svg>
+      </a>
+      <a href="https://ardislu.dev/atom.xml">
+        <svg role="img" aria-labelledby="feed" width="24" height="24" viewBox="0 0 48 48">
+          <title id="feed">Atom feed</title>
+          <path d="M10.9 42q-2.05 0-3.475-1.425Q6 39.15 6 37.1t1.425-3.475Q8.85 32.2 10.9 32.2t3.475 1.425Q15.8 35.05 15.8 37.1t-1.425 3.475Q12.95 42 10.9 42Zm24.6 0q0-6.1-2.325-11.475T26.85 21.15q-4-4-9.375-6.325T6 12.5V8q7.05 0 13.225 2.675t10.8 7.3q4.625 4.625 7.3 10.8Q40 34.95 40 42Zm-11.9 0q0-7.9-4.85-12.95Q13.9 24 6 24v-4.5q4.85 0 8.9 1.7 4.05 1.7 6.975 4.7t4.575 7.125Q28.1 37.15 28.1 42Z" />
+        </svg>
+      </a>
+    </div>
+
+    <a href="mailto:ardis@ardislu.dev">ardis@ardislu.dev</a>
+  </footer>
+
   <dialog>
     <p>A newer version of this page is available.</p>
     <button id="refresh">Refresh</button>

diff --git a/style.css b/style.css
index 35a39bc84003509d73291cf54bafc97b53854b28..d42f9aa9f7e1d1625b8a1dbeab54f6778ef896f1 100644 (file)
--- a/style.css
+++ b/style.css
@@ -9,21 +9,29 @@ body {
   hyphens: auto;
 }
 
-header {
+header, footer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   inline-size: min(100% - 2rem, 1440px);
   padding-block: 1rem;
   margin-inline: auto;
-  margin-block-end: 1rem;
   position: relative;
 }
 
-header::after {
+header {
+  justify-content: space-between;
+  margin-block-end: 1rem;
+}
+
+footer {
+  flex-direction: column;
+  gap: 8px;
+  margin-block-start: 1rem;
+}
+
+header::after, footer::before {
   content: "";
   position: absolute;
-  bottom: -4px;
   left: 5%;
   inline-size: 90%;
   block-size: 2px;
@@ -40,6 +48,14 @@ header::after {
       hsl(0deg var(--shade)));
 }
 
+header::after {
+  bottom: -4px;
+}
+
+footer::before {
+  top: 4px;
+}
+
 header * {
   display: inline-flex;
 }
@@ -53,16 +69,28 @@ a > svg {
   vertical-align: middle;
 }
 
-a:has(#feed, #pencil, #github) {
+header a:has(#feed, #pencil, #github) {
   display: none;
 }
 
 @media (min-width: 34.375rem) {
-  a:has(#feed, #pencil, #github) {
+  header a:has(#feed, #pencil, #github) {
     display: initial;
   }
 }
 
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+@media (min-width: 34.375rem) {
+  .footer-links {
+    display: none;
+  }
+}
+
 form > button {
   background: transparent;
   border: none;