feat: update navbar logo and styles, add responsive margin utility classes

2025-06-14 21:02:33 +02:00
parent 3b32f066f4
commit 14d62a8e68
3 changed files with 58 additions and 37 deletions
@@ -5624,6 +5624,11 @@
      margin-top: calc(var(--spacing) * 24);
    }
  }
+  .md\:mt-24 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 24);
+    }
+  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
@@ -15,8 +15,15 @@
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-24 items-center justify-between">
            <!-- Logo (Links) -->
-            <div class="flex">
-                <svg class="h-18 w-18 top-2 md:h-36 md:w-36 md:top-6 absolute" viewBox="0 0 316.97 324.57">
+            <a href="https://www.schachfreunde-badsteben.de/" class="flex justify-center items-center">
+                <div class="relative flex justify-center items-center md:mt-24">
+                    <div class="hidden absolute inset-0 w-48 h-48 md:block">
+                        <svg width="100%" height="100%" viewBox="0 0 48 48">
+                            <circle cx="24" cy="24" r="24" fill="#cdcdcd"/>
+                        </svg>
+                    </div>
+                    <svg class="w-18 h-18 md:w-36 md:h-36 relative" viewBox="0 0 316.97 324.57" fill="none">
+                        <!-- Bestehendes SVG-Markup -->
                        <defs>
                            <style>
                                .cls-6{fill-rule:evenodd}.cls-7{fill:#fff}.cls-6,.cls-8{fill:#1d59a6}
@@ -49,11 +56,15 @@
                        <path d="M162.91 201.98c-12.91-8.04-20.45-3.41-20.45-3.41 16.08 13.64 16.08 42.62 16.08 42.62 2.03-35.48 15.34-42.87 15.34-42.87-6.33-.24-10.96 3.66-10.96 3.66Z" class="cls-8"/>
                        <path d="M162.96 200.71s.86-7.19 6.34-9.13c5.48-1.95 5.72 2.92 3.16 3.41-2.56.49-6.09.73-9.5 5.73Z" class="cls-8"/>
                        <path fill="#0d0d0d" fill-rule="evenodd" d="M193.8 49.42c3.74-11.08 9.7-23.25 17.37-32.37-6.4.81-13.75 3.25-18.55 7.66 6.44 8.58-3.49 15.31-15.92 13.33-13.29-2.12-21.73-11.06-6.46-18.18-2.49-7.46-6.56-13.66-11.3-19.85-4.74 6.19-8.82 12.39-11.3 19.85 15.27 7.12 6.82 16.06-6.46 18.18-12.43 1.98-22.36-4.75-15.92-13.33-4.8-4.41-12.16-6.84-18.55-7.66 7.66 9.11 13.62 21.29 17.36 32.36 22.99-4.42 46.76-4.42 69.74 0Zm-8.37-13.12c-2.6.51-5.59.56-8.74.06-3.54-.56-6.74-1.61-9.24-2.98 8.4.19 14.41-4.27 5.89-10.8 2.65-4.43 6.15-7.84 10.06-11.14 2.16 4.65 3.9 9.2 4.44 14.34-8.86 1.97-7.67 6.99-2.42 10.52Zm-35.03-2.92c-2.5 1.37-5.69 2.42-9.24 2.98-3.15.5-6.14.45-8.74-.06 5.25-3.53 6.43-8.54-2.42-10.52.54-5.14 2.29-9.7 4.45-14.34 3.92 3.3 7.41 6.71 10.06 11.14-8.51 6.52-2.51 10.99 5.89 10.8Z"/>
+
                    </svg>
                </div>
+            </a>
+
+
            <!-- Desktop Menu (Mitte) -->
            <div class="hidden md:block">
-                <div class="flex items-baseline space-x-4">
+                <div class="flex items-baseline space-x-2">
                    <!-- Einfacher Menüpunkt -->
                    <a href="#" class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Home</a>
                    <!-- Einfacher Menüpunkt -->
@@ -5624,6 +5624,11 @@
      margin-top: calc(var(--spacing) * 24);
    }
  }
+  .md\:mt-24 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 24);
+    }
+  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;