Fix styling

This commit is contained in:
2025-12-12 22:41:21 +00:00
parent a5b522c996
commit a5d69ccb86
29 changed files with 610 additions and 542 deletions
+9 -8
View File
@@ -1,6 +1,7 @@
<script setup>
import { inject, computed, ref } from 'vue'
import { RouterLink } from 'vue-router'
import Card from '../components/Card.vue'
import StatCard from '../components/StatCard.vue'
import ContributorCard from '../components/ContributorCard.vue'
import RepoCard from '../components/RepoCard.vue'
@@ -24,15 +25,15 @@ const showScoreInChart = ref(false)
<div>
<!-- Hero Section -->
<header class="py-10 sm:py-16 px-4">
<div class="container mx-auto text-center animate-fade-in-up">
<div class="container mx-auto text-center animate-[fadeInUp_0.6s_ease-out]">
<h1 class="text-3xl sm:text-4xl md:text-6xl font-bold mb-3 sm:mb-4">
<span class="gradient-text">Git Velocity</span>
<span class="bg-gradient-to-r from-primary-600 to-accent-600 dark:from-primary-400 dark:to-accent-400 bg-clip-text text-transparent">Git Velocity</span>
</h1>
<p class="text-base sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto px-2">
Celebrate your team's achievements and contributions with beautiful insights.
</p>
<!-- Period and Generation Info -->
<div class="flex flex-col items-center space-y-2 mt-4 text-sm text-gray-500 dark:text-gray-400">
<div class="flex flex-col items-center space-y-2 mt-4 text-sm text-gray-600 dark:text-gray-400">
<p v-if="metrics.period?.start || metrics.period?.end">
<i class="fas fa-calendar-alt mr-1 text-primary-500"></i>
<span class="font-medium">Period:</span>
@@ -51,14 +52,14 @@ const showScoreInChart = ref(false)
<!-- Velocity Timeline Chart -->
<section v-if="velocityTimeline" class="py-6 sm:py-8 px-4">
<div class="container mx-auto">
<div class="card">
<Card>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4 sm:mb-6">
<SectionHeader title="Velocity Timeline" icon="fas fa-chart-line" icon-color="text-primary-500" />
<label class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
<label class="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-400 cursor-pointer">
<input
type="checkbox"
v-model="showScoreInChart"
class="rounded border-gray-300 text-primary-500 focus:ring-primary-500"
class="rounded border-gray-300 dark:border-gray-600 text-primary-500 focus:ring-primary-500"
/>
<span>Show Score</span>
</label>
@@ -66,7 +67,7 @@ const showScoreInChart = ref(false)
<div class="h-[200px] sm:h-[280px] md:h-[320px]">
<VelocityChart :timeline="velocityTimeline" :show-score="showScoreInChart" height="100%" />
</div>
</div>
</Card>
</div>
</section>
@@ -126,7 +127,7 @@ const showScoreInChart = ref(false)
</div>
<div class="mt-6 text-center">
<RouterLink to="/leaderboard" class="btn-primary">
<RouterLink to="/leaderboard" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-primary-500 to-accent-500 text-white font-medium rounded-lg shadow-lg hover:from-primary-600 hover:to-accent-600 transition-all">
View Full Leaderboard
<i class="fas fa-arrow-right ml-2"></i>
</RouterLink>