Refactor code structure for improved readability and maintainability
This commit is contained in:
Marco Mooren
@@ -16,48 +16,93 @@
|
|||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
* {
|
||||||
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg); }
|
box-sizing: border-box;
|
||||||
a { color: var(--accent-2); text-decoration: none; }
|
}
|
||||||
a:hover { text-decoration: underline; }
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--bg-0);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accent-2);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.docs-header {
|
.docs-header {
|
||||||
position: sticky; top: 0; z-index: 10;
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
background: rgba(7, 8, 11, 0.92);
|
background: rgba(7, 8, 11, 0.92);
|
||||||
border-bottom: 1px solid var(--line);
|
border-bottom: 1px solid var(--line);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-header-inner {
|
.docs-header-inner {
|
||||||
max-width: 980px; margin: 0 auto;
|
max-width: 980px;
|
||||||
|
margin: 0 auto;
|
||||||
padding: 14px 20px;
|
padding: 14px 20px;
|
||||||
display: flex; align-items: center; gap: 16px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-header h1 {
|
.docs-header h1 {
|
||||||
margin: 0; font-size: 18px; letter-spacing: -0.01em;
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-header .back {
|
.docs-header .back {
|
||||||
color: var(--muted); font-size: 13px;
|
color: var(--muted);
|
||||||
padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
|
font-size: 13px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
.docs-header .back:hover { color: var(--fg); background: var(--bg-2); text-decoration: none; }
|
|
||||||
|
.docs-header .back:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
background: var(--bg-2);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.docs-header .base {
|
.docs-header .base {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
font-size: 12px; color: var(--muted);
|
font-size: 12px;
|
||||||
padding: 4px 10px; background: var(--bg-2);
|
color: var(--muted);
|
||||||
border: 1px solid var(--line); border-radius: 8px;
|
padding: 4px 10px;
|
||||||
|
background: var(--bg-2);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
max-width: 980px; margin: 0 auto;
|
max-width: 980px;
|
||||||
|
margin: 0 auto;
|
||||||
padding: 24px 20px 80px;
|
padding: 24px 20px 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2.group {
|
h2.group {
|
||||||
margin: 32px 0 12px;
|
margin: 32px 0 12px;
|
||||||
font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
|
font-size: 13px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
h2.group:first-child { margin-top: 0; }
|
|
||||||
|
h2.group:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.ep {
|
.ep {
|
||||||
background: var(--bg-1);
|
background: var(--bg-1);
|
||||||
@@ -66,106 +111,197 @@ h2.group:first-child { margin-top: 0; }
|
|||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ep-head {
|
.ep-head {
|
||||||
display: flex; align-items: center; gap: 10px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ep-path {
|
.ep-path {
|
||||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
font-size: 13px; color: var(--fg);
|
font-size: 13px;
|
||||||
|
color: var(--fg);
|
||||||
background: var(--bg-2);
|
background: var(--bg-2);
|
||||||
padding: 4px 10px; border-radius: 6px;
|
padding: 4px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ep-sum {
|
.ep-sum {
|
||||||
margin: 10px 0 0; color: var(--muted);
|
margin: 10px 0 0;
|
||||||
font-size: 14px; line-height: 1.5;
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m {
|
.m {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
|
font-size: 11px;
|
||||||
padding: 4px 8px; border-radius: 6px;
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
color: #07080b;
|
color: #07080b;
|
||||||
}
|
}
|
||||||
.m-get { background: var(--good); }
|
|
||||||
.m-post { background: var(--accent); }
|
.m-get {
|
||||||
.m-put { background: #d9b14a; }
|
background: var(--good);
|
||||||
.m-delete { background: var(--bad); color: #fff; }
|
}
|
||||||
.m-info { background: var(--info); }
|
|
||||||
|
.m-post {
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-put {
|
||||||
|
background: #d9b14a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-delete {
|
||||||
|
background: var(--bad);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-info {
|
||||||
|
background: var(--info);
|
||||||
|
}
|
||||||
|
|
||||||
.params {
|
.params {
|
||||||
width: 100%; border-collapse: collapse;
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.params th {
|
.params th {
|
||||||
text-align: left; font-weight: 600; color: var(--muted);
|
text-align: left;
|
||||||
text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em;
|
font-weight: 600;
|
||||||
padding: 8px 10px; border-bottom: 1px solid var(--line);
|
color: var(--muted);
|
||||||
}
|
text-transform: uppercase;
|
||||||
.params td {
|
font-size: 11px;
|
||||||
padding: 8px 10px; border-bottom: 1px solid var(--line);
|
letter-spacing: 0.06em;
|
||||||
color: var(--fg);
|
padding: 8px 10px;
|
||||||
}
|
border-bottom: 1px solid var(--line);
|
||||||
.params td:first-child { width: 160px; }
|
}
|
||||||
.params code {
|
|
||||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
.params td {
|
||||||
font-size: 12px; color: var(--accent-2);
|
padding: 8px 10px;
|
||||||
background: var(--bg-2);
|
border-bottom: 1px solid var(--line);
|
||||||
padding: 2px 6px; border-radius: 4px;
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.params td:first-child {
|
||||||
|
width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.params code {
|
||||||
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--accent-2);
|
||||||
|
background: var(--bg-2);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.examples {
|
||||||
|
margin-top: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.examples { margin-top: 14px; }
|
|
||||||
.examples-h {
|
.examples-h {
|
||||||
font-size: 11px; color: var(--muted);
|
font-size: 11px;
|
||||||
text-transform: uppercase; letter-spacing: 0.06em;
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.examples pre {
|
.examples pre {
|
||||||
margin: 0 0 8px; padding: 10px 12px;
|
margin: 0 0 8px;
|
||||||
background: var(--bg-0); border: 1px solid var(--line);
|
padding: 10px 12px;
|
||||||
|
background: var(--bg-0);
|
||||||
|
border: 1px solid var(--line);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
font-size: 12.5px; color: var(--accent-2);
|
font-size: 12.5px;
|
||||||
|
color: var(--accent-2);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.try { margin-top: 14px; }
|
.try {
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.try-row {
|
.try-row {
|
||||||
display: flex; gap: 8px; align-items: center;
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.try-q {
|
.try-q {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: var(--bg-2); color: var(--fg);
|
background: var(--bg-2);
|
||||||
border: 1px solid var(--line); border-radius: 8px;
|
color: var(--fg);
|
||||||
padding: 8px 12px; font-size: 13px;
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 13px;
|
||||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.try-q:focus { border-color: var(--accent); }
|
|
||||||
|
.try-q:focus {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
.try-btn {
|
.try-btn {
|
||||||
background: var(--accent); color: #1a0a00;
|
background: var(--accent);
|
||||||
border: 0; border-radius: 8px;
|
color: #1a0a00;
|
||||||
padding: 8px 16px; font-size: 13px; font-weight: 700;
|
border: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
.try-btn:hover { background: #ff8a55; }
|
|
||||||
.try-btn:disabled { opacity: 0.6; cursor: default; }
|
.try-btn:hover {
|
||||||
.try-open {
|
background: #ff8a55;
|
||||||
color: var(--muted); font-size: 12px;
|
|
||||||
padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
|
|
||||||
}
|
}
|
||||||
.try-open:hover { color: var(--fg); background: var(--bg-2); text-decoration: none; }
|
|
||||||
|
.try-btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.try-open {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.try-open:hover {
|
||||||
|
color: var(--fg);
|
||||||
|
background: var(--bg-2);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.try-out {
|
.try-out {
|
||||||
margin: 0; padding: 12px;
|
margin: 0;
|
||||||
background: var(--bg-0); border: 1px solid var(--line);
|
padding: 12px;
|
||||||
|
background: var(--bg-0);
|
||||||
|
border: 1px solid var(--line);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
font-size: 12px; color: var(--fg);
|
font-size: 12px;
|
||||||
max-height: 320px; overflow: auto;
|
color: var(--fg);
|
||||||
white-space: pre-wrap; word-break: break-word;
|
max-height: 320px;
|
||||||
|
overflow: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
1230
web/style.css
1230
web/style.css
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user