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

dev #26

Merged
ksenia_mikhailova merged 39 commits from dev into main 2024-07-15 09:00:49 +03:00
Conversation 0 Commits 39 Files Changed 19 +78 -22
2 changed files with 78 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f6b2f6d7fa - Show all commits

43
assets/main.scss
View File

@ -50,12 +50,13 @@ body {
@apply col-span-10 flex justify-end;
a {
@apply hover:text-ioprim-900 transition-colors;
@apply text-zinc-800 hover:text-ioprim-900 transition-colors;
&:before {
content: '';
@apply inline-block w-[2px] h-5 mx-4 align-middle bg-gradient-to-t from-transparent via-[#333333] via-50% to-transparent;
@apply inline-block w-[2px] h-5 mx-4 align-middle bg-gradient-to-t from-transparent via-zinc-800 via-50% to-transparent;
}
&:first-child::before {
content: none;
}
@ -76,14 +77,14 @@ a[href^="#"] {
}
.footer {
@apply px-2 py-4 bg-slate-200;
@apply px-2 py-4 bg-slate-200 text-zinc-800;
.container {
@apply gap-4
}
.k-logo {
@apply col-span-12 xl:col-span-2 row-span-3 text-9xl;
@apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-ioprim;
svg {
@apply my-0 mx-auto;
@ -91,16 +92,44 @@ a[href^="#"] {
}
&-text {
@apply col-span-12 xl:col-span-5 text-sm prose;
@apply col-span-12 xl:col-span-5 text-sm mb-2;
&-small {
@apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
@apply col-span-12 xl:col-span-10 text-xs min-w-full;
}
&-social {
@apply col-span-12 xl:col-span-10 flex gap-4
@apply col-span-12 xl:col-span-10 flex gap-4 flex-wrap justify-center;
}
}
&-icon {
@apply order-2 flex justify-center items-center gap-2;
&:hover {
.footer-icon-text {
@apply no-underline;
}
}
svg {
@apply mb-0;
}
&-big {
@apply text-3xl order-1 w-full text-center;
.footer-icon-text {
@apply no-underline;
}
}
&-text {
@apply underline;
}
}
&_two {
@apply xl:bg-slate-200 py-16 text-sm text-zinc-500;
}
}
.siteblock {

33
components/footer.vue
View File

@ -15,23 +15,50 @@ const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=s
const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
</script>
<template>
<div>
<div class="footer" id="contacts">
<div class="container">
<div class="col-span-3">
<div class="k-logo">
<k_logo />
</div>
</div>
<div class="col-span-6">
<template v-for="item in footerData">
<div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
<div class="footer-text" v-if="!item.small_text">
<template v-for="p in item.text.split('\n')">
<p v-if="p.trim().length">{{ p }}</p>
</template>
</div>
</template>
</div>
<div class="col-span-3">
<div class="footer-text footer-text-social" v-if="social_networkData">
<template v-for="item in social_networkData">
<a :href="item.link" target="_blank">
<a :class="['footer-icon', { 'footer-icon-big': !item.icon }]" :href="item.link"
target="_blank">
<template v-if="item.icon">
<component :is="icons[(item.icon.trim() as keyof typeof icons)]"
v-if="icons.hasOwnProperty(item.icon.trim())" />
<Icon :name="item.icon" v-else /> {{ item.name }}
<Icon :name="item.icon" v-else />
</template>
<span class="footer-icon-text">{{ item.name }}</span>
</a>
</template>
</div>
</div>
</div>
</div>
<div class="footer_two">
<div class="container">
<div class="col-span-10 col-start-2">
<template v-for="item in footerData">
<div class="footer-text" v-if="item.small_text">
{{ item.text }}
</div>
</template>
</div>
</div>
</div>
</div>
</template>