this repo has no description
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: unify API docs CSS with main site

Include screen.css on the docs page and remove ~90 lines
of duplicated theme variables, body, and footer styles.
Add font-loading detection for Material Symbols icons.

+15 -92
+15 -92
internal/templates/views/docs.html
··· 5 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 6 <title>Tumble API Docs</title> 7 7 <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui.css" /> 8 + <link rel="stylesheet" href="/css/screen.css" media="screen" /> 8 9 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> 9 10 <script> 10 11 (function () { ··· 13 14 if (savedTheme === "dark" || (!savedTheme && prefersDark)) { 14 15 document.documentElement.setAttribute("data-theme", "dark"); 15 16 } 17 + 18 + // Font loading detection 19 + if (document.fonts && document.fonts.ready) { 20 + document.fonts.ready.then(function() { 21 + document.documentElement.classList.add("fonts-loaded"); 22 + }); 23 + } else { 24 + // Fallback: show icons after short delay 25 + setTimeout(function() { 26 + document.documentElement.classList.add("fonts-loaded"); 27 + }, 100); 28 + } 16 29 })(); 17 30 </script> 18 31 <style> 19 - :root { 20 - --bg-color: #ffffff; 21 - --text-color: #333333; 22 - 23 - /* Gray scale for header */ 24 - --gray-0: #ffffff; 25 - --gray-1: #f6f8fa; 26 - --gray-2: #eaeef2; 27 - --gray-3: #d0d7de; 28 - --gray-4: #8c959f; 29 - --gray-5: #57606a; 30 - --gray-6: #24292f; 31 - 32 - /* Header variables */ 33 - --bg-canvas: var(--gray-0); 34 - --bg-surface: var(--gray-1); 35 - --border-default: var(--gray-3); 36 - --text-primary: var(--gray-6); 37 - --accent-primary: #10b981; 38 - --card-bg: var(--gray-0); 39 - 40 - /* Footer Variables */ 41 - --footer-bg: #f5f5f5; 42 - --footer-border: #eee; 43 - --footer-text: #666; 44 - --footer-link: #444; 45 - --icon-fill: #000000; 46 - } 47 - [data-theme="dark"] { 48 - --bg-color: #0d1117; 49 - --text-color: #c9d1d9; 50 - 51 - /* Gray scale for header */ 52 - --gray-0: #0d1117; 53 - --gray-1: #161b22; 54 - --gray-2: #21262d; 55 - --gray-3: #30363d; 56 - --gray-4: #484f58; 57 - --gray-5: #8b949e; 58 - --gray-6: #c9d1d9; 59 - 60 - /* Header variables */ 61 - --bg-canvas: var(--gray-0); 62 - --bg-surface: var(--gray-1); 63 - --border-default: var(--gray-3); 64 - --text-primary: var(--gray-6); 65 - --accent-primary: #34d399; 66 - --card-bg: var(--gray-1); 67 - 68 - /* Footer Variables */ 69 - --footer-bg: #1a1a1a; 70 - --footer-border: #333; 71 - --footer-text: #888; 72 - --footer-link: #aaa; 73 - --icon-fill: #ffffff; 74 - } 75 - body { margin: 0; padding: 0 0 60px 0; display: flex; flex-direction: column; min-height: 100vh; font-family: sans-serif; background-color: var(--bg-color); color: var(--text-color); } 76 - #swagger-ui { flex: 1; } 77 - 78 - /* Footer Styles */ 79 - 80 - /* Footer Styles */ 81 - #footer { 82 - padding: 10px; 83 - text-align: center; 84 - background: var(--footer-bg); 85 - border-top: 1px solid var(--footer-border); 86 - font-size: 12px; 87 - color: var(--footer-text); 88 - font-family: sans-serif; 89 - position: fixed; 90 - bottom: 0; 91 - left: 0; 92 - width: 100%; 93 - z-index: 100; 94 - } 95 - #footer a { 96 - color: var(--footer-link); 97 - text-decoration: none; 98 - } 99 - #footer a:hover { 100 - text-decoration: underline; 101 - } 102 - #footer svg { 103 - fill: var(--icon-fill); 104 - } 105 - 106 - 107 - 108 - 109 - /* Dark Mode for Swagger UI */ 32 + #swagger-ui { flex: 1; padding-bottom: 60px; } 110 33 [data-theme="dark"] #swagger-ui { 111 - filter: invert(88%) hue-rotate(180deg); 34 + filter: invert(88%) hue-rotate(180deg); 112 35 } 113 36 </style> 114 37 </head>