mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +00:00
Karsa
5faceb5495
* fix(docs): improve mobile layout of v1 banner * fix(docs): make top banner sticky instead of fixed, this way there's no need for hack-ish explicit heights * fix(docs): add --vp-layout-top-height media query declaration for when navbar becomes sticky
70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
|
|
import Icon from '@lucide/vue/src/Icon';
|
|
import RocketDuotoneIcon from '../home/RocketDuotoneIcon.ts';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="top-notification">
|
|
<p>
|
|
<Icon
|
|
:iconNode="RocketDuotoneIcon"
|
|
size="18"
|
|
class="rocket-icon"
|
|
/>
|
|
<VPLink
|
|
class="notification-link"
|
|
href="/guide/version-1"
|
|
>Lucide v1 is out!</VPLink
|
|
>
|
|
You're looking at the site for v1, for v0 go to
|
|
<VPLink
|
|
class="notification-link"
|
|
href="https://v0.lucide.dev"
|
|
>v0 site</VPLink
|
|
>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
@media (min-width: 960px) {
|
|
:root {
|
|
--vp-layout-top-height: 32px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.top-notification {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: var(--vp-c-brand-dark);
|
|
color: var(--vp-c-bg-alt-down);
|
|
font-size: 14px;
|
|
padding: 4px 16px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.notification-link {
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.notification-link::after {
|
|
display: none !important;
|
|
}
|
|
|
|
.rocket-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|