Don't hide the post action buttons on mobile

sass/_article.scss

@@ -32,7 +32,7 @@
 	}
 }
 
-#floating-buttons {
+#buttons-container {
 	display: flex;
 	position: fixed;
 	flex-direction: column;
@@ -41,7 +41,10 @@
 	inset-inline-end: 1rem;
 
 	@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,
@@ -80,7 +83,7 @@
 		background-color: transparent;
 		padding: 0;
 
-		&[open] summary ~ * {
+		&[open] summary~* {
 			transform-origin: bottom right;
 			animation: toc-dropdown-open var(--transition);
 
@@ -123,6 +126,7 @@
 			display: flex;
 			position: absolute;
 			flex-direction: column;
+			z-index: 1;
 			backdrop-filter: var(--blur);
 			inset-block-end: 0;
 			inset-inline-end: 3rem;

sass/_comments.scss

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

templates/article.html

@@ -45,8 +45,6 @@
 
 	{%- include "partials/statements.html" -%}
 
-	{%- include "partials/toc.html" -%}
-
 	{{ page.content | safe }}
 </article>
 
@@ -54,25 +52,7 @@
 	{% include "partials/comments.html" %}
 {%- 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 -%}
 		<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>
@@ -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>
 	{%- endif -%}
 </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 %}