Links menu in nav on mobile, DRY-er icon styles

This commit is contained in:
daudix
2024-06-09 00:29:17 +03:00
parent 047552a6e3
commit a69c24ef0a
4 changed files with 147 additions and 19 deletions

View File

@ -47,7 +47,7 @@
{% for link in config.extra.footer.socials %}
<li>
<a href="{{ link.url | safe }}" rel="me" title="{{ link.name }}">
<i style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")'></i>
<i class="icon" style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")'></i>
<span>{{ link.name }}</span>
</a>
</li>

View File

@ -13,7 +13,7 @@
</li>
{% for link in config.extra.nav.links %}
{%- if link.url is matching('https?://') %}
<li>
<li class="link">
<a href="{{ link.url | safe }}"
{% if current_url | default(value='/') | safe == link.url | safe %}
class="active"
@ -22,7 +22,7 @@
</a>
</li>
{%- else %}
<li>
<li class="link">
<a href="{{ get_url(path=link.url | safe )}}"
{% if current_url | default(value='/') | safe == get_url(path=link.url) | safe %}
class="active"
@ -35,11 +35,42 @@
{% if config.extra.nav.show_feed %}
<li id="feed">
<a href="{{ get_url(path=config.feed_filename) | safe }}">
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0"></path></svg>
<i id="feed-icon" class="icon"></i>
<span>Feed</span>
</a>
</li>
{% endif %}
<li id="dropdown">
<details>
<summary>
<i id="menu-icon" class="icon"></i>
<span>Menu</span>
</summary>
<ul>
{% for link in config.extra.nav.links %}
{%- if link.url is matching('https?://') %}
<li>
<a href="{{ link.url | safe }}"
{% if current_url | default(value='/') | safe == link.url | safe %}
class="active"
{% endif %}>
{{ link.name }}
</a>
</li>
{%- else %}
<li>
<a href="{{ get_url(path=link.url | safe )}}"
{% if current_url | default(value='/') | safe == get_url(path=link.url) | safe %}
class="active"
{% endif %}>
{{ link.name }}
</a>
</li>
{%- endif %}
{% endfor %}
</ul>
</details>
</li>
</ul>
</nav>
</header>