161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-22 00:43:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

(enhance) improve design for smartphone

Browse Source
This commit is contained in:
kakkokari-gtyih 2023-07-15 09:14:18 +09:00
parent ac4bd4fd4e
commit 9ed746f7f0
6 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/brand-assets/ImgPreview.vue
View File

@ -1,7 +1,7 @@
<template>
<a :href="src" target="_blank">
<div class="p-6 prevroot">
<img :src="src" class="mx-auto max-w-sm" />
<img :src="src" class="mx-auto w-full max-w-sm" />
</div>
</a>
</template>

6
components/docs/PrevNext.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex justify-between space-y-3 lg:space-y-0 items-center">
<div class="lg:w-2/5">
<div class="flex flex-col lg:flex-row justify-between items-center">
<div class="order-2 mt-4 lg:mt-0 lg:order-1 w-full lg:w-2/5">
<GNuxtLink v-if="prev && (ignoreDirBasedNav || prev._path.includes(currentDirectory))" :to="prev._path" class="rounded-lg transition-colors p-4 border dark:border-slate-800 hover:bg-slate-200 dark:hover:bg-slate-800 text-start flex justify-start items-center">
<div class="mr-3"><LeftIco /></div>
<div>
@ -9,7 +9,7 @@
</div>
</GNuxtLink>
</div>
<div class="lg:w-2/5">
<div class="order-1 lg:order-2 w-full lg:w-2/5">
<GNuxtLink v-if="next && (ignoreDirBasedNav || prev._path.includes(currentDirectory))" :to="next._path" class="rounded-lg transition-colors p-4 border dark:border-slate-800 hover:bg-slate-200 dark:hover:bg-slate-800 text-end flex justify-end items-center">
<div>
<div class="mb-1 text-sm">{{ $t('_docs._prevNext.next') }}</div>

11
components/g/LocalNav.vue
View File

@ -10,6 +10,7 @@
</template>
<script setup lang="ts">
import ArrowIco from 'bi/arrow-down.svg';
import { scrollTo } from '@/assets/js/scroll-to';
interface LocalNavItem {
name: string;
@ -21,16 +22,6 @@ const props = defineProps<{
items: LocalNavItem[]
}>();
function scrollTo(qs: string): void {
if (process.client) {
document.querySelector<HTMLElement>(`${qs} a, ${qs} button, ${qs} input, ${qs} textarea`)?.focus({
preventScroll: true,
});
document.querySelector(qs)?.scrollIntoView({
behavior: "smooth"
});
}
}
</script>
<style module>
.localNavRoot li a,

2
components/g/Nav.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="['bg-slate-100 dark:bg-gray-900 bg-opacity-80 backdrop-blur-lg sticky top-0 z-[9900] transition-[box-shadow]', { 'shadow': (!disableShadow && scrollPos <= -40) }]">
<nav :class="['container mx-auto max-w-screen-xl grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4', (slim ? 'h-16' : 'h-16 lg:h-20')]">
<nav :class="['container mx-auto max-w-screen-xl grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4', (slim ? 'h-16' : 'h-16 lg:h-20')]">
<div class="">
<GNuxtLink :to="localePath('/')" class="flex items-center space-x-2 hover:opacity-80">
<MiIcon class="h-8 w-8" />

1
components/index/hero/Bg.vue
View File

@ -30,6 +30,7 @@ import Blob2 from '@/assets/svg/top-bg-object2.svg';
}
.object1 > svg {
@apply invisible lg:visible;
animation: 60s linear 0s infinite normal none running spin;
}

20
components/index/hero/Left.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="relative space-y-6">
<MkLogo class="block mx-auto lg:ml-0 w-full max-w-[250px]" />
<h2 ref="tagline" class="text-center font-title lg:text-start font-bold tracking-wide text-3xl sm:text-5xl md:text-6xl leading-relaxed sm:leading-relaxed md:leading-relaxed" id="tagline">
<div class="relative space-y-3 lg:space-y-6">
<MkLogo class="block mx-auto lg:ml-0 w-full max-w-[120px] lg:max-w-[250px]" />
<h2 ref="tagline" class="text-center font-title lg:text-start font-bold tracking-wide text-3xl sm:text-5xl lg:text-6xl leading-relaxed sm:leading-relaxed lg:leading-relaxed" id="tagline">
<div class="row">Interplanetary</div>
<div class="row">microblogging</div>
<div class="row">platform.🚀</div>
@ -11,12 +11,18 @@
<GButton button-type="button" color="accent" @click="scrollTo('#getStarted')">{{ $t('_landing._hero.gettingStarted') }}</GButton>
<GButton button-type="button" @click="scrollTo('#learnMore')">{{ $t('learnMore') }}</GButton>
</div>
<div class="lg:hidden relative py-6">
<GDots class="dots w-40 h-40 top-0 left-6" />
<GDots class="dots w-40 h-40 bottom-0 right-6" />
<img class="relative mx-auto rounded-lg max-w-[240px]" src="/img/hero/screenshot-mobile.png" />
</div>
</div>
</template>
<script setup lang="ts">
import MkLogo from '@/assets/svg/misskey-logotype.svg';
import { scrollTo } from '@/assets/js/scroll-to';
import { vParallax } from 'assets/js/parallax';
const tagline = ref<HTMLElement>();
@ -34,9 +40,13 @@ onMounted(() => {
<style scoped>
.row {
@apply opacity-0 translate-x-24 transition duration-1000
@apply lg:opacity-0 lg:translate-x-24 transition duration-1000
}
.row.shown {
@apply opacity-100 translate-x-0;
@apply lg:opacity-100 lg:translate-x-0;
}
.dots {
@apply absolute pointer-events-none select-none text-accent-600;
}
</style>