Styling a Pagecord blog like the Bear Blog Archie theme

I come across posts hosted on Bear Blog quite often and many of them use the Archie theme. I wondered whether Pagecord could be styled in this way, and it turns out it can fairly easily.

A few more tweaks would be needed to complete it (I didn't look at styling the email subscription box for example – I just turned it off), but that's all doable if you wanted. My intention here isn't to steal Bear's thunder, but if someone was migrating and wanted to keep the same vibe, then now I know they definitely can.

I'd like to add a template theme gallery at some point (basically just pre-cooked custom CSS), but until then here's the CSS if you wanted a similar style.

/* Use the Roboto Mono font */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
  font-family: "Roboto Mono", monospace;
}

/* Use flex to allow header block order to be rearranged */
header {
  display: flex;
  flex-direction: column; 
}

/* Move nav to the second position (after the title) */
header > nav {
  order: 2;
  justify-content: flex-start;
  margin-bottom: 1.75em;
  gap: 1rem;
}

/* Ensure the titlebar div appears first */
header > .titlebar {
  order: 1;
}

/* Assign orders to subsequent elements to keep them in place */
header > .bio {
  order: 3;
}

header > .email-subscriber-form {
  order: 4;
}

header > hr {
  order: 5;
}

/* give nav links and article body links an accent underline */
nav a, .lexxy-content a {
  color: var(--lexxy-color-ink);
  border-bottom: 3px solid var(--color-accent);
	text-decoration: none;  
  font-weight: normal;
}

/* dotted lines under header and above footer */
header hr {
  border-top: 3px dotted #232333;
}

footer.blog-footer {
  border-top: 3px dotted #232333;
}