Visual improvements for doc navigation on smaller screen

1 files changed, 53 insertions, 57 deletions

diff --git a/templates/partials/doc/pagination.html b/templates/partials/doc/pagination.html
index 167669e..ed5b3b1 100644
--- a/templates/partials/doc/pagination.html
+++ b/templates/partials/doc/pagination.html
@@ -1,63 +1,59 @@
 <section class="w-full">
-    <div class="container">
-        <div class="mx-auto max-w-4xl">
-            <div class="column is-8">
-                <div class="w-full flex items-center justify-center py-1.5 bg-gray-200">
-                    <span class="uppercase tracking-wide text-xs text-garage-gray">Navigation</span>
-                </div>
-                <nav class="flex space-x-4 items-center justify-center p-4">
-                    {% if page.earlier %}
-                      {% set left = page.earlier %}
-                    {% elif page.lighter %}
-                      {% set left = page.lighter %}
-                    {% elif page.ancestors and page.ancestors | length == 3 %}
-                      {% set left_path = page.ancestors | last %}
-                      {% set left = get_section(path=left_path) %}
-                    {% endif %}
+    <div class="mx-auto">
+            <div class="w-full flex items-center justify-center py-1.5 bg-gray-200">
+                <span class="uppercase tracking-wide text-xs text-garage-gray">Navigation</span>
+            </div>
+            <nav class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0 items-center justify-center p-4">
+                {% if page.earlier %}
+                    {% set left = page.earlier %}
+                {% elif page.lighter %}
+                    {% set left = page.lighter %}
+                {% elif page.ancestors and page.ancestors | length == 3 %}
+                    {% set left_path = page.ancestors | last %}
+                    {% set left = get_section(path=left_path) %}
+                {% endif %}
 
-                    {% if left %}
-                        <div>
-                            <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
-                                href="{{ left.permalink }}"
-                                title="{{ left.title }}">
-                                <span class="icon">
-                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
-                                    </svg>
-                                    <span class="mt-0.5 2xl:hidden">{{ left.title }}</span>
-                                </span>
-                            </a>
-                        </div>
-                    {% endif %}
+                {% if left %}
+                    <div class="w-1/2 lg:w-1/3">
+                        <a class="flex items-center justify-center space-x-1 text-garage-gray text-sm bg-white hover:bg-garage-gray hover:bg-opacity-20 transition border border-garage-orange p-2.5 rounded-2xl"
+                            href="{{ left.permalink }}"
+                            title="{{ left.title }}">
+                            <span class="icon">
+                                <svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
+                                </svg>
+                                <span class="mt-0.5 2xl:hidden">{{ left.title }}</span>
+                            </span>
+                        </a>
+                    </div>
+                {% endif %}
 
-                    {% if page.later %}
-                      {% set right = page.later %}
-                    {% elif page.heavier %}
-                      {% set right = page.heavier %}
-                    {% elif page.pages %}
-                      {% set right = page.pages | first %}
-                    {% endif %}
+                {% if page.later %}
+                    {% set right = page.later %}
+                {% elif page.heavier %}
+                    {% set right = page.heavier %}
+                {% elif page.pages %}
+                    {% set right = page.pages | first %}
+                {% endif %}
 
-                    {% if right %}
-                        <div>
-                            <a class="flex items-center space-x-1 hover:text-garage-orange text-garage-gray text-sm bg-white transform hover:scale-110 transition border border-garage-orange p-2.5 rounded-full"
-                                href="{{ right.permalink }}"
-                                title="{{ right.title }}">
-                                <span class="icon">
-                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
-                                    </svg>
-                                    <span class="mt-0.5 2xl:hidden">{{ right.title }}</span>
-                                </span>
-                            </a>
-                        </div>
-                    {% endif %}
-                </nav>
-            </div>
-        </div>
+                {% if right %}
+                    <div class="w-1/2 lg:w-1/3">
+                        <a class="flex items-center justify-center space-x-1 text-garage-gray text-sm bg-white hover:bg-garage-gray hover:bg-opacity-20 transition border border-garage-orange p-2.5 rounded-2xl"
+                            href="{{ right.permalink }}"
+                            title="{{ right.title }}">
+                            <span class="icon">
+                                <svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+                                </svg>
+                                <span class="mt-0.5 2xl:hidden">{{ right.title }}</span>
+                            </span>
+                        </a>
+                    </div>
+                {% endif %}
+            </nav>
     </div>
 </section>