Update header and footer

This commit is contained in:
mo8it 2025-05-17 13:02:34 +02:00
parent 6d5369d4d0
commit 2673177b17
3 changed files with 73 additions and 9 deletions

View File

@ -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"

View File

@ -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>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -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 %}