-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: Switch lp and app to layers (#346)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
- Loading branch information
1 parent
bd79e9b
commit ea2cead
Showing
49 changed files
with
471 additions
and
712 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| /* Transition effect */ | ||
|
|
||
| .fade-enter-active, | ||
| .fade-leave-active { | ||
| transition: opacity .1s; | ||
| } | ||
|
|
||
| .fade-enter, .fade-leave-to { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .slide-to-top-enter-active { | ||
| animation: slide-to-top-in 0.3s ease-in-out; | ||
| } | ||
|
|
||
| .slide-to-top-leave-active { | ||
| animation: slide-to-top-out 0.3s ease-in-out; | ||
| } | ||
|
|
||
| @keyframes slide-to-top-in { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateY(-10%); | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes slide-to-top-out { | ||
| 0% { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 0; | ||
| transform: translateY(-10%); | ||
| } | ||
| } | ||
|
|
||
| .slide-to-bottom-enter-active { | ||
| animation: slide-to-bottom-in 0.3s ease-in-out; | ||
| } | ||
|
|
||
| .slide-to-bottom-leave-active { | ||
| animation: slide-to-bottom-out 0.3s ease-in-out; | ||
| } | ||
|
|
||
| @keyframes slide-to-bottom-in { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateY(10%); | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes slide-to-bottom-out { | ||
| 0% { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 0; | ||
| transform: translateY(10%); | ||
| } | ||
| } | ||
|
|
||
| .slide-enter-active { | ||
| animation: slide-in 0.3s ease-in-out; | ||
| } | ||
|
|
||
| .slide-leave-active { | ||
| animation: slide-out 0.3s ease-in-out; | ||
| } | ||
|
|
||
| @keyframes slide-in { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateX(-10%); | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
| } | ||
|
|
||
| @keyframes slide-out { | ||
| 0% { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 0; | ||
| transform: translateX(-10%); | ||
| } | ||
| } | ||
|
|
||
| /* Main Noise effect */ | ||
|
|
||
| .noise { | ||
| animation: noise 1s steps(10) infinite; | ||
| } | ||
|
|
||
| @keyframes noise { | ||
| 0%, 20%, 40%, 60%, 80%, 100% { | ||
| transform: translate(0, 0); | ||
| } | ||
| 10% { | ||
| transform: translate(-5%, -10%); | ||
| } | ||
| 30% { | ||
| transform: translate(5%, 10%); | ||
| } | ||
| 50% { | ||
| transform: translate(-15%, 5%); | ||
| } | ||
| 70% { | ||
| transform: translate(10%, -5%); | ||
| } | ||
| 90% { | ||
| transform: translate(5%, -10%); | ||
| } | ||
| } | ||
|
|
||
| /* Appear effect */ | ||
|
|
||
| [data-animate] { | ||
| --stagger: 0; | ||
| --delay: 80ms; | ||
| --start: 0ms; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| [data-animate] { | ||
| animation: enter 0.6s both; | ||
| animation-delay: calc(var(--stagger) * var(--delay) + var(--start)); | ||
| } | ||
| } | ||
|
|
||
| @keyframes enter { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateY(10px); | ||
| } | ||
|
|
||
| to { | ||
| opacity: 1; | ||
| transform: none; | ||
| } | ||
| } | ||
|
|
||
| /* Blur effect */ | ||
| .blur-enter-active, | ||
| .blur-leave-active { | ||
| transition: opacity 0.5s ease, filter 0.5s ease; | ||
| } | ||
|
|
||
| .blur-enter-from, | ||
| .blur-leave-to { | ||
| opacity: 0; | ||
| filter: blur(10px); | ||
| } | ||
|
|
||
| .blur-enter-to, | ||
| .blur-leave-from { | ||
| opacity: 1; | ||
| filter: blur(0px); | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| .slide-enter-active, | ||
| .slide-leave-active, | ||
| .slide-to-top-enter-active, | ||
| .slide-to-top-leave-active, | ||
| .slide-to-bottom-enter-active, | ||
| .slide-to-bottom-leave-active { | ||
| animation: none !important; | ||
| } | ||
| } | ||
|
|
||
| [data-reduce-motion="reduce"] { | ||
| .slide-enter-active, | ||
| .slide-leave-active, | ||
| .slide-to-top-enter-active, | ||
| .slide-to-top-leave-active, | ||
| .slide-to-bottom-enter-active, | ||
| .slide-to-bottom-leave-active { | ||
| animation: none !important; | ||
| } | ||
|
|
||
| [data-animate] { | ||
| animation: none; | ||
| } | ||
| } |
15 changes: 10 additions & 5 deletions
15
apps/lp/app/assets/style/main.css → apps/base/assets/css/base.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <template> | ||
| <div class="fixed inset-x-0 top-0 isolate h-24"> | ||
| <div | ||
| style="-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)" | ||
| class="absolute inset-0 gradient-mask-b-0 blur-[1px]" | ||
| /> | ||
| <div | ||
| style="-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)" | ||
| class="absolute inset-0 gradient-mask-b-0 blur-[2px]" | ||
| /> | ||
| <div | ||
| style="-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)" | ||
| class="absolute inset-0 gradient-mask-b-0 blur-[3px]" | ||
| /> | ||
| <div | ||
| style="-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)" | ||
| class="absolute inset-0 gradient-mask-b-0 blur-[6px]" | ||
| /> | ||
| <div | ||
| style="-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)" | ||
| class="absolute inset-0 gradient-mask-b-0 blur-[12px]" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .gradient-mask-b-0 { | ||
| mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 100%); | ||
| } | ||
| </style> |
10 changes: 10 additions & 0 deletions
10
apps/shelve/app/components/CrossedDiv.vue → apps/base/components/CrossedDiv.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <script setup lang="ts"> | ||
| const { size = 'size-5', text = true } = defineProps<{ | ||
| size?: string | ||
| text?: boolean | ||
| }>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex items-center gap-2"> | ||
| <UIcon name="custom:shelve" :size /> | ||
| <NuxtLink v-if="text" to="/" aria-label="Shelve" class="font-semibold"> | ||
| Shelve | ||
| </NuxtLink> | ||
| </div> | ||
| </template> |
Oops, something went wrong.