mirror of
https://github.com/lingble/talos.git
synced 2025-11-27 19:33:37 +00:00
docs: remove header animation
This makes the header a fixed height without animation. Signed-off-by: Andrew Rynhard <andrew@andrewrynhard.com>
This commit is contained in:
@@ -48,7 +48,6 @@ nav[aria-label='main'] {
|
|||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
@apply sticky top-0;
|
@apply sticky top-0;
|
||||||
transition: height 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav[aria-label='main'] .tnd-Nav__item a {
|
nav[aria-label='main'] .tnd-Nav__item a {
|
||||||
@@ -56,17 +55,13 @@ nav[aria-label='main'] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header#header img#header-logo {
|
#header-logo {
|
||||||
transition: all 0.3s;
|
height: 70px;
|
||||||
}
|
|
||||||
|
|
||||||
header#header.scrolled img#header-logo {
|
|
||||||
width: 150px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@apply font-headings;
|
@apply font-headings;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
|
|||||||
@@ -21,7 +21,6 @@
|
|||||||
<style>
|
<style>
|
||||||
footer {
|
footer {
|
||||||
@apply bg-white flex flex-col items-center font-sans justify-between py-5;
|
@apply bg-white flex flex-col items-center font-sans justify-between py-5;
|
||||||
z-index: 99;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer a {
|
footer a {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<header id="header" class="flex">
|
<header id="header" class="flex">
|
||||||
<div class="flex items-center justify-start max-w-6xl mx-auto py-6">
|
<div class="flex items-center justify-start max-w-6xl mx-auto py-2">
|
||||||
<Logo></Logo>
|
<Logo></Logo>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-end max-w-6xl mx-auto py-6">
|
<div class="flex items-center justify-end max-w-6xl mx-auto py-6">
|
||||||
@@ -32,29 +32,6 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
Logo,
|
Logo,
|
||||||
CommunityDropdown
|
CommunityDropdown
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
window.addEventListener('scroll', this.handleScroll)
|
|
||||||
},
|
|
||||||
|
|
||||||
destroyed() {
|
|
||||||
window.removeEventListener('scroll', this.handleScroll)
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleScroll() {
|
|
||||||
const distanceY = window.pageYOffset || document.documentElement.scrollTop
|
|
||||||
const shrinkOn = 240
|
|
||||||
const shrinkOff = 140
|
|
||||||
const headerEl = document.getElementById('header')
|
|
||||||
|
|
||||||
if (distanceY > shrinkOn) {
|
|
||||||
headerEl.classList.add('scrolled')
|
|
||||||
} else if (distanceY < shrinkOff) {
|
|
||||||
headerEl.classList.remove('scrolled')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user