|
| 1 | +/* some of these styles were borrowed from https://github.com/vendure-ecommerce/vendure/blob/cfc0dd7c34fd070a15455508f32d37e94589e656/docs/src/css/custom.css */ |
| 2 | + |
| 3 | +@import url( 'https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap'); |
| 4 | +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); |
| 5 | + |
1 | 6 | @tailwind base; |
2 | 7 | @tailwind components; |
3 | 8 | @tailwind utilities; |
4 | 9 |
|
5 | | -/** |
6 | | - * Any CSS included here will be global. The classic template |
7 | | - * bundles Infima by default. Infima is a CSS framework designed to |
8 | | - * work well for content-centric websites. |
9 | | - */ |
10 | | - |
11 | 10 | /* You can override the default Infima variables here. */ |
12 | 11 | :root { |
| 12 | + /* Colors - Enhanced Purple Theme */ |
13 | 13 | --ifm-color-primary: #a46ef8; |
14 | 14 | --ifm-color-primary-dark: #9a60f7; |
15 | 15 | --ifm-color-primary-darker: #7e33f6; |
16 | 16 | --ifm-color-primary-darkest: #5e0ce2; |
17 | | - --ifm-color-primary-light: #7e33f6; |
18 | | - --ifm-color-primary-lighter: #9a60f7; |
19 | | - --ifm-color-primary-lightest: #a46ef8; |
| 17 | + --ifm-color-primary-light: #b87cf9; |
| 18 | + --ifm-color-primary-lighter: #cc8afa; |
| 19 | + --ifm-color-primary-lightest: #e098fb; |
| 20 | + --ifm-navbar-background-color: rgba(255, 255, 255, 0.07); |
| 21 | + --navbar-background-color-mobile: rgba(255, 255, 255, 0.93); |
| 22 | + --ifm-heading-color: #000212; |
| 23 | + --ifm-color-content: var(--ifm-color-emphasis-800); |
20 | 24 | --ifm-code-font-size: 95%; |
21 | | - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); |
| 25 | + --docusaurus-highlighted-code-line-bg: rgba(164, 110, 248, 0.1); |
| 26 | + --color-members-border: var(--ifm-color-secondary); |
| 27 | + --body-background: linear-gradient(135deg, #ffffff 0%, #f8f5ff 100%); |
| 28 | + --ifm-footer-background-color: #f5f0ff; |
| 29 | + --color-docsearch-border: #b7b7c3; |
| 30 | + |
| 31 | + /* Enhanced menu icon with better contrast */ |
| 32 | + --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23a46ef8" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg>'); |
| 33 | + |
| 34 | + /* Fonts */ |
| 35 | + --ifm-font-family-base: |
| 36 | + 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, |
| 37 | + Ubuntu, Cantarell, sans-serif; |
| 38 | + --ifm-heading-font-family: 'Geist', var(--ifm-font-family-base); |
| 39 | + --ifm-heading-font-weight: 700; |
| 40 | + --ifm-font-family-monospace: |
| 41 | + 'JetBrains Mono', 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', |
| 42 | + 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; |
22 | 43 | } |
23 | 44 |
|
24 | 45 | /* For readability concerns, you should choose a lighter palette in dark mode. */ |
25 | | -[data-theme='dark'] { |
| 46 | +html[data-theme='dark'] { |
| 47 | + --ifm-background-color: #000212; |
| 48 | + --ifm-heading-color: #ffffff; |
| 49 | + --ifm-navbar-background-color: transparent; |
| 50 | + --navbar-background-color-mobile: transparent; |
| 51 | + --ifm-card-background-color: rgba(164, 110, 248, 0.05); |
| 52 | + --ifm-color-content: hsla(0, 0%, 100%, 0.7); |
| 53 | + |
| 54 | + /* Enhanced Purple Theme for Dark Mode */ |
26 | 55 | --ifm-color-primary: #a46ef8; |
27 | 56 | --ifm-color-primary-dark: #9a60f7; |
28 | 57 | --ifm-color-primary-darker: #7e33f6; |
29 | 58 | --ifm-color-primary-darkest: #5e0ce2; |
30 | | - --ifm-color-primary-light: #7e33f6; |
31 | | - --ifm-color-primary-lighter: #9a60f7; |
32 | | - --ifm-color-primary-lightest: #a46ef8; |
33 | | - --docusaurus-highlighted-code-line-bg: rgba(137, 137, 137, 0.3); |
| 59 | + --ifm-color-primary-light: #b87cf9; |
| 60 | + --ifm-color-primary-lighter: #cc8afa; |
| 61 | + --ifm-color-primary-lightest: #e098fb; |
| 62 | + |
| 63 | + --docusaurus-highlighted-code-line-bg: rgba(164, 110, 248, 0.2); |
| 64 | + --color-members-border: #333; |
| 65 | + --body-background: radial-gradient( |
| 66 | + ellipse 80% 50% at 50% -20%, |
| 67 | + rgba(164, 110, 248, 0.3), |
| 68 | + transparent |
| 69 | + ); |
| 70 | + --ifm-footer-background-color: var(--ifm-background-color); |
| 71 | + --color-docsearch-border: #4c2889; |
| 72 | + --ifm-footer-title-color: #ffffff; |
| 73 | +} |
| 74 | + |
| 75 | +html[data-theme='light'] { |
| 76 | + --ifm-background-color: #ffffff; |
| 77 | +} |
| 78 | + |
| 79 | +/* Enhanced Typography with Tailwind-inspired utilities */ |
| 80 | +h1, |
| 81 | +h2, |
| 82 | +h3, |
| 83 | +h4, |
| 84 | +h5, |
| 85 | +h6 { |
| 86 | + letter-spacing: -0.025em; /* Tailwind's tracking-tight */ |
| 87 | + @apply font-bold; |
| 88 | +} |
| 89 | + |
| 90 | +/* Responsive typography scaling */ |
| 91 | +h1 { |
| 92 | + @apply text-4xl md:text-5xl lg:text-6xl; |
| 93 | +} |
| 94 | + |
| 95 | +h2 { |
| 96 | + @apply text-3xl md:text-4xl lg:text-5xl; |
| 97 | +} |
| 98 | + |
| 99 | +h3 { |
| 100 | + @apply text-2xl md:text-3xl lg:text-4xl; |
| 101 | +} |
| 102 | + |
| 103 | +.markdown h2:not(:first-of-type) { |
| 104 | + --ifm-h2-vertical-rhythm-top: 5; |
| 105 | +} |
| 106 | + |
| 107 | +.markdown img { |
| 108 | + @apply rounded-lg shadow-md transition-transform duration-300 hover:scale-105; |
| 109 | +} |
| 110 | + |
| 111 | +/* Enhanced members wrapper with better visual hierarchy */ |
| 112 | +.members-wrapper { |
| 113 | + @apply border-l-4 border-purple-200 dark:border-purple-800 pl-8 ml-4; |
| 114 | + background: linear-gradient( |
| 115 | + 90deg, |
| 116 | + rgba(164, 110, 248, 0.05) 0%, |
| 117 | + transparent 100% |
| 118 | + ); |
| 119 | +} |
| 120 | + |
| 121 | +.members-wrapper > h3 { |
| 122 | + @apply mt-12 text-purple-700 dark:text-purple-300; |
| 123 | +} |
| 124 | + |
| 125 | +/* Enhanced sidebar styling with Tailwind utilities */ |
| 126 | +.sidebar-section-header { |
| 127 | + @apply uppercase font-bold text-xs opacity-80 text-gray-500 dark:text-gray-400; |
| 128 | + @apply px-3 py-2 tracking-wider; |
| 129 | +} |
| 130 | + |
| 131 | +.sidebar-section-divider { |
| 132 | + @apply border-b border-gray-200 dark:border-gray-700 opacity-50 mx-3 my-2; |
| 133 | +} |
| 134 | + |
| 135 | +/* Enhanced code block styling */ |
| 136 | +.limited-height-code-block pre.prism-code { |
| 137 | + @apply max-h-96 rounded-lg shadow-lg; |
| 138 | + background: linear-gradient( |
| 139 | + 135deg, |
| 140 | + rgba(164, 110, 248, 0.1) 0%, |
| 141 | + rgba(126, 51, 246, 0.05) 100% |
| 142 | + ); |
| 143 | +} |
| 144 | + |
| 145 | +/* Additional utility classes for enhanced UX */ |
| 146 | +.glass-effect { |
| 147 | + @apply backdrop-blur-sm bg-white/10 dark:bg-black/10; |
| 148 | +} |
| 149 | + |
| 150 | +.gradient-text { |
| 151 | + @apply bg-gradient-to-r from-purple-600 to-purple-400 bg-clip-text text-transparent; |
| 152 | +} |
| 153 | + |
| 154 | +/* Enhanced button and interactive elements */ |
| 155 | +.btn-primary { |
| 156 | + @apply bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600; |
| 157 | + @apply text-white font-semibold px-6 py-3 rounded-lg shadow-lg; |
| 158 | + @apply transition-all duration-300 transform hover:scale-105 hover:shadow-xl; |
| 159 | +} |
| 160 | + |
| 161 | +/* Enhanced card styling */ |
| 162 | +.card-enhanced { |
| 163 | + @apply bg-gradient-to-br from-white to-purple-50 dark:from-gray-900 dark:to-purple-900/20; |
| 164 | + @apply border border-purple-200/50 dark:border-purple-800/50; |
| 165 | + @apply rounded-xl shadow-lg hover:shadow-xl transition-all duration-300; |
| 166 | +} |
| 167 | + |
| 168 | +/* Terminal/console styling */ |
| 169 | +.terminal-output { |
| 170 | + @apply bg-gray-900 text-green-400 p-4 rounded-lg; |
| 171 | + font-family: var(--ifm-font-family-monospace); |
| 172 | + font-optical-sizing: auto; |
| 173 | + font-weight: 400; |
| 174 | +} |
| 175 | + |
| 176 | +/* Custom animations for homepage */ |
| 177 | +@keyframes spin-slow { |
| 178 | + from { |
| 179 | + transform: rotate(0deg); |
| 180 | + } |
| 181 | + to { |
| 182 | + transform: rotate(360deg); |
| 183 | + } |
| 184 | +} |
| 185 | + |
| 186 | +.animate-spin-slow { |
| 187 | + animation: spin-slow 8s linear infinite; |
| 188 | +} |
| 189 | + |
| 190 | +/* Floating animation for particles */ |
| 191 | +@keyframes float { |
| 192 | + 0%, |
| 193 | + 100% { |
| 194 | + transform: translateY(0px); |
| 195 | + } |
| 196 | + 50% { |
| 197 | + transform: translateY(-20px); |
| 198 | + } |
| 199 | +} |
| 200 | + |
| 201 | +.animate-float { |
| 202 | + animation: float 6s ease-in-out infinite; |
| 203 | +} |
| 204 | + |
| 205 | +.animate-float-delayed { |
| 206 | + animation: float 6s ease-in-out infinite; |
| 207 | + animation-delay: 2s; |
| 208 | +} |
| 209 | + |
| 210 | +/* Pulse glow effect */ |
| 211 | +@keyframes pulse-glow { |
| 212 | + 0%, |
| 213 | + 100% { |
| 214 | + box-shadow: 0 0 20px rgba(164, 110, 248, 0.3); |
| 215 | + } |
| 216 | + 50% { |
| 217 | + box-shadow: 0 0 30px rgba(164, 110, 248, 0.6); |
| 218 | + } |
| 219 | +} |
| 220 | + |
| 221 | +.animate-pulse-glow { |
| 222 | + animation: pulse-glow 3s ease-in-out infinite; |
34 | 223 | } |
0 commit comments