alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

💄 style: improve navigation bar & metadata wrapping (#425)

Browse Source
This commit is contained in:
Óscar 2024-11-11 18:51:16 +01:00 committed by GitHub
parent 0253799f23
commit 42f9bb9781
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
sass/parts/_header.scss
View File

@ -24,12 +24,14 @@ header {
.nav-navs { .nav-navs {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
ul { ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: inherit;
justify-content: center; justify-content: inherit;
align-items: center; align-items: inherit;
gap: inherit;
gap: 1px; gap: 1px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -37,6 +39,12 @@ header {
} }
} }
#menu-icons-group {
gap: 1px;
margin: 0;
padding: 0;
}
.nav-links { .nav-links {
justify-content: right; justify-content: right;
padding: 0.66rem; padding: 0.66rem;
@ -76,11 +84,22 @@ header {
ul, ul,
li { li {
display: inline; display: inline-block;
margin-inline-end: 0.2rem;
font-family: var(--sans-serif-font); font-family: var(--sans-serif-font);
list-style-type: none; list-style-type: none;
} }
.tag {
margin-inline-end: 0;
}
.separator {
margin-inline-end: 0.2rem;
user-select: none;
}
} }
.language-switcher { .language-switcher {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -147,21 +166,17 @@ header {
.nav-navs { .nav-navs {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.nav-navs { .nav-navs {
flex-wrap: wrap;
justify-content: center;
margin-top: 0.8rem; margin-top: 0.8rem;
width: 100%;
} }
.navbar { .navbar {
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
} }
} }

13
templates/page.html
View File

@ -140,24 +140,26 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
{%- set previous_visible = true -%} {%- set previous_visible = true -%}
{% endif %} {% endif %}
{%- set separator_with_class = "<span class='separator' aria-hidden='true'>" ~ separator ~ "</span>"-%}
{#- Date -#} {#- Date -#}
{% if page.date and macros_settings::evaluate_setting_priority(setting="show_date", page=page, default_global_value=true) == "true" %} {% if page.date and macros_settings::evaluate_setting_priority(setting="show_date", page=page, default_global_value=true) == "true" %}
{%- if previous_visible -%}&nbsp;{{ separator }}&nbsp;{%- endif -%}<li>{{ macros_format_date::format_date(date=page.date, short=true, language_strings=language_strings) }}</li> <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{ macros_format_date::format_date(date=page.date, short=true, language_strings=language_strings) }}</li>
{#- Variable to keep track of whether we've shown a section, to avoid separators as the first element -#} {#- Variable to keep track of whether we've shown a section, to avoid separators as the first element -#}
{%- set previous_visible = true -%} {%- set previous_visible = true -%}
{% endif %} {% endif %}
{#- Reading time -#} {#- Reading time -#}
{% if macros_settings::evaluate_setting_priority(setting="show_reading_time", page=page, default_global_value=true) == "true" %} {% if macros_settings::evaluate_setting_priority(setting="show_reading_time", page=page, default_global_value=true) == "true" %}
{%- if previous_visible -%}&nbsp;{{ separator }}&nbsp;{%- endif -%}<li title="{{ macros_translate::translate(key="words", number=page.word_count, default="$NUMBER words", language_strings=language_strings) }}">{{ macros_translate::translate(key="min_read", number=page.reading_time, default="$NUMBER min read", language_strings=language_strings) }}</li> <li title="{{ macros_translate::translate(key="words", number=page.word_count, default="$NUMBER words", language_strings=language_strings) }}">{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{ macros_translate::translate(key="min_read", number=page.reading_time, default="$NUMBER min read", language_strings=language_strings) }}</li>
{%- set previous_visible = true -%} {%- set previous_visible = true -%}
{% endif %} {% endif %}
{#- Tags -#} {#- Tags -#}
{%- if page.taxonomies and page.taxonomies.tags -%} {%- if page.taxonomies and page.taxonomies.tags -%}
{%- if previous_visible -%}&nbsp;{{ separator }}&nbsp;{%- endif -%}<li>{{- macros_translate::translate(key="tags", default="tags", language_strings=language_strings) | capitalize -}}:&nbsp;</li> <li class="tag">{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{- macros_translate::translate(key="tags", default="tags", language_strings=language_strings) | capitalize -}}:&nbsp;</li>
{%- for tag in page.taxonomies.tags -%} {%- for tag in page.taxonomies.tags -%}
<li><a href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}">{{ tag }}</a> <li class="tag"><a href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}">{{ tag }}</a>
{%- if not loop.last -%} {%- if not loop.last -%}
,&nbsp; ,&nbsp;
{%- endif -%} {%- endif -%}
@ -174,8 +176,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
</ul><ul class="meta last-updated"><li>{{ updated_str }}</li> </ul><ul class="meta last-updated"><li>{{ updated_str }}</li>
{# Show link to remote changes if enabled #} {# Show link to remote changes if enabled #}
{% if config.extra.remote_repository_url and macros_settings::evaluate_setting_priority(setting="show_remote_changes", page=page, default_global_value=true) == "true" %} {% if config.extra.remote_repository_url and macros_settings::evaluate_setting_priority(setting="show_remote_changes", page=page, default_global_value=true) == "true" %}
{%- if previous_visible -%}{{ separator }}&nbsp;{%- endif -%} <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}<a href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small>&nbsp;<span class="arrow-corner">↗</span></small></a></li>
<li><a href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small>&nbsp;<span class="arrow-corner">↗</span></small></a></li>
{% endif %} {% endif %}
{% endif %} {% endif %}
</ul> </ul>

43
templates/partials/nav.html
View File

@ -18,28 +18,31 @@
{% endfor %} {% endfor %}
{%- endif -%} {%- endif -%}
{# Search #} {#- Wrap the icons in a div to keep them all together -#}
{%- if config.build_search_index %} <div class="nav-navs" id="menu-icons-group">
{%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%} {# Search #}
<li class="js"> {%- if config.build_search_index %}
<div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}"> {%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"> <li class="js">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/> <div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}">
</svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
</div> <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</li> </svg>
{%- endif %} </div>
</li>
{%- endif %}
{# Language switcher #} {# Language switcher #}
{# Display the language switcher only if more than one language is available #} {# Displayed only if more than one language is available #}
{%- if config.languages | length > 0 %} {%- if config.languages | length > 0 %}
{% include "partials/language_switcher.html" %} {% include "partials/language_switcher.html" %}
{%- endif %} {%- endif %}
{# Theme switcher #} {# Theme switcher #}
{%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%} {%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%}
{%- include "partials/theme_switcher.html" -%} {%- include "partials/theme_switcher.html" -%}
{%- endif -%} {%- endif -%}
</div>
</ul> </ul>
</div> </div>
{% endif %} {% endif %}