yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 13:04:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: enhance typography with new font sources, update footer layout, and improve navigation structure

Browse source
This commit is contained in:
yuanhau 2025-05-07 00:03:44 +08:00
parent 7c7601a38b
commit d773473eb0
13 changed files with 172 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

41
components/navigation.vue
View file

@ -1,9 +1,6 @@
<script setup lang="ts">
import { gsap } from "gsap";
import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
gsap.registerPlugin(ScrambleTextPlugin);
const { t, locale, locales } = useI18n();
const localePath = useLocalePath();
const switchLocalePath = useSwitchLocalePath();
const dropdownOpen = ref(false);
@ -17,39 +14,32 @@ const toggleDropdown = () => {
dropdownOpen.value = !dropdownOpen.value;
};
const runAnimation = () => {
gsap.to(title.value, {
duration: 1,
scrambleText: "BlindSpec",
});
};
</script>
<template>
<!--Spent too much time trying to set a Navbar....-->
<div
class="fixed top-0 inset-x-0 bg-[#81611a]/70 backdrop-blur-sm h-[55px] flex align-center flex-row text-white pl-4 pt-2 gap-x-5 justify-between z-50 rounded-3xl m-2"
class="fixed top-0 inset-x-0 bg-[#81611a]/70 backdrop-blur-sm h-[55px] flex align-center items-center flex-row text-white pl-4 gap-x-5 justify-between z-50 rounded-3xl m-2"
>
<div class="text-3xl text-bold">
<!--Use mouseenter instead of hover-->
<a href="/" @mouseenter="runAnimation" ref="title"> BlindSpec </a>
<NuxtLink :to="localePath('home')" ref="title">BlindSpec</NuxtLink>
</div>
<div class="text-[0.9em] text-center align-center">
<a
href="/"
<div class="text-[0.9em] left-1/2 absolute transform -translate-x-1/2 space-x-4 items-center">
<NuxtLink
:to="localePath('home')"
class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
>{{ t("nav.home") }}</a
>{{ t("nav.home") }}</NuxtLink
>
&nbsp;
<a
href="/dailybriefing"
<NuxtLink
:to="localePath('dailybriefing')"
class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
>{{ t("nav.dailybriefing") }}</a
>{{ t("nav.dailybriefing") }}</NuxtLink
>
</div>
<div class="relative">
<button
@click="toggleDropdown"
class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100"
class="flex items-center space-x-1 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100 mr-5"
>
<span>{{ locale }}</span>
<svg
@ -68,8 +58,8 @@ const runAnimation = () => {
</button>
<Transition
enter-active-class="animate__animated animate__fadeInDown animate__faster"
leave-active-class="animate__animated animate__fadeOutUp animate__faster"
enter-active-class="animate__animated animate__fadeInDown animate_fastest"
leave-active-class="animate__animated animate__fadeOutUp animate_fastest"
>
<div
v-if="dropdownOpen"
@ -89,3 +79,8 @@ const runAnimation = () => {
</div>
</div>
</template>
<style scoped>
.animate_fastest {
--animate-duration: 0.2s;
}
</style>