How can I customize the appearance of the first letter and word in my posts and pages on a Jekyll blog? I want to achieve a design similar to this:
https://i.sstatic.net/LX8kq.png
To accomplish this, I have used the following CSS style along with span tags:
:not(.post-excerpt) > .initial-word {
color: #166079;
font-variant: small-caps;
font-weight: bold;
}
:not(.post-excerpt) > .initial-word .initial-letter {
float: left;
font-size: 3.15em;
line-height: 0.5;
margin: 0.225em 0.159em 0 0;
color: #166079;
font-weight: normal;
text-transform: uppercase;
}<p>
<span class="initial-word"><span class="initial-letter">L</span>orem</span> ipsum dolor sit amet
</p>If I have a Jekyll post with introductory text like this:
Lorem ipsum dolor sit amet
# Main title of the post
Lorem ipsum dolor sit amet
The content of the post available through the liquid code {{ content }} will look something like this:
<p>Lorem ipsum dolor sit amet</p>
<h1>Main title of the post</h1>
<p>Lorem ipsum dolor sit amet</p>
I want to enhance the post content by adding span tags with specific rules:
- The initial tags should only be applied to the introduction; they should not appear if the content doesn't start with a
ptag, and they should be limited to the first paragraph. The
tag can encapsulate more than one word in the post:<span class="initial-word"><span class="initial-word">Lorem ipsum</span> dolor sit amet # Main title of the post Lorem ipsum dolor sit amet
In cases where multiple words are encapsulated in the
<span class="initial-word"><span class="initial-letter">I currently have complex code for posts:
{% assign content_start=content | slice: 0, 3 %}
{% assign tokens=content | split: '<span class="initial-word">' %}
{% assign count=tokens | size %}
{% if content_start == "<p>" or count > 1 %}
{% if count > 1 %}
{% assign tokens=tokens[1] | split: "</span>" %}
{% assign initial_word=tokens[0] %}
{% else %}
{% assign initial_word=content | remove_first: "<p>" | truncatewords: 1, "" %}
{% endif %}
{% assign initial_letter=initial_word | slice: 0 %}
{% assign span_letter=initial_letter | prepend: '<span class="initial-letter">' | append: '</span>' %}
{% assign span_word=initial_word | replace_first: initial_letter, "" | prepend: span_letter %}
{% unless count > 1 %}
{% assign span_word=span_word | prepend: '<span class="initial-word">' | append: '</span>' %}
{% endunless %}
{% assign content=content | replace_first: initial_word, span_word %}
{% endif %}
And a similar version for pages. Is there a simpler way to achieve this without such complicated code?