style(docs): fix responsive style with home-page custom components

This commit is contained in:
zthxxx
2023-06-27 22:00:00 +08:00
parent a508e840f5
commit 103a788f7f
2 changed files with 33 additions and 5 deletions

View File

@@ -18,12 +18,25 @@
display: flex;
justify-content: center;
margin: 0 auto;
padding-inline: 24px;
padding-block: 60px 20px;
/**
* same as VPHero.vue
* https://github.com/vuejs/vitepress/blob/v1.0.0-beta.5/src/client/theme-default/components/VPHero.vue#L83
*/
max-width: 1152px;
padding-block: 60px 20px;
max-width: 1280px;
}
@media (min-width: 640px) {
.container {
padding-inline: 48px;
}
}
@media (min-width: 960px) {
.container {
padding-inline: 64px;
}
}
.webui-preview {

View File

@@ -72,16 +72,31 @@ Thanks to
<style scoped>
.container {
display: flex;
flex-direction: column;
position: relative;
margin: 0 auto;
padding: 0 24px;
/**
* same as VPHero.vue
* https://github.com/vuejs/vitepress/blob/v1.0.0-beta.5/src/client/theme-default/components/VPHero.vue#L83
*/
max-width: 1152px;
max-width: 1280px;
}
@media (min-width: 640px) {
.container {
padding-inline: 48px;
}
}
@media (min-width: 960px) {
.container {
padding-inline: 64px;
}
}
.contributors-avatar {
max-width: 600px;
width: 600px;
}
</style>