IndieBlog

Front End CSS

/* ------------------------------
indieBlog CUSTOM CSS

Core PureBlog styles ship in /assets/css/style.css. Anything in this file
overrides or extends those, and is loaded after them so equal-specificity
rules already win — !important is rarely needed.

Available CSS custom properties (defined either inline by includes/header.php
or as aliases in core style.css):
  --bg-light / --bg-dark
  --text-light / --text-dark
  --accent-light / --accent-dark         (alias: --accent-color)
  --border-light / --border-dark         (alias: --border-color)
  --accent-bg-light / --accent-bg-dark   (alias: --accent-bg-color)
  --font-stack
------------------------------ */

/* The site-author block in content/includes/footer.php carries
   class="site-author h-card". Generic <footer> styling (centering, max-width,
   border-top) is inherited from core; the rules below give the h-card a
   card layout with the avatar floated left of the text block. */

.h-card {
  margin-top: 25px;
}

.h-card-img {
  float: left;
  max-width: 150px;
  margin-right: 20px;
  border-radius: 6px;
  border: 2px solid var(--accent-color);
}

.h-card-text {
  text-align: left;
}

/* The h-card sits inside .notes-feed > .note-card > .note-card-body in the
   footer markup. .notes-feed is a column container (one card today, but
   leaves room to add more cards later); .note-card is the visible card
   surface; .note-card-body just trims margins on its first/last <p>. */
.notes-feed {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 100%;
}

.note-card {
  background: var(--accent-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem 1.25rem 0.75rem;
}

.note-card-body p:first-child {
  margin-top: 0;
}

.note-card-body p:last-child {
  margin-bottom: 0.5rem;
}

/* Heading inside the h-card carries the site name link (p-name p-author).
   The original rule referenced var(--font-main) / var(--font-title) which
   aren't defined anywhere in the project — those are dropped here, so the
   heading inherits the body font-stack. Re-add a font-family rule if you
   define a custom property for it. */
.h-card-header {
  text-align: left;
  font-size: 1.4em;
}

.h-card-header a {
  text-decoration: none;
}

h6.h-card-header {
  margin-top: 10px;
}

/* SVG icons emitted inline by post-list, post-meta, and .post.php. */
.icon {
  fill: var(--accent-color);
  height: 1.5em;
  width: 1.5em;
  vertical-align: -20%;
}

/* Author byline avatar in the single-post layout (.post.php). */
#author-img {
  height: 18px;
  width: 18px;
  display: inline;
  vertical-align: middle;
  margin: 0 5px 5px 0;
}

/* ------------------------------
WEBMENTIONS / INTERACTIONS

These classes are NOT emitted by any server-side template — they're rendered
at runtime by the webmention display script injected via footer_inject_post.
Static grep for them in /content or /includes will find nothing; that's
expected. Don't strip them.
------------------------------ */

.comments-header {
  display: none;
}

.webmentions {
  margin-top: 1rem;
  font-size: 0.95rem;
  max-width: 100%;
}

/* Summary header styled like an h2 */
.webmentions summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 2em;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.webmentions summary .counts {
  font-size: 0.67em;
  margin-left: 0.5em;
}

/* ------------------------------
AVATAR STACK
------------------------------ */

.avatar-container {
  position: relative;
  display: inline-block;
  margin-left: -18px;
  min-width: 40px;
}

.avatar-container:first-child {
  margin-left: 0;
}

.webmention-avatar {
  border-radius: 50%;
  width: 54px;
  height: 54px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ddd;
}

/* Emoji reaction overlay on top of the avatar */
.avatar-emoji {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 20px;
  background: none;
  width: auto;
  height: auto;
  padding: 0;
  line-height: 1;
}

/* ------------------------------
REACTIONS ROW
------------------------------ */

.reactions-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
}

/* ------------------------------
MENTION / COMMENT LIST
------------------------------ */

.webmentions ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0 0;
}

.webmentions li {
  margin: 0.75rem 0;
}

/* ------------------------------
REPLIES / COMMENTS
------------------------------ */

.webmention-reply {
  display: flex;
  gap: 12px;
  margin: 0.75rem 0;

  /* mini card styling */
  background: var(--accent-bg-color);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
}

/* Comment text */
.webmention-reply blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--border-light);
  font-style: normal;
  max-width: 85%;
}

.webmention-reply p:first-child {
  margin-top: 0;
}

.webmention-reply p:last-child {
  margin-bottom: 0;
}

/* Avatar inside a reply */
.webmention-reply img {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}