Skip to content

Commit 251f5db

Browse files
committed
Style method entries as signature cards in aliki theme
Add a subtle background card to method headers to visually separate the API signature zone from the documentation prose. - New `--color-sig-bg` token (lighter than `--color-code-bg`) - `.method-header` gets background, hairline border, padding - `.method-controls` absolutely positioned on `.method-detail` - `.method-heading a` removes inherited underline - `.method-description pre` uses left accent border (no outline) - `.method-description` gets `line-height: 1.7` for readability
1 parent 345c840 commit 251f5db

File tree

1 file changed

+42
-10
lines changed
  • lib/rdoc/generator/template/aliki/css

1 file changed

+42
-10
lines changed

lib/rdoc/generator/template/aliki/css/rdoc.css

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@
7070
--color-accent-subtle: var(--color-primary-50);
7171
--color-code-bg: #f6f8fa;
7272
--color-code-border: var(--color-neutral-300);
73+
--color-sig-bg: var(--color-neutral-100);
74+
--color-sig-border: var(--color-primary-200);
7375
--color-nav-bg: #fff;
7476
--color-nav-text: var(--color-neutral-700);
7577
--color-th-background: var(--color-neutral-100);
@@ -203,6 +205,8 @@
203205
--color-accent-subtle-hover: rgb(235 84 79 / 20%);
204206
--color-code-bg: var(--color-neutral-800);
205207
--color-code-border: var(--color-neutral-700);
208+
--color-sig-bg: #211f1e;
209+
--color-sig-border: var(--color-accent-primary);
206210
--color-nav-bg: var(--color-neutral-900);
207211
--color-nav-text: var(--color-neutral-50);
208212
--color-th-background: var(--color-background-tertiary);
@@ -1282,6 +1286,7 @@ main .method-description .method-calls-super {
12821286
}
12831287

12841288
main .method-detail {
1289+
position: relative;
12851290
margin-bottom: 2.5em;
12861291
}
12871292

@@ -1292,16 +1297,31 @@ main .method-detail:target {
12921297
}
12931298

12941299
main .method-header {
1295-
display: inline-block;
1296-
max-width: calc(100% - 6em); /* 6em is the width of the source code toggle */
1300+
background: var(--color-sig-bg);
1301+
border-left: 3px solid var(--color-sig-border);
1302+
border-radius: var(--radius-md);
1303+
padding: var(--space-3);
12971304
}
12981305

12991306
main .method-heading {
13001307
position: relative;
13011308
font-family: var(--font-code);
13021309
font-size: var(--font-size-lg);
13031310
font-weight: var(--font-weight-semibold);
1304-
margin-bottom: var(--space-3);
1311+
line-height: var(--line-height-normal);
1312+
}
1313+
1314+
main .method-heading a {
1315+
color: inherit;
1316+
text-decoration: none;
1317+
}
1318+
1319+
main .method-heading a:hover {
1320+
color: var(--color-accent-primary);
1321+
}
1322+
1323+
main .method-heading .method-callseq {
1324+
display: block;
13051325
}
13061326

13071327
main .method-heading .method-name {
@@ -1313,7 +1333,9 @@ main .method-heading .method-args {
13131333
}
13141334

13151335
main .method-controls {
1316-
float: right;
1336+
position: absolute;
1337+
top: var(--space-3);
1338+
right: var(--space-3);
13171339
}
13181340

13191341
main .method-controls summary {
@@ -1356,14 +1378,16 @@ main .method-controls summary:active {
13561378
border-color: var(--color-primary-500);
13571379
}
13581380

1359-
main .method-description,
1360-
main .aliases {
1361-
margin-top: 0.75em;
1381+
main .method-description {
1382+
margin-top: var(--space-5);
1383+
padding-left: var(--space-2);
13621384
color: var(--color-text-primary);
1385+
line-height: 1.7;
13631386
}
13641387

13651388
main .aliases {
1366-
padding-top: 4px;
1389+
margin-top: var(--space-4);
1390+
padding-top: var(--space-1);
13671391
font-style: italic;
13681392
cursor: default;
13691393
}
@@ -1410,9 +1434,17 @@ main .attribute-access-type {
14101434
white-space: nowrap;
14111435
}
14121436

1437+
main .method-heading {
1438+
font-size: var(--font-size-base);
1439+
}
1440+
1441+
main .method-header {
1442+
padding: var(--space-2);
1443+
}
1444+
14131445
main .method-controls {
1414-
margin-top: 10px;
1415-
float: none;
1446+
position: static;
1447+
margin-top: var(--space-2);
14161448
}
14171449
}
14181450

0 commit comments

Comments
 (0)