|
45 | 45 | } |
46 | 46 | .container { max-width: 900px; margin: 0 auto; padding: 0 24px; } |
47 | 47 |
|
| 48 | + /* Header */ |
| 49 | + .site-header { |
| 50 | + position: fixed; top: 0; left: 0; right: 0; z-index: 100; |
| 51 | + padding: 16px 24px; |
| 52 | + background: rgba(3, 0, 20, 0.8); |
| 53 | + backdrop-filter: blur(10px); |
| 54 | + border-bottom: 1px solid rgba(255,255,255,0.05); |
| 55 | + } |
| 56 | + .site-header .container { |
| 57 | + display: flex; justify-content: space-between; align-items: center; |
| 58 | + } |
| 59 | + .site-header a { text-decoration: none; color: inherit; } |
| 60 | + .site-header .brand { |
| 61 | + font-weight: 600; font-size: 1rem; color: rgba(255,255,255,0.9); |
| 62 | + transition: color 0.2s; |
| 63 | + } |
| 64 | + .site-header .brand:hover { color: var(--accent-1); } |
| 65 | + .site-header .github-link { |
| 66 | + color: rgba(255,255,255,0.6); transition: color 0.2s; |
| 67 | + } |
| 68 | + .site-header .github-link:hover { color: white; } |
| 69 | + |
48 | 70 | .hero { |
49 | 71 | min-height: 70vh; display: flex; flex-direction: column; justify-content: center; |
50 | | - padding: 100px 0 60px; text-align: center; |
| 72 | + padding: 120px 0 60px; text-align: center; |
51 | 73 | } |
52 | 74 | .logo { font-size: 4rem; margin-bottom: 16px; } |
53 | 75 | .hero h1 { |
|
143 | 165 | <body> |
144 | 166 | <div class="bg-gradient"></div> |
145 | 167 |
|
| 168 | + <header class="site-header"> |
| 169 | + <div class="container"> |
| 170 | + <a href="https://kylecain.me" class="brand">Kyle Cain</a> |
| 171 | + <a href="https://github.com/cainky" target="_blank" rel="noopener" class="github-link"> |
| 172 | + <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> |
| 173 | + </a> |
| 174 | + </div> |
| 175 | + </header> |
| 176 | + |
146 | 177 | <section class="hero"> |
147 | 178 | <div class="container"> |
148 | 179 | <div class="logo">🎵</div> |
|
0 commit comments