CSS mismatch

Hosting on Micro.blog
1

Okay, I’m racking my brain over this one… :laughing: I’m porting the Hitchens theme and can’t get the article page to match even though I’ve looked over the HTML and CSS code numerous times. It only seems to be partially applying on my test post, even though the styling matches between both mine and the official theme.

Here’s a post in the official theme:

image
image2732×1830 408 KB

And here’s my test post (ignore the link backgrounds, I haven’t fixed that yet):

image
image2732×1827 285 KB

What doesn’t make sense to me is the CSS for both targets the same .post class, yet it still has visual differences. Anyone have an idea what I’m doing wrong or missing?

2

Well, either the HTML, CSS, or both differ in some way between your implementation and the original. Not that helpful, I’ll admit. :blush: But without access to your test page and the one you’re comparing to, it’s hard to help out.

3

Hi Sven, here are the links to each page: mine + Hitchens

Here’s my article.html template code:

<article class="post h-entry" itemscope="" itemtype="http://schema.org/BlogPosting" id="main" role="article" aria-label="Content">
		{{ if .Title }}
			<div class="divided">
				<h1 class="post-title p-name" itemprop="name headline">
					{{ .Title }}
    			</h1>
					{{ $readTime := .ReadingTime }}
					<div class="read-time">Reading time: {{ .ReadingTime }} {{ cond (eq $readTime 1) "minute" "minutes"}}</div>
			</div>
		{{ end }}
	<div class="post-content e-content" itemprop="articleBody">
		{{ .Content }}
	</div>
	<div class="email-reply">
{{ if .Title }}
		<a class="reply" href="mailto:{{ .Site.Params.mailto }}?subject=Reply%20to%20{{ .Title }}">Reply by email</a>
{{ else }}
<a class="reply" href="mailto:{{ .Site.Params.mailto }}?subject=Reply%20to%20{{ .Permalink | safeURL }}">Reply by email</a>
{{ end }}
	</div>
	<div class="article-meta">
		<span class="pubdate"><time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05.000-07:00" }}' itemprop="datePublished">{{ .Date.Format "Jan 2, 2006" }}</time>
		</span><br />
		<span class="permalink"><a href="{{ .RelPermalink }}">[Permalink]</a></span><br />
		{{ $Site := .Site }}
		{{ if .Params.categories }}
			<span class="catlist">Posted in: </span>
			<span class="post-categories">
				<span class="article-category">
					{{ range $i, $e := .Params.categories }}
						{{ if gt $i 0 }}
							<span>•</span>
						{{ end }}
						<a class="article-category-link" href="{{ $Site.BaseURL }}/categories/{{ $e | urlize }}">{{ $e }}</a>
					{{ end }}
				</span>
			</span>
		{{ end }}
	</div>
{{ if .Site.Params.include_conversation }}
		<script type="text/javascript" src="https://micro.blog/conversation.js?url={{ .Permalink }}"></script>
	{{ end }}
</article>

And here’s the relevant CSS section:

/* Article styling */

.post {
	background: var(--article-bg);
	margin: 2em auto;
	max-width: 60rem;
	padding: 2em 0;
	box-shadow: 12px 18px 24px rgba(darken((var(--body-bg)), 50%), .1);
}

.post > * {
	margin-left: auto;
	margin-right: auto;
	max-width: 36rem;
	padding: 0 1em;
}

.post > h1 {
	font-size: 2em;
	max-width: 48rem;
	padding: 2em 1em;
	text-align: center;
}

.post p {
	text-align: justify;
	text-indent: 1.5em;
	text-justify: inter-word;
}

.post p:first-of-type,
.post h2 + p {
	text-indent: 0;
}

.post a:hover {
	background: var(--highlight);
}

.post dl,
.post ul,
.post ol {
	margin: 1.5em;
}

.post li {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}

.post-content:first-child {
	margin-top: 4em;
}

.post-meta {
	margin-bottom: 2em;
	margin-top: 2em;
	text-align: right;
}

.back-link {
	display: inline-block;
	font-size: .75em;
	padding: 1em;
	text-decoration: none;
	text-transform: uppercase;
}
4

Okay, so those two pages and their HTML and CSS are pretty different from each other.

Let’s take a concrete example, the page’s heading. The text size of the heading is more prominent in your implementation. That’s because the CSS that applies to the original theme won’t get applied to your version, as the HTML differs.

.post > h1 {
	font-size: 2em;
	max-width: 48rem;
	padding: 2em 1em;
	text-align: center;
}

The CSS rules above will only apply to h1 elements that are direct children of elements with the post class. The relevant HTML looks like this:

<article class="post h-entry" itemscope="" itemtype="http://schema.org/BlogPosting" id="main" role="article" aria-label="Content">
  <div class="divided">
    <h1 class="post-title p-name" itemprop="name headline">This is a test title</h1>
    <div class="read-time">Reading time: 1 minute</div>
  </div>
  /*[…]*/
</article>

Here, the <h1> element does not reside directly under <article>, and thus the CSS rules won’t apply. Instead, you either have to move the <h1> element up one level or change the CSS selector to .post h1.

1 Like
5

Ah, that makes sense, I completely didn’t see that. What I still don’t understand is why the box shadow doesn’t apply on mine, is this another PEBKAC? :joy:

6

Haha, no, I wouldn’t say that. :blush: Let’s take a look at the relevant CSS rule for the shadow in the ported theme:

box-shadow: 12px 18px 24px rgba(darken((var(--body-bg)), 50%), .1);

It’s actually not valid CSS; maybe you meant to use a CSS preprocessor? (The original theme uses SASS.)

Inspecting the original page, we get this:

box-shadow:12px 18px 24px rgba(0, 0, 0, 0.1);

That line produces that tasty shadow. :yum:

1 Like
7

Gotcha, I’m not knowledgeable with SASS to know there were differences. I believe the current version of Hugo in Micro.blog doesn’t yet support SASS processing, so that would explain why it was broken. I’m not sure if there are any other parts in the CSS that would cause an issue, but at least I have something to look into if I notice glitches again.

Thanks so much for your help, Sven! :pray:

1 Like
8

Just wait until Manton updates the supported version and you have to go through your themes to make the relevant updates :joy: