Don't hide the post action buttons on mobile

This commit is contained in:
daudix
2024-09-18 03:44:56 +03:00
parent 880a323b27
commit edd5da0a8a
3 changed files with 30 additions and 25 deletions

View File

@ -32,7 +32,7 @@
} }
} }
#floating-buttons { #buttons-container {
display: flex; display: flex;
position: fixed; position: fixed;
flex-direction: column; flex-direction: column;
@ -41,7 +41,10 @@
inset-inline-end: 1rem; inset-inline-end: 1rem;
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
display: none; position: static;
flex-direction: row-reverse;
align-items: flex-end;
margin-block-start: 2rem;
} }
#toc summary, #toc summary,
@ -123,6 +126,7 @@
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
z-index: 1;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
inset-block-end: 0; inset-block-end: 0;
inset-inline-end: 3rem; inset-inline-end: 3rem;

View File

@ -58,7 +58,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
margin-block-start: 2rem;
#comments-status { #comments-status {
margin-block-start: 0; margin-block-start: 0;
@ -80,6 +79,10 @@
column-gap: 1rem; column-gap: 1rem;
justify-items: start; justify-items: start;
&:first-child {
margin-block-start: 2rem;
}
&.comment-reply { &.comment-reply {
position: relative; position: relative;
border-radius: 0.25rem; border-radius: 0.25rem;

View File

@ -45,8 +45,6 @@
{%- include "partials/statements.html" -%} {%- include "partials/statements.html" -%}
{%- include "partials/toc.html" -%}
{{ page.content | safe }} {{ page.content | safe }}
</article> </article>
@ -54,25 +52,7 @@
{% include "partials/comments.html" %} {% include "partials/comments.html" %}
{%- endif -%} {%- endif -%}
{%- if page.lower or page.higher -%} <div id="buttons-container">
<hr />
<nav id="post-nav">
{%- if page.higher -%}
<a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}">
<div class="nav-arrow">{{ macros_translate::translate(key="previous", default="Previous", language_strings=language_strings) }}</div>
<span class="post-title">{{ page.higher.title }}</span>
</a>
{%- endif -%}
{%- if page.lower -%}
<a class="post-nav-item post-nav-next" href="{{ page.lower.permalink }}">
<div class="nav-arrow">{{ macros_translate::translate(key="next", default="Next", language_strings=language_strings) }}</div>
<span class="post-title">{{ page.lower.title }}</span>
</a>
{%- endif -%}
</nav>
{%- endif -%}
<div id="floating-buttons">
{%- if page.extra.toc -%} {%- if page.extra.toc -%}
<details id="toc"> <details id="toc">
<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary> <summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
@ -107,4 +87,22 @@
<a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a> <a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- endif -%} {%- endif -%}
</div> </div>
{%- if page.lower or page.higher -%}
<hr />
<nav id="post-nav">
{%- if page.higher -%}
<a class="post-nav-item post-nav-prev" href="{{ page.higher.permalink }}">
<div class="nav-arrow">{{ macros_translate::translate(key="previous", default="Previous", language_strings=language_strings) }}</div>
<span class="post-title">{{ page.higher.title }}</span>
</a>
{%- endif -%}
{%- if page.lower -%}
<a class="post-nav-item post-nav-next" href="{{ page.lower.permalink }}">
<div class="nav-arrow">{{ macros_translate::translate(key="next", default="Next", language_strings=language_strings) }}</div>
<span class="post-title">{{ page.lower.title }}</span>
</a>
{%- endif -%}
</nav>
{%- endif -%}
{% endblock content %} {% endblock content %}