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>
<div class="siteblock bg-white" id="delivery"> <div class="siteblock bg-white" id="delivery">
<div class="container"> <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> <span v-html="deliveryText"></span>
</div> </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> <span v-html="productsText"></span>
</div> </div>
</div> </div>

34
assets/main.scss
View File

@ -9,19 +9,23 @@ body {
} }
.container { .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 { .header {
@apply p-2 bg-slate-200; @apply p-2 bg-slate-200;
a:not([target="_blank"]) {
@apply hidden xl:inline-block
}
} }
.logo { .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 { .menu {
@apply col-span-8 flex justify-between; @apply col-span-12 xl:col-span-8 flex justify-between;
} }
a[href^="#"] { a[href^="#"] {
@ -36,7 +40,7 @@ a[href^="#"] {
} }
.k-logo { .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 { svg {
@apply my-0 mx-auto; @apply my-0 mx-auto;
@ -44,14 +48,14 @@ a[href^="#"] {
} }
&-text { &-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 { &-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 { &-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 { &-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 { &-text {
@ -84,13 +88,13 @@ a[href^="#"] {
} }
&-image { &-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; min-height: 50vh;
} }
} }
.review { .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 { &-image {
@apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1; @apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
@ -145,7 +149,11 @@ button {
} }
&-item { &-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 { .icon {
@apply hover:text-primary cursor-pointer transition-colors text-2xl; @apply hover:text-primary cursor-pointer transition-colors text-2xl;
@ -174,10 +182,12 @@ button {
} }
.feature { .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 { &-item {
@apply rounded bg-neutral-200 p-4 min-w-36 flex justify-center flex-wrap flex-col; @apply rounded bg-neutral-200 p-4 min-w-36 flex justify-center flex-wrap flex-col;
} }
&-name { &-name {
@apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2; @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2;
} }