john
/
timekeeper
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: custom fonts

This commit is contained in:
pskfyi 2022-01-13 13:02:43 -08:00 committed by pskfyi
parent 6bac096ca8
commit 1c0cc228f6
5 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/KeyArtStage.vue
View File

@ -9,10 +9,11 @@
class="spare-time flex flex-row items-center font-bold rounded-2xl select-none" class="spare-time flex flex-row items-center font-bold rounded-2xl select-none"
:class="`text-${$store.getters.activeTab.darkColor}`" :class="`text-${$store.getters.activeTab.darkColor}`"
> >
<span class="text-3xl md:text-5xl" v-text="currencyText" />
<span <span
class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2" class="spare-time-value text-3xl md:text-5xl"
v-text="currencyText"
/> />
<span class="fas fa-hourglass-half text-xl pl-2 md:text-3xl md:pt-1" />
</span> </span>
</div> </div>
</div> </div>

1
components/TimeHeader.vue
View File

@ -42,6 +42,7 @@ export default {
header { header {
min-width: 18rem; min-width: 18rem;
transition: background-color 2000ms, color 2000ms; transition: background-color 2000ms, color 2000ms;
font-family: 'Roboto Slab', serif;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
header { header {

9
layouts/default.vue
View File

@ -21,7 +21,7 @@
:class="activeTabColorClasses" :class="activeTabColorClasses"
> >
<div <div
class="w-full text-2xl text-center pt-1 pb-2" class="tab-title w-full text-2xl text-center pt-1 pb-2"
v-text="activeTab.title" v-text="activeTab.title"
/> />
@ -80,6 +80,8 @@ export default {
</script> </script>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Roboto+Slab:wght@600&display=swap');
html, html,
body, body,
#__nuxt, #__nuxt,
@ -91,6 +93,7 @@ body,
html { html {
background: #e5e7eb; background: #e5e7eb;
overflow-y: hidden; overflow-y: hidden;
font-family: 'Manrope', sans-serif;
} }
</style> </style>
@ -99,4 +102,8 @@ main {
grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr); grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr);
transition: background-color 2000ms; transition: background-color 2000ms;
} }
.tab-title {
font-family: 'Roboto Slab', serif;
}
</style> </style>

20
pages/Missions.vue
View File

@ -1,12 +1,6 @@
<template> <template>
<div class="missions grid"> <div class="missions grid">
<responsive-grid <responsive-grid v-if="incomplete.length">
v-if="incomplete.length"
:class="
completed.length &&
`pb-6 border-b-2 border-${$store.getters.activeTab.darkColor}`
"
>
<mission-button <mission-button
v-for="(mission, index) in incomplete" v-for="(mission, index) in incomplete"
:key="index" :key="index"
@ -15,18 +9,14 @@
/> />
</responsive-grid> </responsive-grid>
<div <div v-else>
v-else
:class="
completed.length &&
`pt-6 pb-10 border-b-2 border-${$store.getters.activeTab.darkColor}`
"
>
<h3 class="text-center">No Missions Currently Available</h3> <h3 class="text-center">No Missions Currently Available</h3>
</div> </div>
<template v-if="completed.length"> <template v-if="completed.length">
<h2 class="pt-2 pb-2 text-center text-xl">Completed Missions</h2> <h2 class="pt-4 pb-2 md:pt-8 md:pb-4 font-semibold text-center text-xl">
Completed Missions
</h2>
<responsive-grid min="1" mid="3" max="6"> <responsive-grid min="1" mid="3" max="6">
<completed-mission <completed-mission
v-for="(mission, index) in completed" v-for="(mission, index) in completed"

8
pages/TimeMachine.vue
View File

@ -20,15 +20,15 @@
</span> </span>
</div> </div>
<h2 class="text-lg font-semibold text-center pt-4 md:pt-8">Upgrades</h2> <h2 class="text-xl font-semibold text-center pt-4 md:pt-8">Upgrades</h2>
<responsive-grid class="pt-4 md:pt-8"> <responsive-grid class="pt-2 md:pt-4">
<max-energy-upgrade-button /> <max-energy-upgrade-button />
</responsive-grid> </responsive-grid>
<h2 class="text-lg font-semibold text-center pt-4 md:pt-8">Time Travel</h2> <h2 class="text-xl font-semibold text-center pt-4 md:pt-8">Time Travel</h2>
<responsive-grid class="pt-4 md:pt-8"> <responsive-grid class="pt-2 md:pt-4">
<progress-button <progress-button
v-for="process in $store.state.processes" v-for="process in $store.state.processes"
:key="process.instrument" :key="process.instrument"