From: Ardis Lu Date: Sat, 16 Jul 2022 23:06:28 +0000 (-0700) Subject: Combine header components X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=cb3e7f8e278acddd1b71ebb63c5dcee3cba50fab;p=ardislu.dev Combine header components --- diff --git a/index.html b/index.html index 1810293..277b39c 100644 --- a/index.html +++ b/index.html @@ -30,15 +30,33 @@ View this site's source code on GitHub. - - - diff --git a/print.css b/print.css index 74f75ee..103f94a 100644 --- 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 5de7eb1..ba5bf89 100644 --- 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 e937092..1961949 100644 --- 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; }