-
-
Notifications
You must be signed in to change notification settings - Fork 136
Description
Feature Summary
Currently our use of typography is sloppily defined piecemeal in different parts of the app. We should use Vuetify's config to standardize the definition of our typography styles across the app.
Detailed Description
We should use vuetify's scss config in src/sass/variables.scss to configure standardized type styles for our h1-h6, body, title, subtitle. This will require some investigation and fiddling to define typographic styles that make sense across different areas of the application. In particular, we should check each top-level page, BaseDialog, and the GameOverlays, which each have large type.
This should be done using the format specified in Vuetify's docs for sass config.
Generally, our headings should use Luckiest Guy and other text should use changa. We can try the type definitions that are used in src/routes/stats/StatsView.vue:
.text-h1 {
font-family: 'Luckiest Guy', serif;
}
.text-h2 {
font-family: 'Luckiest Guy', serif;
font-size: 64px;
line-height: 64px;
}
.text-h3 {
font-family: 'Luckiest Guy', serif;
font-size: 48px;
line-height: 52px;
}
.text-body-1 {
font-size: 24px !important;
line-height: 32px;
font-weight: bold;
}
#1275 introduced these as hard-coded in the StatsView, but this inherently makes them inconsistent with the rest of the app. We can try applying these globally in variables.scss to start, and then we need to investigate the other areas of the app to see how this affects the typography and if these values work nicely or need further adjustment (or whether areas where we are currently defining certain header styles should be adjusted to use different typographic classes)