opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Link hover and focus styling

Browse source
This commit is contained in:
Oliver Davies 2021-06-30 08:00:00 +01:00
parent 907248b05b
commit a91b413e4a
3 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/css/components.pcss
View file

@ -1,10 +1,16 @@
@layer components {
.link {
@apply text-blue-800 dark:text-blue-400;
@apply text-decoration-blue-800 dark:text-decoration-blue-400;
text-decoration-line: underline;
@apply underline text-blue-800 hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
text-decoration-thickness: 1px;
text-underline-offset: 0.1em;
&:focus {
@apply no-underline;
outline-color: currentColor;
outline-offset: 2px;
outline-style: solid;
}
}
.markdown {

2
source/_partials/footer.html.twig
View file

@ -1,7 +1,7 @@
<footer class="mt-20">
<nav class="flex flex-wrap justify-center -mb-3">
{% for link in site.menus.footer %}
<a class="mx-3 mb-3 text-base md:text-lg dark:text-white dark:text-decoration-white link" href="{{ link.href }}">{{ link.title }}</a>
<a class="mx-3 mb-3 text-base md:text-lg dark:text-white hover:text-gray-900 dark:hover:text-blue-400 link" href="{{ link.href }}">{{ link.title }}</a>
{% endfor %}
</nav>
</footer>

2
source/_partials/navbar.html.twig
View file

@ -21,7 +21,7 @@
<nav class="flex items-center mt-4 space-x-6 md:mt-0 md:flex-row">
{% for item in site.menus.main %}
{% set is_active = page.url matches '#' ~ item.is_active ~ '#' %}
<a class="text-black dark:text-white border-b-3 py-2 {{ is_active ? 'border-blue-800 dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
<a class="text-black dark:text-white border-b-3 py-2 hover:border-gray-300 {{ is_active ? 'border-blue-800 dark:border-blue-400' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
{% endfor %}
</nav>
</div>