Change page content max width

This commit is contained in:
2023-05-07 21:45:55 +02:00
parent 97f3580f69
commit ab50b61295
2 changed files with 65 additions and 57 deletions

View File

@@ -33,6 +33,12 @@ p a {
} }
} }
.page-content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.v-overlay__scrim { .v-overlay__scrim {
background: rgb(var(--v-theme-background)) !important; background: rgb(var(--v-theme-background)) !important;
opacity: 0.9 !important; opacity: 0.9 !important;

View File

@@ -1,61 +1,63 @@
<template> <template>
<v-row> <div class="page-content">
<v-col cols="12"> <v-row>
<span class="text-h5 text-md-h4 text-high-emphasis"> <v-col cols="12">
{{ $t('bioTitle') }} <span class="text-h5 text-md-h4 text-high-emphasis">
</span> {{ $t('bioTitle') }}
</v-col> </span>
<v-col cols="12"> </v-col>
<v-sheet color="transparent" class="text-medium-emphasis"> <v-col cols="12">
<i18n-t keypath="bioBody" tag="p"> <v-sheet color="transparent" class="text-medium-emphasis">
<template v-slot:mmorpg> <i18n-t keypath="bioBody" tag="p">
<NuxtLink :href="mmorpgWikiUrl" target="_blank">MMORPG</NuxtLink> <template v-slot:mmorpg>
</template> <NuxtLink :href="mmorpgWikiUrl" target="_blank">MMORPG</NuxtLink>
<template v-slot:htl> </template>
<NuxtLink :href="htlWikiUrl" target="_blank">HTL</NuxtLink> <template v-slot:htl>
</template> <NuxtLink :href="htlWikiUrl" target="_blank">HTL</NuxtLink>
<template v-slot:bi> </template>
<NuxtLink :href="biWikiUrl" target="_blank">{{ $t('bi') }}</NuxtLink> <template v-slot:bi>
</template> <NuxtLink :href="biWikiUrl" target="_blank">{{ $t('bi') }}</NuxtLink>
<template v-slot:yearsOfExp> </template>
{{ yearsOfExp }} <template v-slot:yearsOfExp>
</template> {{ yearsOfExp }}
</i18n-t> </template>
<br/> </i18n-t>
<p>{{ $t('bioSubtitle') }}</p> <br/>
</v-sheet> <p>{{ $t('bioSubtitle') }}</p>
</v-col> </v-sheet>
<v-col v-for="set, ind in sets" :key="ind" cols="12"> </v-col>
<v-card> <v-col v-for="set, ind in sets" :key="ind" cols="12">
<v-card-item> <v-card>
<v-card-title>{{ $t(set.title) }}</v-card-title> <v-card-item>
</v-card-item> <v-card-title>{{ $t(set.title) }}</v-card-title>
<v-card-text class="text-center"> </v-card-item>
<v-row> <v-card-text class="text-center">
<v-col v-for="(v, i) in set.data" :key="i" cols="12"> <v-row>
<v-row justify="center"> <v-col v-for="(v, i) in set.data" :key="i" cols="12">
<v-col cols="auto" v-for="(value, index) in v" :key="index"> <v-row justify="center">
<v-btn <v-col cols="auto" v-for="(value, index) in v" :key="index">
variant="text" <v-btn
:size="brandIconSize(value.emphasis)" variant="text"
color="primary" :size="brandIconSize(value.emphasis)"
class="mx-1" color="primary"
:href="`https://${value.url}`" class="mx-1"
target="_blank" :href="`https://${value.url}`"
> target="_blank"
<v-icon :icon="value.icon" :size="brandIconSize(value.emphasis) - 10"></v-icon> >
</v-btn> <v-icon :icon="value.icon" :size="brandIconSize(value.emphasis) - 10"></v-icon>
<span class="text-overline text-primary d-flex flex-column ma-0 pa-0"> </v-btn>
{{ value.title }} <span class="text-overline text-primary d-flex flex-column ma-0 pa-0">
</span> {{ value.title }}
</v-col> </span>
</v-row> </v-col>
</v-col> </v-row>
</v-row> </v-col>
</v-card-text> </v-row>
</v-card> </v-card-text>
</v-col> </v-card>
</v-row> </v-col>
</v-row>
</div>
</template> </template>
<script> <script>