mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minimal adaptive

This commit is contained in:
Kseninia Mikhaylova 2024-06-10 16:43:11 +03:00
parent ee44f63ef0
commit 8331f2fc29
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.vue
View File

@ -122,10 +122,10 @@ const { scrollToAnchor, scrollToTop } = useAnchorScroll({
</div>
<div class="siteblock bg-white" id="delivery">
<div class="container">
<div class="prose col-span-6 whitespace-break-spaces">
<div class="prose col-span-12 xl:col-span-6 whitespace-break-spaces">
<span v-html="deliveryText"></span>
</div>
<div class="prose col-span-6 whitespace-break-spaces">
<div class="prose col-span-12 xl:col-span-6 whitespace-break-spaces">
<span v-html="productsText"></span>
</div>
</div>

34
assets/main.scss
View File

@ -9,19 +9,23 @@ body {
}
.container {
@apply max-w-7xl mx-auto grid grid-cols-12 items-center;
@apply max-w-7xl mx-auto grid grid-cols-12 items-center px-4;
}
.header {
@apply p-2 bg-slate-200;
a:not([target="_blank"]) {
@apply hidden xl:inline-block
}
}
.logo {
@apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2 py-4;
@apply text-orange-400 font-bold w-20 text-xl leading-4 py-4 col-span-12 xl:col-span-2;
}
.menu {
@apply col-span-8 flex justify-between;
@apply col-span-12 xl:col-span-8 flex justify-between;
}
a[href^="#"] {
@ -36,7 +40,7 @@ a[href^="#"] {
}
.k-logo {
@apply col-span-2 row-span-3 text-9xl text-orange-400;
@apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-orange-400;
svg {
@apply my-0 mx-auto;
@ -44,14 +48,14 @@ a[href^="#"] {
}
&-text {
@apply col-span-5 text-sm prose whitespace-break-spaces;
@apply col-span-12 xl:col-span-5 text-sm prose whitespace-break-spaces;
&-small {
@apply col-span-10 text-xs min-w-full prose;
@apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
}
&-social {
@apply col-span-10 flex gap-4
@apply col-span-12 xl:col-span-10 flex gap-4
}
}
}
@ -72,7 +76,7 @@ a[href^="#"] {
}
&-content {
@apply col-span-6 h-full flex flex-col justify-between prose;
@apply col-span-full xl:col-span-6 h-full flex flex-col justify-between min-w-full prose;
}
&-text {
@ -84,13 +88,13 @@ a[href^="#"] {
}
&-image {
@apply col-span-6 flex justify-center items-center;
@apply col-span-full xl:col-span-6 flex justify-center items-center;
min-height: 50vh;
}
}
.review {
@apply col-span-4 grid grid-cols-4 items-center px-4;
@apply col-span-12 md:col-span-6 xl:col-span-4 grid grid-cols-4 items-center px-4;
&-image {
@apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
@ -145,7 +149,11 @@ button {
}
&-item {
@apply flex flex-row gap-4 items-center justify-center;
@apply flex flex-row gap-4 items-center justify-center flex-wrap;
label {
@apply w-full xl:w-auto;
}
.icon {
@apply hover:text-primary cursor-pointer transition-colors text-2xl;
@ -174,10 +182,12 @@ button {
}
.feature {
@apply col-span-full flex gap-10 mt-4 justify-between;
@apply col-span-full flex gap-10 mt-4 justify-center flex-wrap items-center;
&-item {
@apply rounded bg-neutral-200 p-4 min-w-36 flex justify-center flex-wrap flex-col;
}
&-name {
@apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2;
}