Skip to content

Commit be86678

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 be86678

1 file changed

Lines changed: 45 additions & 11 deletions

File tree

  • lib/rdoc/generator/template/aliki/css

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

Lines changed: 45 additions & 11 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; /* between neutral-900 and neutral-800 */
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,33 @@ 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 {
1300-
position: relative;
1307+
display: flex;
1308+
flex-direction: column;
1309+
align-items: flex-start;
13011310
font-family: var(--font-code);
13021311
font-size: var(--font-size-lg);
13031312
font-weight: var(--font-weight-semibold);
1304-
margin-bottom: var(--space-3);
1313+
line-height: var(--line-height-normal);
1314+
}
1315+
1316+
main .method-heading a {
1317+
color: inherit;
1318+
text-decoration: none;
1319+
}
1320+
1321+
main .method-heading a:hover {
1322+
color: var(--color-accent-primary);
1323+
}
1324+
1325+
main .method-heading .method-callseq {
1326+
display: block;
13051327
}
13061328

13071329
main .method-heading .method-name {
@@ -1313,7 +1335,9 @@ main .method-heading .method-args {
13131335
}
13141336

13151337
main .method-controls {
1316-
float: right;
1338+
position: absolute;
1339+
top: var(--space-3);
1340+
right: var(--space-3);
13171341
}
13181342

13191343
main .method-controls summary {
@@ -1356,14 +1380,16 @@ main .method-controls summary:active {
13561380
border-color: var(--color-primary-500);
13571381
}
13581382

1359-
main .method-description,
1360-
main .aliases {
1361-
margin-top: 0.75em;
1383+
main .method-description {
1384+
margin-top: var(--space-5);
1385+
padding-left: var(--space-2);
13621386
color: var(--color-text-primary);
1387+
line-height: var(--line-height-relaxed);
13631388
}
13641389

13651390
main .aliases {
1366-
padding-top: 4px;
1391+
margin-top: var(--space-4);
1392+
padding-top: var(--space-1);
13671393
font-style: italic;
13681394
cursor: default;
13691395
}
@@ -1410,9 +1436,17 @@ main .attribute-access-type {
14101436
white-space: nowrap;
14111437
}
14121438

1439+
main .method-heading {
1440+
font-size: var(--font-size-base);
1441+
}
1442+
1443+
main .method-header {
1444+
padding: var(--space-2);
1445+
}
1446+
14131447
main .method-controls {
1414-
margin-top: 10px;
1415-
float: none;
1448+
position: static;
1449+
margin-top: var(--space-2);
14161450
}
14171451
}
14181452

0 commit comments

Comments
 (0)