HomePage.vue (1930B)
1 <template> 2 <div class="home-page"> 3 <p class="description"> 4 A collection of tools for runners and their coaches 5 </p> 6 <div class="calculators"> 7 <router-link :to="{ name: 'calculate-batch' }" v-slot="{ navigate }" custom> 8 <button @click="navigate"> 9 Batch Calculator 10 </button> 11 </router-link> 12 <router-link :to="{ name: 'calculate-paces' }" v-slot="{ navigate }" custom> 13 <button @click="navigate"> 14 Pace Calculator 15 </button> 16 </router-link> 17 <router-link :to="{ name: 'calculate-races' }" v-slot="{ navigate }" custom> 18 <button @click="navigate"> 19 Race Calculator 20 </button> 21 </router-link> 22 <router-link :to="{ name: 'calculate-splits' }" v-slot="{ navigate }" custom> 23 <button @click="navigate"> 24 Split Calculator 25 </button> 26 </router-link> 27 <router-link :to="{ name: 'calculate-units' }" v-slot="{ navigate }" custom> 28 <button @click="navigate"> 29 Unit Calculator 30 </button> 31 </router-link> 32 <router-link :to="{ name: 'calculate-workouts' }" v-slot="{ navigate }" custom> 33 <button @click="navigate"> 34 Workout Calculator 35 </button> 36 </router-link> 37 </div> 38 <p class="about-link"> 39 <router-link :to="{ name: 'about' }"> 40 About Running Tools 41 </router-link> 42 </p> 43 </div> 44 </template> 45 46 <style scoped> 47 .home-page { 48 text-align: center; 49 max-width: 700px; 50 margin: auto; 51 } 52 .description { 53 font-size: 1.5em; 54 } 55 .calculators { 56 display: flex; 57 flex-wrap: wrap; 58 gap: 0.5em; 59 justify-content: center; 60 61 max-width: 39em; 62 margin: 1em auto; 63 } 64 .calculators button { 65 width: 12em; 66 font-size: 1em; 67 padding: 0.5em; 68 } 69 @media only screen and (max-width: 500px) { 70 .calculators { 71 gap: 0.75em; 72 } 73 .calculators button { 74 padding: 0.75em 0.5em; 75 width: 100%; 76 } 77 } 78 </style>