carpentries / workbench-template-md

TEMPLATE for markdown lessons
https://carpentries.github.io/workbench-template-md/
Other
7 stars 14 forks source link

Callout content renders in UperCases #40

Closed tzielins closed 2 weeks ago

tzielins commented 7 months ago

Callout elements renders as divs with 'text-transform: uppercase;'

callout

I created a fresh repository ith the template.

https://github.com/tzielins/testing-carp-template

which in its introduction empisode starts with:

::::::::::::::::::::::::::::::::::::: callout

Callout sections can highlight information.

They are sometimes used to emphasise particularly important points
but are also used in some lessons to present "asides": 
content that is not central to the narrative of the lesson,
e.g. by providing the answer to a commonly-asked question.

::::::::::::::::::::::::::::::::::::::::::::::::

But renders as all capitals.

https://tzielins.github.io/testing-carp-template/introduction.html

Looking at the html the divs have structure:


<div class="callout-square">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell callout-icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
</div>
<div class="section level3 callout-title callout-inner">
<h3 class="callout-title">Callout</h3>
<div class="callout-content">
<p>Callout sections can highlight information.</p>
<p>They are sometimes used to emphasise particularly important points
but are also used in some lessons to present “asides”: content that is
not central to the narrative of the lesson, e.g.&nbsp;by providing the answer
to a commonly-asked question.</p>
</div>
</div>

there is <div class="section level3 callout-title callout-inner">

while in the template page (https://carpentries.github.io/workbench-template-md/introduction.html) <div class="callout-inner">


<div class="callout-square">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell callout-icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
</div>
<div class="callout-inner">
<h3 class="callout-title">Callout<a class="anchor" aria-label="anchor" href="#callout1"></a>
</h3>
<div class="callout-content">
<p>Callout sections can highlight information.</p>
<p>They are sometimes used to emphasise particularly important points
but are also used in some lessons to present “asides”: content that is
not central to the narrative of the lesson, e.g.&nbsp;by providing the answer
to a commonly-asked question.</p>
</div>
</div>

I belive the class callout-title on the div.callout-inner causes the problem.

tobyhodges commented 7 months ago

Thanks for reporting @tzielins. This is a known issue, being tracked at https://github.com/carpentries/sandpaper/issues/470 and indeed Rob prepped a PR to address it yesterday: https://github.com/carpentries/sandpaper/pull/574

One of the tests was failing but we think that is spurious, and I hope we will get it merged later today.

tobyhodges commented 6 months ago

sandpaper version 0.16.3 was released today and this problem has been fixed. The issue can be closed.