Merge pull request #35 from OneLiteFeatherNET/themeinerlp/feature/simple-web-page

Add main page and move blog

Author: TheMeinerLP

SITEMAP-OPTIMIZATION.md

@@ -9,4 +9,7 @@ useHead({
     return titleChunk ? `${titleChunk} - OneLiteFeather.net` : 'OneLiteFeather.net';
   }
 })
-</script>
+</script>
+<style>
+@import "@/assets/css/tokens.css";
+</style>

app.vue

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
 @theme {
     /* Sekundärfarben aus dem Brand Guide */

assets/css/tailwind.css

@@ -0,0 +1,77 @@
+:root {
+    /* Brand core */
+    --color-brand-primary:  #2A388F; /* tiefes Blau */
+    --color-brand-secondary:#27A9E1; /* helleres Blau */
+    --color-brand-accent:   #EC008B; /* magenta */
+    --color-brand-orange:   #F7931D; /* orange */
+    --color-brand-purple:   #91268F; /* violett */
+    --color-white:          #FFFFFF;
+
+    /* Derived neutrals (UI) */
+    --color-bg:             #ffffff;
+    --color-surface:        #f8fafc;
+    --color-text:           #111827;
+    --color-muted:          #6b7280;
+    --color-border:         #e5e7eb;
+
+    /* Gradients */
+    --gradient-brand: linear-gradient(90deg, #2A388F 0%, #27A9E1 100%);
+    --gradient-accent: linear-gradient(90deg, #91268F 0%, #EC008B 60%, #F7931D 100%);
+    /* Light variants (hellere Varianten) */
+    --gradient-brand-light: linear-gradient(90deg, #5163C6 0%, #7FD3F4 100%);
+    --gradient-accent-light: linear-gradient(90deg, #B35DB2 0%, #FF4FAE 60%, #FFB866 100%);
+  }
+
+/* Dark mode via class strategy (Tailwind default: 'media', hier nutzen wir 'class') */
+.dark {
+    --color-bg:       #0b1020;
+    --color-surface:  #11162a;
+    --color-text:     #e5e7eb;
+    --color-muted:    #9aa3b2;
+    --color-border:   #1f2743;
+
+    /* Core bleibt gleich, du kannst bei Bedarf abtönen: */
+    /* --color-brand-primary: #263276; */
+  }
+
+/* Global smooth scrolling for in-page anchors */
+html { scroll-behavior: smooth; }
+
+/* Respect user preference to reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+}
+
+  /* Utility: Gradient-Text auf Basis der Brand-Token */
+  .text-gradient-brand {
+      background: var(--gradient-brand);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent; /* iOS/Safari */
+  }
+
+  .text-gradient-accent {
+      background: var(--gradient-accent);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent; /* iOS/Safari */
+  }
+
+  /* Light utilities */
+  .text-gradient-brand-light {
+      background: var(--gradient-brand-light);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent; /* iOS/Safari */
+  }
+
+  .text-gradient-accent-light {
+      background: var(--gradient-accent-light);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent; /* iOS/Safari */
+  }

assets/css/tokens.css

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import IconFa from "~/components/ui/icons/IconFa.vue";
+
 const props = defineProps({
   url: {
     type: String,
@@ -77,66 +79,56 @@ const emailShareUrl = computed(() => {
     <h3 class="text-lg font-bold mb-3 dark:text-white">{{ $t('article.share') }}</h3>
     <div class="flex space-x-3">
       <!-- Facebook -->
-      <a :href="facebookShareUrl" 
-         target="_blank" 
-         rel="noopener noreferrer" 
-         class="social-button bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none" 
+      <a :href="facebookShareUrl"
+         target="_blank"
+         rel="noopener noreferrer"
+         class="social-button bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
          :aria-label="$t('article.share_on_facebook')"
          @click="trackShareEvent('facebook')"
          data-ph-capture-attribute-platform="facebook">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
-        </svg>
+        <IconFa :icon="['fab','facebook-f']" class="h-6 w-6" aria-hidden="true" />
       </a>
 
       <!-- Twitter -->
-      <a :href="twitterShareUrl" 
-         target="_blank" 
-         rel="noopener noreferrer" 
-         class="social-button bg-sky-500 hover:bg-sky-600 focus:ring-2 focus:ring-sky-400 focus:outline-none" 
+      <a :href="twitterShareUrl"
+         target="_blank"
+         rel="noopener noreferrer"
+         class="social-button bg-sky-500 hover:bg-sky-600 focus:ring-2 focus:ring-sky-400 focus:outline-none"
          :aria-label="$t('article.share_on_twitter')"
          @click="trackShareEvent('twitter')"
          data-ph-capture-attribute-platform="twitter">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
-        </svg>
+        <IconFa :icon="['fab','twitter']" class="h-6 w-6" aria-hidden="true" />
       </a>
 
       <!-- LinkedIn -->
-      <a :href="linkedinShareUrl" 
-         target="_blank" 
-         rel="noopener noreferrer" 
-         class="social-button bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:ring-blue-600 focus:outline-none" 
+      <a :href="linkedinShareUrl"
+         target="_blank"
+         rel="noopener noreferrer"
+         class="social-button bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:ring-blue-600 focus:outline-none"
          :aria-label="$t('article.share_on_linkedin')"
          @click="trackShareEvent('linkedin')"
          data-ph-capture-attribute-platform="linkedin">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
-        </svg>
+        <IconFa :icon="['fab','linkedin-in']" class="h-6 w-6" aria-hidden="true" />
       </a>
 
       <!-- WhatsApp -->
-      <a :href="whatsappShareUrl" 
-         target="_blank" 
-         rel="noopener noreferrer" 
-         class="social-button bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-400 focus:outline-none" 
+      <a :href="whatsappShareUrl"
+         target="_blank"
+         rel="noopener noreferrer"
+         class="social-button bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-400 focus:outline-none"
          :aria-label="$t('article.share_on_whatsapp')"
          @click="trackShareEvent('whatsapp')"
          data-ph-capture-attribute-platform="whatsapp">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" />
-        </svg>
+        <IconFa :icon="['fab','whatsapp']" class="h-6 w-6" aria-hidden="true" />
       </a>
 
       <!-- Email -->
-      <a :href="emailShareUrl" 
-         class="social-button bg-gray-600 hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:outline-none" 
+      <a :href="emailShareUrl"
+         class="social-button bg-gray-600 hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:outline-none"
          :aria-label="$t('article.share_by_email')"
          @click="trackShareEvent('email')"
          data-ph-capture-attribute-platform="email">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-        </svg>
+        <IconFa :icon="['fas','envelope']" class="h-6 w-6" aria-hidden="true" />
       </a>
     </div>
   </div>
@@ -149,7 +141,12 @@ const emailShareUrl = computed(() => {
   justify-content: center;
   width: 40px;
   height: 40px;
-  border-radius: 50%;
+  /* Ensure perfect circle on very small screens */
+  border-radius: 9999px;
+  box-sizing: border-box;
+  padding: 0;
+  /* Prevent flexbox from shrinking the button into an oval on tiny viewports */
+  flex: 0 0 auto;
   color: white;
   transition: all 0.2s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

components/base/navigation/NavigationSimpleButton.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref } from '#imports';
-import NavigationSimpleButton from "~/components/base/navigation/NavigationSimpleButton.vue";
-import NavigationLanguageSelector from "~/components/base/navigation/NavigationLanguageSelector.vue";
+import SimpleNavButton from "~/components/ui/buttons/SimpleNavButton.vue";
+import NavigationLanguageSelector from "~/components/blog/base/navigation/NavigationLanguageSelector.vue";
+const { t } = useI18n();
 const locale = useCookieLocale();
-const localePath = useLocalePath()
+const localePath = useLocalePath();
 
 
 const navItems = [
-  { textKey: 'navigation.overview', path: localePath('index', locale?.value as Locale) },
+  { textKey: 'navigation.overview', path: localePath('index', locale?.value as 'de' | 'en' | undefined) },
 ];
 
 const mobileMenuOpen = ref(false);
@@ -20,7 +21,7 @@ const mobileMenuOpen = ref(false);
         <div class="flex items-center">
           <NuxtLinkLocale to="/" class="flex-shrink-0 flex items-center">
             <NuxtImg src="images/logo.svg"
-                     :alt="$t('accessibility.logo_alt')"
+                     :alt="t('accessibility.logo_alt')"
                      width="60"
                      height="60"
                      class="h-15 w-15 rounded-full"
@@ -30,7 +31,7 @@ const mobileMenuOpen = ref(false);
           </NuxtLinkLocale>
         </div>
         <nav class="hidden md:flex items-center space-x-1">
-          <NavigationSimpleButton
+          <SimpleNavButton
               v-for="item in navItems"
               :text-key="item.textKey"
               :path="item.path" />
@@ -41,7 +42,7 @@ const mobileMenuOpen = ref(false);
               id="mobile-menu-button"
               @click="mobileMenuOpen = !mobileMenuOpen"
               class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              :aria-label="$t('navigation.toggle_mobile_menu')"
+              :aria-label="t('navigation.toggle_mobile_menu')"
               :aria-expanded="mobileMenuOpen"
           >
             <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -54,7 +55,7 @@ const mobileMenuOpen = ref(false);
     </div>
     <div class="md:hidden" v-show="mobileMenuOpen" role="menu" aria-labelledby="mobile-menu-button">
       <div class="pt-2 pb-4 space-y-1 px-4">
-        <NavigationSimpleButton
+        <SimpleNavButton
             v-for="item in navItems"
             :text-key="item.textKey"
             :path="item.path"

components/blog/SocialMediaShare.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import SimpleNavButton from '~/components/ui/buttons/SimpleNavButton.vue';
+
+const props = defineProps<{
+  textKey: string;
+  path: string;
+  mobile?: boolean;
+}>();
+
+const emit = defineEmits(['click-mobile']);
+</script>
+
+<template>
+  <SimpleNavButton :text-key="props.textKey" :path="props.path" :mobile="props.mobile" @click-mobile="() => emit('click-mobile')" />
+</template>