Fix map size, requirements font, cyberduck logo, footer thanks

src/input.css

@@ -135,15 +135,23 @@ p > code, p > strong > code, li > code, li > strong > code {
     height: 70vh;
   }
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 1280px) {
     #map-container {
-      background-position: 25%;
+      background-position: center;
-      background-size: auto;
       background-attachment: scroll;
       height: 50vh;
     }
   }
 
+  @media screen and (max-width: 768px) {
+    #map-container {
+      background-position: 25% 50%;
+      background-size: auto;
+      background-attachment: scroll;
+      height: 42vh;
+    }
+  }
+
   /** Documentation */
   #global_toc .deploySubMenu {
     position: absolute;

templates/index.html

@@ -26,7 +26,7 @@
 
     <div class="w-full flex flex-col items-center justify-center border-b">
       <div id="map-container" class="relative w-full shadow-inner border-t border-b">
-        <span class="hidden md:inline-block absolute top-1/2 left-1/2 transform -translate-y-1/2 text-2xl text-white font-light select-none px-2 py-1.5 rounded shadow" style="background:#999999;">
+        <span class="hidden md:inline-block absolute top-1/2 left-1/2 transform -translate-y-1/2 text-xl md:text-2xl lg:text-3xl text-white font-light select-none px-2 py-1.5 rounded shadow-lg border border-gray-400" style="background:#999999;">
           Made for redundancy
         </span>
       </div>
@@ -89,35 +89,35 @@
           <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/cpu.svg') }}" width="24px">
-              <span class="font-semibold">CPU</span>
+              <span class="font-normal">CPU</span>
             </div>
             <span class="px-2">Any x86_64 CPU from the last 10 years, ARMv7 or ARMv8</span>
           </li>
           <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/ram.svg') }}" width="24px">
-              <span class="font-semibold">RAM</span>
+              <span class="font-normal">RAM</span>
             </div>
             <span class="px-2">1 GB</span>
           </li>
           <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/disk.svg') }}" width="24px">
-              <span class="font-semibold">Disk space</span>
+              <span class="font-normal">Disk space</span>
             </div>
             <span class="px-2">At least 16 GB</span>
           </li>
           <li class="flex flex-col md:flex-row items-center justify-start">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/network.svg') }}" width="24px">
-              <span class="font-semibold">Network</span>
+              <span class="font-normal">Network</span>
             </div>
             <span class="px-2">200 ms or less, 50 Mbps or more</span>
           </li>
           <li class="flex flex-col items-center md:items-start justify-center">
             <div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
               <img src="{{ get_url(path='icons/hardware.svg') }}" width="24px">
-              <span class="font-semibold">Heterogeneous hardware</span>
+              <span class="font-normal">Heterogeneous hardware</span>
             </div>
             <span class="px-2">Build a cluster with whatever second-hand machines are available</span>
           </li>
@@ -146,7 +146,7 @@
           </li>
           <li class="flex items-center justify-start">
             <a href="https://cyberduck.io/" target="_blank" title="Cyberduck">
-              <img class="h-20 w-20" src="{{ get_url(path='images/cyberduck-logo.png') }}" alt="Cyberduck">
+              <img class="w-20" src="{{ get_url(path='images/cyberduck-logo.png') }}" alt="Cyberduck">
             </a>
           </li>
           <li class="flex items-center justify-start">

templates/page.html

@@ -18,7 +18,7 @@
                 {% if page.description %}
                   <p class="subtitle my-2 text-gray-600 italic text-sm">{{ page.description }}</p>
                 {% endif %}
-                <a id="back-to-blog-posts" class="absolute top-0 -left-12" href="/blog" title="Back to blog posts">
+                <a id="back-to-blog-posts" class="absolute top-0 -left-12" href="/blog/" title="Back to blog posts">
                   <div class="w-10 overflow-hidden inline-block group">
                     <div class="h-16 bg-garage-gray group-hover:bg-garage-orange transform -rotate-45 origin-top-right"></div>
                   </div>

templates/partials/shared/footer.html

@@ -4,8 +4,9 @@
             {{ macros:: social_links( social_config=config.extra.social) }}
         </p>
         <p class="text-gray-600 py-2">
-            Powered by <a href="https://www.getzola.org" target="_blank"
+            Built with <a href="https://www.getzola.org" target="_blank" class="font-semibold hover:text-garage-orange">Zola</a>,
-                class="font-semibold hover:text-garage-orange">Zola</a>
+            powered by <a href="{{config.base_url}}" class="font-semibold hover:text-garage-orange">Garage</a>,
+            hosted by <a href="https://deuxfleurs.fr" target="_blank" class="font-semibold hover:text-garage-orange">Deuxfleurs</a>
         </p>
     </div>
 </footer>