Heaadings have a # on hover are actually links
This commit is contained in:
parent
d03ff36185
commit
9073718616
2 changed files with 15 additions and 3 deletions
|
@ -1,7 +1,7 @@
|
|||
{% if self.size == 'h2' %}
|
||||
<h2 id="{{ self.heading_text|lower|slugify }}">{{ self.heading_text }}</h2>
|
||||
<h2 id="{{ self.heading_text|lower|slugify }}"><a href="#{{ self.heading_text|lower|slugify }}" class="border-0 hover:border-b-4">{{ self.heading_text }}</a></h2>
|
||||
{% elif self.size == 'h3' %}
|
||||
<h3 id="{{ self.heading_text|lower|slugify }}">{{ self.heading_text }}</h3>
|
||||
<h3 id="{{ self.heading_text|lower|slugify }}"><a href="#{{ self.heading_text|lower|slugify }}" class="border-0 hover:border-b-4">{{ self.heading_text }}</a></h3>
|
||||
{% elif self.size == 'h4' %}
|
||||
<h4 id="{{ self.heading_text|lower|slugify }}">{{ self.heading_text }}</h4>
|
||||
<h4 id="{{ self.heading_text|lower|slugify }}"><a href="#{{ self.heading_text|lower|slugify }}" class="border-0 hover:border-b-4">{{ self.heading_text }}</a></h4>
|
||||
{% endif %}
|
|
@ -24,6 +24,18 @@
|
|||
@apply border-klavender border-b-4;
|
||||
}
|
||||
|
||||
a[href^="#"]::before {
|
||||
@apply hover:visible;
|
||||
content: "#";
|
||||
display: inline-block;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
margin-left: -0.8em;
|
||||
text-decoration: none;
|
||||
visibility: hidden;
|
||||
width: 0.8em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply mt-8 mb-6 text-2xl sm:text-4xl lg:text-4xl leading-none font-extrabold tracking-tight text-black dark:text-white;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue