|
17 | 17 | <link rel="stylesheet" href="https://assets.21no.de/css/buttons.css" /> |
18 | 18 | <link rel="stylesheet" href="https://assets.21no.de/css/cards.css" /> |
19 | 19 | <link rel="stylesheet" href="https://assets.21no.de/css/footer.css" /> |
| 20 | + <style> |
| 21 | + /* === go-mcp specific styles === */ |
20 | 22 |
|
| 23 | + /* Nav: go badge */ |
| 24 | + .gopher { |
| 25 | + display: inline-flex; align-items: center; justify-content: center; |
| 26 | + width: 28px; height: 28px; border-radius: var(--radius-sm); |
| 27 | + background: var(--accent-subtle); color: var(--accent); |
| 28 | + font-family: var(--font-mono); font-size: 13px; font-weight: 700; |
| 29 | + } |
| 30 | + |
| 31 | + /* Stats bar */ |
| 32 | + .stats { display: flex; gap: 32px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } |
| 33 | + .stat { text-align: center; } |
| 34 | + .stat .num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--text-primary); } |
| 35 | + .stat .label { font-size: 13px; color: var(--text-tertiary); margin-top: 4px; } |
| 36 | + |
| 37 | + /* Grid */ |
| 38 | + .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } |
| 39 | + @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } } |
| 40 | + |
| 41 | + /* Card icon blue = accent */ |
| 42 | + .card-icon.blue { background: var(--accent-subtle); color: var(--accent); } |
| 43 | + |
| 44 | + /* Use case sections */ |
| 45 | + .usecase { |
| 46 | + display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; |
| 47 | + margin-top: 48px; |
| 48 | + } |
| 49 | + .usecase:first-child { margin-top: 0; } |
| 50 | + @media (max-width: 768px) { .usecase { grid-template-columns: 1fr; gap: 24px; } } |
| 51 | + .code-mini { |
| 52 | + background: var(--bg-code); border: 1px solid var(--border-card); |
| 53 | + border-radius: var(--radius-lg); overflow: auto; padding: 20px; |
| 54 | + font-size: 13px; line-height: 1.6; |
| 55 | + } |
| 56 | + .code-mini pre { font-family: var(--font-mono); } |
| 57 | + |
| 58 | + /* Protocol table */ |
| 59 | + .protocol-table { width: 100%; border-collapse: collapse; font-size: 14px; } |
| 60 | + .protocol-table th { |
| 61 | + text-align: left; padding: 12px 16px; |
| 62 | + font-family: var(--font-mono); font-size: 11px; font-weight: 500; |
| 63 | + color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; |
| 64 | + border-bottom: 1px solid var(--border-subtle); |
| 65 | + } |
| 66 | + .protocol-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); } |
| 67 | + .protocol-table tr:last-child td { border-bottom: none; } |
| 68 | + .protocol-table .method { font-family: var(--font-mono); color: var(--text-primary); font-size: 13px; } |
| 69 | + .protocol-table .check { color: var(--green); font-weight: 600; } |
| 70 | + |
| 71 | + /* Install box */ |
| 72 | + .install-box { |
| 73 | + display: inline-flex; align-items: center; gap: 12px; |
| 74 | + background: var(--bg-card); border: 1px solid var(--border-card); |
| 75 | + border-radius: var(--radius-lg); padding: 16px 24px; |
| 76 | + font-size: 15px; font-family: var(--font-mono); |
| 77 | + } |
| 78 | + .install-box .prompt { color: var(--green); font-weight: 600; } |
| 79 | + .install-box code { color: var(--text-primary); } |
| 80 | + |
| 81 | + /* Syntax highlighting */ |
| 82 | + .kw { color: #c084fc; } /* purple */ |
| 83 | + .fn { color: #38bdf8; } /* accent */ |
| 84 | + .str { color: #3dd68c; } /* green */ |
| 85 | + .type { color: #f472b6; } /* pink */ |
| 86 | + .pkg { color: #9b9ba3; } /* secondary */ |
| 87 | + .cmt { color: #6b6b75; font-style: italic; } |
| 88 | + |
| 89 | + /* Code blocks */ |
| 90 | + .code-block pre { |
| 91 | + padding: 20px; overflow-x: auto; font-size: 13px; line-height: 1.7; |
| 92 | + color: var(--text-primary); |
| 93 | + } |
| 94 | + </style> |
21 | 95 | </head> |
22 | 96 | <body> |
23 | 97 |
|
|
0 commit comments