Add favicon, opengraph, update header design

colepeters · Jun 28, 2023 · 30d64c3 · 30d64c3
1 parent a9c110d
commit 30d64c3
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 1 deletion.
diff --git a/app/elements/site-header.mjs b/app/elements/site-header.mjs
@@ -4,10 +4,22 @@ export default function SiteHeader ({ html }) {
  h1, p {
  text-align: var(--align-heading);
  }
+
+ h1:after {
+ content: '';
+ background-image: url('/_public/favicon.png');
+ background-size: contain;
+ position: absolute;
+ aspect-ratio: 1 / 1;
+ inline-size: 2.5em;
+ inset-block-start: 2.25em;
+ inset-inline-start: -1.75em;
+ }
+
  </style>
  <header>
  <a href='/' class='no-underline'>
- <h1 class='font-heading pbs4 pbe-3'>
+ <h1 class='font-heading pbs4 pbe-3 relative inline-block'>
  A thin mantle of ash
  </h1>
  <p class='font-body italic text-1 pbe4'>

diff --git a/app/head.mjs b/app/head.mjs
@@ -27,6 +27,9 @@ export default function Head(state) {
  ${getLinkTag()}
  <link rel='stylesheet' href='/_public/css/global.css' />
  <link rel='webmention' href='${siteUrl}/webmention' />
+ <link rel='icon' href='/_public/favicon.png' />
+ <meta name="image" content="/_public/opengraph.jpg" />
+ <meta name="og:image" content="/_public/opengraph.jpg" />
  <link href='https://colepeters.com' rel='me' />
  <link href='https://mastodon.online/@colepeters' rel='me' />
  <link href='https://instagram.com/titledspheres' rel='me' />

diff --git a/public/favicon.jpg b/public/favicon.jpg
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/opengraph.jpg b/public/opengraph.jpg