Pagecord custom css 6 Mar 2026

gistfile1.txt

@import url(https://fonts.bunny.net/css?family=merriweather:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i);

body {
  font-family: Merriweather, serif;
}


.blog-title {
  font-size: 1.5rem;
}

nav {
  justify-content: left;
}

.titlebar, .avatar-container {
  justify-content: left;
}

.bio {
  text-align: left;
}

.avatar img {
	border-radius: clamp(5px, 12%, 10px);
}

/* Labels on the footer icons from https://help.pagecord.com/custom-css */

.reply-by-email::after {
  content: "Reply";
  margin-inline-start: 0.25em;
}

.upvote::after {
  content: "Like";
  margin-inline-start: 0.25em;
}


/*************************************

Position the <nav> under the blog title

HTML structure:
- header
  - nav
  - div .titlebar
    - div .avatar-container
      - div .avatar
      - div .blog-title
  - div .bio

Grid structure for header:

   col1       col2
+--------+------------+
| avatar | blog-title |  row1
|        | nav        |  row2
|---------------------|  row3 <hr>
| bio                 |  row4
+--------+------------+
*/

header {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: min-content 1fr;
}

/* Flatten the nested HTML */
.titlebar, .avatar-container {
	display: contents;
}

.avatar {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.blog-title {
	grid-column: 2;
	grid-row: 1;
	margin-left: 10px; /* Match in <nav> below to align */
}

nav {
	grid-column: 2;
	grid-row: 2;
	margin-left: 10px; /* <- here */
}

header hr {
	grid-row: 3;
	grid-column: 1 / span 2;
	margin-top: 1rem;
  
  /* Colour for the <hr> in the header */
  border: none;
  background-color: var(--color-text-muted);
  height: 1px;
  
}

.bio {
  grid-row: 4;
  grid-column: 1 / span 2;
}


/***************************************************
Simplified card view via https://olly.world/7e5c13be
*/

/* Strip card chrome */
.post-card-content {
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.post-card:hover .post-card-content { 
  box-shadow: none; 
  transform: none; 
}

post-card:hover .post-card-title { 
  text-decoration-color: var(--color-text); 
}
.post-card-summary { margin-bottom: 0; }

/* Date above title */
.post-card-meta { order: -1; margin: 0; }
.post-card-meta.has-tags,
.post-card-meta.no-tags { margin-top: 0; }
.post-card-badge { display: none; }
.post-card-date { opacity: 1; }

/* Title as dotted link */
.post-card-title {
  color: var(--color-text);
  letter-spacing: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
}