Combine header components

diff --git a/index.html b/index.html
index 18102930da37e2948834c946996539c03bc4248e..277b39c259050b5959adbfe9efc5a7dfc32b9179 100644 (file)
--- a/index.html
+++ b/index.html
@@ -30,15 +30,33 @@
     View this site's source code on <a href="https://github.com/ardislu/ardislu.dev">GitHub</a>.
   </noscript>
 
-  <template id="home-header">
+  <template id="header">
     <header>
-      <h1>ardislu.dev</h1>
-      <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" />
+      <a href="/">
+        <svg role="img" aria-labelledby="logo" width="24" height="24" viewBox="0 0 24 24" fill="#005ce6">
+          <title id="logo">ardislu.dev logo</title>
+          <path d="m15.79 0 8.2 6.83-5.47 4.55-8.2-6.83z" />
+          <path d="m5.48 8.59 8.2 6.83-5.47 4.55-8.2-6.83z" />
+          <path d="m18.535 13.25 3.854-3.129 1.285 1.043-5.139 4.172z" />
+          <path d="m0.96453 17.951 1.1832-0.981 5.9161 4.904 5.9162-4.904v1.962l-5.9162 4.904z" />
         </svg>
       </a>
+      <h1>ardislu.dev</h1>
+      <nav>
+        <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>
+      </nav>
     </header>
   </template>
 
@@ -50,25 +68,6 @@
     <main class="card-container"></main>
   </template>
 
-  <template id="post-header">
-    <header class="post-header">
-      <a href="/">
-        <svg role="img" aria-labelledby="home" width="24" height="24" viewBox="0 0 24 24">
-          <title id="home">Home</title>
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-        </svg>
-      </a>
-      <a id="edit" href="/">
-        <svg role="img" aria-labelledby="pencil" width="24" height="24" viewBox="0 0 24 24">
-          <title id="pencil">Edit this article</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>
-    </header>
-  </template>
-
   <template id="post-loader">
     <main></main>
   </template>

diff --git a/print.css b/print.css
index 74f75ee0d6003a1c097f8470b8c5304f52626b18..103f94a2c650c25e24b355ed42872759743fdf58 100644 (file)
--- a/print.css
+++ b/print.css
@@ -9,6 +9,10 @@
   text-shadow: none !important;
 }
 
+header {
+  display: none;
+}
+
 h1 {
   font-size: 16pt;
 }
@@ -50,7 +54,3 @@ code {
   break-inside: avoid;
   border: none;
 }
-
-.post-header {
-  display: none;
-}

diff --git a/script.js b/script.js
index 5de7eb149f96b12e4667971c9117abcb836d4c1d..ba5bf8908e49c2230767cc3ad6ef564493911afc 100644 (file)
--- a/script.js
+++ b/script.js
@@ -16,10 +16,9 @@ document.querySelectorAll('template').forEach(t => {
   t.remove();
 });
 window.COMPONENTS = components;
-const homeHeader = components.get('home-header');
+const header = components.get('header');
 const homeLoader = components.get('home-loader');
 const homeMain = components.get('home-main');
-const postHeader = components.get('post-header');
 const postLoader = components.get('post-loader');
 const postMain = components.get('post-main');
 
@@ -106,11 +105,11 @@ async function showPage(path) {
 
   // Determine which placeholders to show
   if (path === '/home' || path === '/') {
-    document.body.appendChild(homeHeader);
+    document.body.appendChild(header);
     document.body.appendChild(homeLoader);
   }
   else {
-    document.body.appendChild(postHeader);
+    document.body.appendChild(header);
     document.body.appendChild(postLoader);
   }
 
@@ -126,6 +125,7 @@ async function showPage(path) {
     head.ogTitle.content = 'ardislu.dev';
     head.ogDescription.content = 'Notes on web development, crypto, self-hosting, and tech in general.';
     head.ogUrl.content = 'https://ardislu.dev';
+    header.querySelector('#edit').href = `https://docs.google.com/spreadsheets/d/1pfGF8yBu3D0GPTezygLuzu3Cif8SkjhtG98nL-czlhc/edit`;
     homeMain.innerHTML = '';
     for (const [path, post] of posts) {
       homeMain.insertAdjacentHTML('beforeend',
@@ -145,7 +145,7 @@ async function showPage(path) {
     head.ogTitle.content = post.title;
     head.ogDescription.content = post.description;
     head.ogUrl.content = `https://ardislu.dev${path}`;
-    postHeader.querySelector('#edit').href = `https://docs.google.com/document/d/${post.id}/edit`;
+    header.querySelector('#edit').href = `https://docs.google.com/document/d/${post.id}/edit`;
 
     if (post.content === undefined) {
       await fetchPostContent(path);

diff --git a/style.css b/style.css
index e9370926c218494d7629672927e6a433410525d1..19619493cc3608aff31b4f205af22305c63138af 100644 (file)
--- a/style.css
+++ b/style.css
@@ -12,12 +12,23 @@ body {
 header {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  inline-size: min(100% - 2rem, 1440px);
+  margin-inline: auto;
+  margin-block-end: 1rem;
+  border-block-end: 1px hsl(216deg 100% 80%) solid;
+}
+
+header * {
+  display: inline-flex;
+}
+
+a > svg {
+  vertical-align: middle;
 }
 
 h1 {
   font-size: 2.25em;
-  text-align: center;
   margin-block: 0.5em;
 }