This commit is contained in:
parent
c65ba993f9
commit
250174211e
8
app.vue
8
app.vue
@ -58,7 +58,7 @@ const cards = ref([
|
|||||||
const cardsELS = ref([])
|
const cardsELS = ref([])
|
||||||
const logoEl = ref()
|
const logoEl = ref()
|
||||||
|
|
||||||
const DURATION = 0.5
|
const DURATION = 0.3
|
||||||
const OVERLAP = 0.15
|
const OVERLAP = 0.15
|
||||||
const CARD_OPTIONS = {
|
const CARD_OPTIONS = {
|
||||||
duration: DURATION,
|
duration: DURATION,
|
||||||
@ -66,6 +66,7 @@ const CARD_OPTIONS = {
|
|||||||
scale: 1.025,
|
scale: 1.025,
|
||||||
yoyo: true,
|
yoyo: true,
|
||||||
repeat: 1,
|
repeat: 1,
|
||||||
|
opacity: 1,
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -87,7 +88,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
t.fromTo(
|
t.fromTo(
|
||||||
logoEl.value,
|
logoEl.value,
|
||||||
{ opacity: 0, y: 100 },
|
{ opacity: 0, y: 50 },
|
||||||
{ opacity: 1, y: 0, ease: 'power1.out', duration: DURATION },
|
{ opacity: 1, y: 0, ease: 'power1.out', duration: DURATION },
|
||||||
`<`,
|
`<`,
|
||||||
)
|
)
|
||||||
@ -113,12 +114,13 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
|
width: 800px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
|
width: 100%;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -35,7 +35,9 @@ body {
|
|||||||
|
|
||||||
#__nuxt {
|
#__nuxt {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
height: 100%;
|
||||||
margin-inline: auto;
|
display: flex;
|
||||||
overflow-y: auto;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user