fixed appearance on mobile devices

This commit is contained in:
Fedor Katurov 2022-11-10 14:33:09 +06:00
parent 2265edf83a
commit 7eeb3b14c6
5 changed files with 18 additions and 11 deletions

View file

@ -33,7 +33,7 @@
} }
@mixin container { @mixin container {
max-width: 1280px; max-width: min(1280px, 100vw);
margin: auto; margin: auto;
padding: 0 40px; padding: 0 40px;

View file

@ -1,5 +1,6 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&family=Roboto:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&family=Roboto:wght@400;700&display=swap");
@import "./variables"; @import "./variables";
@import "./mixins";
@import "./transitions.scss"; @import "./transitions.scss";
body, body,
@ -63,6 +64,11 @@ h1 {
&:not(:first-child) { &:not(:first-child) {
margin-top: 3rem; margin-top: 3rem;
} }
@include phone {
font-size: 2rem;
line-height: 2.4rem;
}
} }
h2 { h2 {

View file

@ -60,14 +60,7 @@
} }
.title { .title {
font-size: 3rem;
line-height: 3.4rem;
margin: 0.8rem 0; margin: 0.8rem 0;
@include phone {
font-size: 2.2rem;
line-height: 3rem;
}
} }
.subtitle { .subtitle {

View file

@ -19,9 +19,11 @@
</div> </div>
<div :class="$style.main"> <div :class="$style.main">
<NuxtLayout name="content"> <div :class="$style.content">
<slot /> <NuxtLayout name="content">
</NuxtLayout> <slot />
</NuxtLayout>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -165,4 +167,9 @@ export default defineComponent({
.footer { .footer {
margin-top: 40px; margin-top: 40px;
} }
.content {
width: 100%;
padding-top: 40px;
}
</style> </style>

View file

@ -36,6 +36,7 @@ definePageMeta({ layout: "landing" });
.heading { .heading {
@include desktop { @include desktop {
padding-top: 0; padding-top: 0;
padding-top: 20px;
} }
} }
</style> </style>