tomowang / hugo-theme-tailwind

Clean card Hugo theme for blog, created by using tailwindcss
https://hugo-theme-tailwind.tomo.dev/
MIT License
116 stars 49 forks source link

Dark Theme - font color misses some sections #18

Closed ventz closed 8 months ago

ventz commented 8 months ago

Hi @tomowang - just opening this as another issue:

Noticed one other bit - in dark mode, it seems posts that have sub-sections with a <!--more--> tag, get ignored by the theme.

Ex:

image

Here is what produced that:

+++
title = 'AI'
date = 2023-12-20T12:43:01-05:00
draft = true
+++

Things worth looking into:

### OpenAI
* GPT 4 Turbo
* GPT Visual
* Assistants + Threads
* GPTS potentially

### AWS Bedrock
* Anthropic:
** Claude Instant (100K context)
** Claude 2.1 (200K context)
<!--more-->

### Meta -> Llama Chat (7b vs 13b vs 70b)
tomowang commented 8 months ago

Seems to be the summary and description issue. I'll take a look.

tomowang commented 8 months ago

Root cause: the Manual Summary Split in hugo returns html with heading elements, which generates as following HTML:

<h3 class="my-4 text-large text-slate-600 dark:text-slate-300">
    <p>Things worth looking into:</p>
<h3 id="openai">OpenAI</h3>
<ul>
<li>GPT 4 Turbo</li>
<li>GPT Visual</li>
<li>Assistants + Threads</li>
<li>GPTS potentially</li>
</ul>
<h3 id="aws-bedrock">AWS Bedrock</h3>
<ul>
<li>Anthropic:
** Claude Instant (100K context)
** Claude 2.1 (200K context)</li>
</ul>
  </h3>

According to the spec https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements, heading element can only have phrasing content. So above HTML will be rendered like:

<h3 class="my-4 text-large text-slate-600 dark:text-slate-300">
    <p>Things worth looking into:</p>
</h3><h3 id="openai">OpenAI</h3>
<ul>
<li>GPT 4 Turbo</li>
<li>GPT Visual</li>
<li>Assistants + Threads</li>
<li>GPTS potentially</li>
</ul>
<h3 id="aws-bedrock">AWS Bedrock</h3>
<ul>
<li>Anthropic:
** Claude Instant (100K context)
** Claude 2.1 (200K context)</li>
</ul>

Only the first line is covered by the style.

Fixes: use div instead.