commit 8655e850aa6a1cad544a4a937b6bfd25553d6ea7 parent d96a8cb514a4d2e490ca3651515c7edbd38b6513 Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com> Date: Fri, 20 Aug 2021 20:24:07 -0700 Turn home page links into buttons Diffstat:
| M | src/views/Home.vue | | | 35 | +++++++++++++++++++++++++++-------- |
1 file changed, 27 insertions(+), 8 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue @@ -3,14 +3,18 @@ <p class="description"> A collection of tools for runners that calculate splits, convert units, and more </p> - <p> - <router-link :to="{ name: 'calculate-paces' }"> - Pace Calculator + <div class="calculators"> + <router-link :to="{ name: 'calculate-paces' }" v-slot="{ navigate }"> + <button @click="navigate"> + Pace Calculator + </button> </router-link> - <router-link :to="{ name: 'calculate-units' }"> - Unit Calculator + <router-link :to="{ name: 'calculate-units' }" v-slot="{ navigate }"> + <button @click="navigate"> + Unit Calculator + </button> </router-link> - </p> + </div> </div> </template> @@ -30,7 +34,22 @@ export default { font-size: 1.5em; margin-bottom: 10px; } -a { - margin: 0px 10px; +.calculators { + display: flex; + flex-direction: row; +} +.calculators button { + flex-grow: 1; + font-size: 1em; + padding: 0.5em; + margin: 0em 0.3em; +} +@media only screen and (max-width: 550px) { + .calculators { + flex-direction: column; + } + .calculators button { + margin: 0.3em 0em; + } } </style>