| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- // Стили для компонента Page
- .page-container
- min-height: 60vh
- .page-hero
- position: relative
-
- &::after
- content: ''
- position: absolute
- bottom: 0
- left: 0
- right: 0
- height: 100px
- background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5))
- pointer-events: none
- // Стили для markdown контента
- .page-content
- // Кастомные классы через markdown теги
- .content-section
- margin: 2rem 0
- padding: 1.5rem
- border-radius: 8px
-
- &.bg-gray-50
- background-color: #f9fafb
-
- &.bg-blue-50
- background-color: #eff6ff
-
- &.shadow-md
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
-
- // Стили для кастомных компонентов в контенте
- .custom-component
- margin: 2rem 0
- border: 1px solid #e5e7eb
- border-radius: 8px
- overflow: hidden
-
- &.interactive
- transition: all 0.3s ease
-
- &:hover
- transform: translateY(-2px)
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1)
- // Адаптивные стили
- @media (max-width: 768px)
- .page-hero
- h1
- font-size: 2.5rem !important
-
- p
- font-size: 1.1rem !important
- // Анимации
- .fade-enter-active,
- .fade-leave-active
- transition: opacity 0.3s ease
- .fade-enter-from,
- .fade-leave-to
- opacity: 0
- // Темная тема
- @media (prefers-color-scheme: dark)
- .dark
- .page-content
- article
- @apply prose-invert
-
- .content-section
- &.bg-gray-50
- background-color: #374151
-
- &.bg-blue-50
- background-color: #1e3a8a
|
