Update header and footer

mo8it · mo8it · commit 2673177b17ea · 2025-05-17T13:02:34.000+02:00
diff --git a/website/config.toml b/website/config.toml
@@ -15,7 +15,7 @@ insert_anchor_links = "heading"
 logo_path = "images/happy_ferris.svg"
 
 [[extra.menu_items]]
-name = "Home"
+name = "Rustlings"
 url = "/"
 [[extra.menu_items]]
 name = "Setup"
diff --git a/website/static/images/rust_logo.svg b/website/static/images/rust_logo.svg
@@ -0,0 +1,61 @@
+<svg version="1.1" height="106" width="106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="logo" transform="translate(53, 53)">
+  <path id="r" transform="translate(0.5, 0.5)" fill="white" stroke="white" stroke-width="1" stroke-linejoin="round" d="
+    M -9,-15 H 4 C 12,-15 12,-7 4,-7 H -9 Z
+    M -40,22 H 0 V 11 H -9 V 3 H 1 C 12,3 6,22 15,22 H 40
+    V 3 H 34 V 5 C 34,13 25,12 24,7 C 23,2 19,-2 18,-2 C 33,-10 24,-26 12,-26 H -35
+    V -15 H -25 V 11 H -40 Z" />
+  <g id="gear" mask="url(#holes)">
+    <circle r="43" fill="none" stroke="white" stroke-width="9" />
+    <g id="cogs">
+      <polygon id="cog" stroke="white" stroke-width="3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
+      <use xlink:href="#cog" transform="rotate(11.25)" />
+      <use xlink:href="#cog" transform="rotate(22.50)" />
+      <use xlink:href="#cog" transform="rotate(33.75)" />
+      <use xlink:href="#cog" transform="rotate(45.00)" />
+      <use xlink:href="#cog" transform="rotate(56.25)" />
+      <use xlink:href="#cog" transform="rotate(67.50)" />
+      <use xlink:href="#cog" transform="rotate(78.75)" />
+      <use xlink:href="#cog" transform="rotate(90.00)" />
+      <use xlink:href="#cog" transform="rotate(101.25)" />
+      <use xlink:href="#cog" transform="rotate(112.50)" />
+      <use xlink:href="#cog" transform="rotate(123.75)" />
+      <use xlink:href="#cog" transform="rotate(135.00)" />
+      <use xlink:href="#cog" transform="rotate(146.25)" />
+      <use xlink:href="#cog" transform="rotate(157.50)" />
+      <use xlink:href="#cog" transform="rotate(168.75)" />
+      <use xlink:href="#cog" transform="rotate(180.00)" />
+      <use xlink:href="#cog" transform="rotate(191.25)" />
+      <use xlink:href="#cog" transform="rotate(202.50)" />
+      <use xlink:href="#cog" transform="rotate(213.75)" />
+      <use xlink:href="#cog" transform="rotate(225.00)" />
+      <use xlink:href="#cog" transform="rotate(236.25)" />
+      <use xlink:href="#cog" transform="rotate(247.50)" />
+      <use xlink:href="#cog" transform="rotate(258.75)" />
+      <use xlink:href="#cog" transform="rotate(270.00)" />
+      <use xlink:href="#cog" transform="rotate(281.25)" />
+      <use xlink:href="#cog" transform="rotate(292.50)" />
+      <use xlink:href="#cog" transform="rotate(303.75)" />
+      <use xlink:href="#cog" transform="rotate(315.00)" />
+      <use xlink:href="#cog" transform="rotate(326.25)" />
+      <use xlink:href="#cog" transform="rotate(337.50)" />
+      <use xlink:href="#cog" transform="rotate(348.75)" />
+    </g>
+    <g id="mounts">
+      <polygon id="mount" stroke="white" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
+      <use xlink:href="#mount" transform="rotate(72)" />
+      <use xlink:href="#mount" transform="rotate(144)" />
+      <use xlink:href="#mount" transform="rotate(216)" />
+      <use xlink:href="#mount" transform="rotate(288)" />
+    </g>
+  </g>
+  <mask id="holes">
+    <rect x="-60" y="-60" width="120" height="120" fill="white"/>
+    <circle id="hole" cy="-40" r="3" />
+    <use xlink:href="#hole" transform="rotate(72)" />
+    <use xlink:href="#hole" transform="rotate(144)" />
+    <use xlink:href="#hole" transform="rotate(216)" />
+    <use xlink:href="#hole" transform="rotate(288)" />
+  </mask>
+</g>
+</svg>
diff --git a/website/templates/base.html b/website/templates/base.html
@@ -48,16 +48,16 @@
     </head>
 
     <body class="flex flex-col p-3 mx-auto min-h-screen text-lg text-white break-words bg-[#2A3439] lg:px-5 2xl:container">
-        <header class="flex gap-x-6 items-center py-2 px-2.5 mb-1 bg-black/30 rounded-full">
+        <header class="flex flex-col gap-x-4 items-center py-2 px-4 mb-1 bg-black/30 rounded-sm sm:flex-row sm:rounded-full">
             <a class="transition duration-500 hover:scale-110"
                href="{{ get_url(path='/') | safe }}"
                aria-hidden="true">
-                <img class="m-0 w-12 h-12 rounded-full"
+                <img class="m-0 w-12 h-12"
                      src="{{ get_url(path=config.extra.logo_path) | safe }}"
                      alt="">
             </a>
 
-            <nav class="flex gap-x-6 items-center font-bold">
+            <nav class="flex flex-col gap-x-6 items-center font-bold sm:flex-row">
                 {% for menu_item in config.extra.menu_items %}
                     <a class="p-1 no-underline" href="{{ menu_item.url | safe }}">{{ menu_item.name }}</a>
                 {% endfor %}
@@ -68,12 +68,15 @@
             {% block content %}{% endblock %}
         </main>
 
-        <footer class="pt-2 pb-3 mt-auto">
-            <img class="m-0 mx-auto w-20 h-20"
-                 src="{{ get_url(path='images/happy_ferris.svg') | safe }}"
-                 alt="">
+        <footer class="pt-2 pb-3 mt-auto text-center">
+            <div class="mx-auto inline-flex gap-x-1.5 items-center">
+                <img class="w-8 h-8"
+                     src="{{ get_url(path='images/rust_logo.svg') | safe }}"
+                     alt="">
+                <div class="text-sm italic">Rustlings is an official Rust project</div>
+            </div>
 
-            <nav class="flex flex-col gap-y-3 justify-around py-3 text-center bg-black/30 rounded-sm sm:flex-row sm:rounded-full">
+            <nav class="flex flex-col gap-y-3 justify-around py-3 bg-black/30 rounded-sm sm:flex-row sm:rounded-full">
                 {% for footer_item in config.extra.footer_items %}
                     <a class="text-sm no-underline" href="{{ footer_item.url | safe }}">{{ footer_item.name }}</a>
                 {% endfor %}
