ALHP/alhp-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor Gitea link styling in MainNav component

Browse Source 
Moved inline styles to a scoped CSS class for better maintainability and readability. Added hover effect and smooth transition to enhance user interface consistency.
This commit is contained in:
vikingowl
2025-04-07 19:04:49 +02:00
parent 06d868dcfa
commit d8f52cea61
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/MainNav.vue
View File

@@ -5,11 +5,7 @@
<v-app-bar-title style="align-self: center"> <v-app-bar-title style="align-self: center">
<span style="font-size: 20px"> <span style="font-size: 20px">
ALHP Status ALHP Status
<a <a class="ms-2 gitea-link" href="https://somegit.dev/ALHP/ALHP.GO" target="_blank">
class="ms-2"
href="https://somegit.dev/ALHP/ALHP.GO"
style="color: white; font-size: 25px"
target="_blank">
<i class="fa fa-gitea"></i> <i class="fa fa-gitea"></i>
</a> </a>
</span> </span>
@@ -28,4 +24,15 @@ import { useDisplay } from 'vuetify'
const { mobile, width } = useDisplay() const { mobile, width } = useDisplay()
</script> </script>
<style scoped></style> <style scoped>
.gitea-link {
color: white;
font-size: 25px;
text-decoration: none; /* Optional: To prevent underlining */
transition: color 0.2s; /* Smooth color transition */
}
.gitea-link:hover {
color: #609926;
}
</style>