both logo & icon + wallpaper
This commit is contained in:
parent
f23d702119
commit
2822b82e99
3 changed files with 142 additions and 131 deletions
|
@ -8,107 +8,109 @@
|
|||
:noTabCollapse="true"
|
||||
:displayHomeButton="false"
|
||||
/></template>
|
||||
<swiper
|
||||
id="visitor-view"
|
||||
:round-lengths="true"
|
||||
:touch-angle="25"
|
||||
:threshold="10"
|
||||
:centeredSlides="true"
|
||||
:space-between="20"
|
||||
:allow-touch-move="
|
||||
!(
|
||||
deviceKind === 'desktop' &&
|
||||
!defaultStore.state.swipeOnDesktop
|
||||
)
|
||||
"
|
||||
:set-wrapper-size="true"
|
||||
@swiper="setSwiperRef"
|
||||
@slide-change="onSlideChange"
|
||||
>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<XKanban v-if="isActive" />
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<XNotes :pagination="paginationForLocal" />
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<XNotes :pagination="paginationForRemote" />
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<XChannelList
|
||||
key="featured"
|
||||
:pagination="featuredPagination"
|
||||
/>
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<MkPagination
|
||||
v-slot="{ items }"
|
||||
:pagination="featuredPagesPagination"
|
||||
>
|
||||
<MkPagePreview
|
||||
v-for="page in items"
|
||||
:key="page.id"
|
||||
class="ckltabjg"
|
||||
:page="page"
|
||||
<div id="visitor-view">
|
||||
<swiper
|
||||
class="swiper"
|
||||
:round-lengths="true"
|
||||
:touch-angle="25"
|
||||
:threshold="10"
|
||||
:centeredSlides="true"
|
||||
:space-between="20"
|
||||
:allow-touch-move="
|
||||
!(
|
||||
deviceKind === 'desktop' &&
|
||||
!defaultStore.state.swipeOnDesktop
|
||||
)
|
||||
"
|
||||
:set-wrapper-size="true"
|
||||
@swiper="setSwiperRef"
|
||||
@slide-change="onSlideChange"
|
||||
>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<XKanban v-if="isActive" />
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<XNotes :pagination="paginationForLocal" />
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<XNotes :pagination="paginationForRemote" />
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<XChannelList
|
||||
key="featured"
|
||||
:pagination="featuredPagination"
|
||||
/>
|
||||
</MkPagination>
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="1200" v-if="isActive">
|
||||
<MkFolder class="_gap">
|
||||
<template #header
|
||||
><i class="ph-clock ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.recentPosts }}</template
|
||||
>
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
<MkPagination
|
||||
v-slot="{ items }"
|
||||
:pagination="recentPostsPagination"
|
||||
:disable-auto-load="true"
|
||||
:pagination="featuredPagesPagination"
|
||||
>
|
||||
<div class="vfpdbgtk">
|
||||
<MkGalleryPostPreview
|
||||
v-for="post in items"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class="post"
|
||||
/>
|
||||
</div>
|
||||
<MkPagePreview
|
||||
v-for="page in items"
|
||||
:key="page.id"
|
||||
class="ckltabjg"
|
||||
:page="page"
|
||||
/>
|
||||
</MkPagination>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap">
|
||||
<template #header
|
||||
><i class="ph-fire-simple ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.popularPosts }}</template
|
||||
>
|
||||
<MkPagination
|
||||
v-slot="{ items }"
|
||||
:pagination="popularPostsPagination"
|
||||
:disable-auto-load="true"
|
||||
>
|
||||
<div class="vfpdbgtk">
|
||||
<MkGalleryPostPreview
|
||||
v-for="post in items"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class="post"
|
||||
/>
|
||||
</div>
|
||||
</MkPagination>
|
||||
</MkFolder>
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<XUsers v-if="isActive" />
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="1200" v-if="isActive">
|
||||
<MkFolder class="_gap">
|
||||
<template #header
|
||||
><i class="ph-clock ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.recentPosts }}</template
|
||||
>
|
||||
<MkPagination
|
||||
v-slot="{ items }"
|
||||
:pagination="recentPostsPagination"
|
||||
:disable-auto-load="true"
|
||||
>
|
||||
<div class="vfpdbgtk">
|
||||
<MkGalleryPostPreview
|
||||
v-for="post in items"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class="post"
|
||||
/>
|
||||
</div>
|
||||
</MkPagination>
|
||||
</MkFolder>
|
||||
<MkFolder class="_gap">
|
||||
<template #header
|
||||
><i class="ph-fire-simple ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.popularPosts }}</template
|
||||
>
|
||||
<MkPagination
|
||||
v-slot="{ items }"
|
||||
:pagination="popularPostsPagination"
|
||||
:disable-auto-load="true"
|
||||
>
|
||||
<div class="vfpdbgtk">
|
||||
<MkGalleryPostPreview
|
||||
v-for="post in items"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class="post"
|
||||
/>
|
||||
</div>
|
||||
</MkPagination>
|
||||
</MkFolder>
|
||||
</MkSpacer>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<XUsers v-if="isActive" />
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
|
@ -266,25 +268,31 @@ const popularPostsPagination = {
|
|||
#visitor-view {
|
||||
margin-top: -55px;
|
||||
padding-top: 55px;
|
||||
.swiper {
|
||||
margin-top: -55px;
|
||||
padding-top: 55px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
.swiper {
|
||||
mask: linear-gradient(to bottom, black 70%, transparent 97%);
|
||||
-webkit-mask: linear-gradient(to bottom, black 70%, transparent 97%);
|
||||
padding-block: calc(2.5vw + 55px) 30vh;
|
||||
margin-top: -55px;
|
||||
max-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden auto !important;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: .5;
|
||||
// filter: blur(4px);
|
||||
background-image: v-bind("wallpaper");
|
||||
}
|
||||
}
|
||||
}
|
||||
// :deep(.swiper-wrapper) {
|
||||
// mask: linear-gradient(to bottom, black 70%, transparent 95%);
|
||||
// padding-block: calc(2.5vw + 55px) 30vh;
|
||||
// margin-top: -55px;
|
||||
// max-height: 100vh;
|
||||
// box-sizing: border-box;
|
||||
// overflow: hidden auto !important;
|
||||
// }
|
||||
// &::before {
|
||||
// content: "";
|
||||
// position: fixed;
|
||||
// inset: 0;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
// background-position: center;
|
||||
// opacity: .5;
|
||||
// filter: blur(4px);
|
||||
// background-image: v-bind("wallpaper");
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
|
||||
/>
|
||||
<RouterView />
|
||||
<footer class="powered-by">
|
||||
<footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'">
|
||||
<MkA to="/">
|
||||
<MkInstanceTicker :instance="meta"></MkInstanceTicker>
|
||||
<small>{{ i18n.ts.poweredBy }}</small>
|
||||
|
|
|
@ -27,13 +27,17 @@
|
|||
<img
|
||||
class="logo"
|
||||
:src="
|
||||
meta.logoImageUrl ||
|
||||
$instance.iconUrl ||
|
||||
$instance.faviconUrl ||
|
||||
'/favicon.ico'
|
||||
"
|
||||
/>
|
||||
<h1>
|
||||
<img
|
||||
v-if="meta.logoImageUrl"
|
||||
:src="meta.logoImageUrl"
|
||||
class="logo"
|
||||
/>
|
||||
<h1 v-else>
|
||||
<MkA to="/" class="link">{{ instanceName }}</MkA>
|
||||
</h1>
|
||||
</div>
|
||||
|
@ -315,6 +319,7 @@ function showMenu(ev) {
|
|||
padding-top: min(56.25%, 70vh);
|
||||
margin-bottom: calc(-100px - var(--radius));
|
||||
mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
|
||||
-webkit-mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
|
||||
transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
|
||||
img {
|
||||
position: absolute;
|
||||
|
@ -329,7 +334,7 @@ function showMenu(ev) {
|
|||
opacity: 1 !important;
|
||||
}
|
||||
> .logo {
|
||||
margin-top: -20px !important;
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -369,19 +374,20 @@ function showMenu(ev) {
|
|||
opacity: .5;
|
||||
clip-path: inset(55px 0 0 0 round var(--radius));
|
||||
mask: linear-gradient(transparent 55px, #000 50px, transparent);
|
||||
-webkit-mask: linear-gradient(
|
||||
transparent 55px,
|
||||
#000 50px,
|
||||
transparent
|
||||
);
|
||||
-webkit-mask: llinear-gradient(transparent 55px, #000 50px, transparent);
|
||||
}
|
||||
> .logo {
|
||||
height: 90px;
|
||||
min-width: 90px;
|
||||
height: 80px;
|
||||
min-width: 80px;
|
||||
max-width: 100%;
|
||||
border-radius: var(--radius);
|
||||
margin-top: -5px;
|
||||
transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
|
||||
&:last-child {
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
margin-block: .5em 1em !important;
|
||||
}
|
||||
}
|
||||
> h1 {
|
||||
margin-block: 0.7em;
|
||||
|
@ -412,10 +418,7 @@ function showMenu(ev) {
|
|||
position: relative;
|
||||
max-height: calc(9em + 50px);
|
||||
mask: linear-gradient(black calc(100% - 64px), transparent);
|
||||
-webkit-mask: linear-gradient(
|
||||
black calc(100% - 64px),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
|
||||
}
|
||||
}
|
||||
.announcements {
|
||||
|
|
Loading…
Reference in a new issue