Skip to content

Commit 65dfedd

Browse files
julioestjulioest
authored
Standard font size across elements
1 parent d10d7f2 commit 65dfedd

File tree

10 files changed

+77
-55
lines changed

10 files changed

+77
-55
lines changed

‎antora-ui/.stylelintrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"rules": {
44
"comment-empty-line-before": null,
55
"no-descending-specificity": null,
6+
"value-keyword-case": ["lower", {
7+
"ignoreKeywords": ["/^BlinkMacSystemFont$/", "/^Roboto$/", "/^Oxygen-Sans$/", "/^Ubuntu$/", "/^Cantarell$/", "/^Helvetica Neue$/", "/^Consolas$/", "/^Menlo$/", "/^Courier$/"]
8+
}]
69
}
710
}

‎antora-ui/src/css/base.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ body {
2222
color: var(--body-font-color);
2323
font-family: var(--body-font-family);
2424
line-height: var(--body-line-height);
25+
font-size: inherit;
2526
margin: 0;
2627
tab-size: 4;
2728
word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */

‎antora-ui/src/css/doc.css

Lines changed: 48 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.doc {
22
color: var(--doc-font-color);
3-
font-size: var(--doc-font-size);
3+
font-family: var(--doc-font-family);
44
hyphens: auto;
55
line-height: var(--doc-line-height);
66
margin: var(--doc-margin);
@@ -25,15 +25,15 @@
2525
.doc h5,
2626
.doc h6 {
2727
color: var(--heading-font-color);
28-
font-weight: var(--heading-font-weight);
28+
font-weight: var(--alt-heading-font-weight);
2929
hyphens: none;
3030
line-height: 1.3;
3131
margin: 1rem 0 0;
3232
font-size: revert;
3333
}
3434

3535
.doc > h1.page:first-child {
36-
font-size: calc(36 / var(--rem-base) * 1rem);
36+
font-size: var(--doc-heading-font-size);
3737
margin: 1.5rem 0;
3838
}
3939

@@ -151,7 +151,7 @@
151151
}
152152

153153
.doc pre {
154-
font-size: calc(16 / var(--rem-base) * 1rem);
154+
font-size: inherit;
155155
line-height: 1.5;
156156
margin: 0;
157157
}
@@ -219,7 +219,8 @@
219219
}
220220

221221
.doc table.tableblock {
222-
font-size: calc(15 / var(--rem-base) * 1rem);
222+
font-size: inherit;
223+
border: 0;
223224
}
224225

225226
.doc .tablecontainer,
@@ -242,6 +243,11 @@
242243
padding: 0.5rem;
243244
}
244245

246+
.doc table.tableblock tr th {
247+
background-color: var(--color-smoke-70);
248+
border: 1px solid var(--color-gray-15);
249+
}
250+
245251
.doc table.tableblock,
246252
.doc table.tableblock > * > tr > * {
247253
border: 0 solid var(--table-border-color);
@@ -261,11 +267,11 @@
261267

262268
.doc table.grid-all > thead th,
263269
.doc table.grid-rows > thead th {
264-
border-bottom-width: 2.5px;
270+
border-bottom-width: 1px;
265271
}
266272

267273
.doc table.frame-all {
268-
border-width: 1px;
274+
border-width: 0;
269275
}
270276

271277
.doc table.frame-ends {
@@ -333,11 +339,14 @@
333339

334340
.doc .admonitionblock {
335341
margin: 1.4rem 0 0;
342+
padding: 1rem;
343+
background: var(--admonition-background);
344+
border: var(--admonition-border);
336345
}
337346

338347
.doc .admonitionblock p,
339348
.doc .admonitionblock td.content {
340-
font-size: calc(16 / var(--rem-base) * 1rem);
349+
font-size: inherit;
341350
}
342351

343352
.doc .admonitionblock td.content > :not(.title):first-child,
@@ -346,7 +355,7 @@
346355
}
347356

348357
.doc .admonitionblock pre {
349-
font-size: calc(15 / var(--rem-base) * 1rem);
358+
font-size: inherit;
350359
}
351360

352361
.doc .admonitionblock > table {
@@ -355,56 +364,57 @@
355364
width: 100%;
356365
}
357366

367+
.doc .admonitionblock > table tr {
368+
display: flex;
369+
flex-direction: column;
370+
gap: 0.25em;
371+
}
372+
358373
.doc .admonitionblock td.content {
359-
padding: 1rem 1rem 0.75rem;
360-
background: var(--admonition-background);
374+
padding: 0 1.7rem;
361375
width: 100%;
362376
word-wrap: anywhere;
363377
}
364378

365379
.doc .admonitionblock .icon {
366-
position: absolute;
367-
top: 0;
368-
left: 0;
369-
font-size: calc(15 / var(--rem-base) * 1rem);
370-
padding: 0 0.5rem;
371-
height: 1.25rem;
380+
font-size: inherit;
381+
padding: 0 0 0 1.25rem;
372382
line-height: 1;
373383
font-weight: var(--admonition-label-font-weight);
374-
text-transform: uppercase;
375-
border-radius: 0.45rem;
376-
transform: translate(-0.5rem, -50%);
384+
color: var(--color-black) !important;
385+
min-height: 1.25rem;
377386
}
378387

379388
.doc .admonitionblock.caution .icon {
380-
background-color: var(--caution-color);
381389
color: var(--caution-on-color);
390+
background: no-repeat url("../img/caution.svg");
382391
}
383392

384393
.doc .admonitionblock.important .icon {
385-
background-color: var(--important-color);
386394
color: var(--important-on-color);
395+
background: no-repeat url("../img/important.svg");
387396
}
388397

389398
.doc .admonitionblock.note .icon {
390-
background-color: var(--note-color);
391399
color: var(--note-on-color);
400+
background: no-repeat url("../img/note.svg");
392401
}
393402

394403
.doc .admonitionblock.tip .icon {
395-
background-color: var(--tip-color);
396404
color: var(--tip-on-color);
405+
background: no-repeat url("../img/tip.svg");
397406
}
398407

399408
.doc .admonitionblock.warning .icon {
400-
background-color: var(--warning-color);
401409
color: var(--warning-on-color);
410+
background: no-repeat url("../img/warning.svg");
402411
}
403412

404413
.doc .admonitionblock .icon i {
405414
display: inline-flex;
406415
align-items: center;
407416
height: 100%;
417+
padding: 0 0.35rem;
408418
}
409419

410420
.doc .admonitionblock .icon i::after {
@@ -459,18 +469,18 @@
459469

460470
.doc .quoteblock,
461471
.doc .verseblock {
462-
background: var(--quote-background);
463-
border-left: 5px solid var(--quote-border-color);
472+
background: var(--color-smoke-10);
473+
border-left: 3px solid var(--quote-border-color);
464474
color: var(--quote-font-color);
465475
}
466476

467477
.doc .quoteblock {
468-
padding: 0.25rem 2rem 1.25rem;
478+
padding: 0.25rem 1.5rem 1.25rem;
469479
}
470480

471481
.doc .quoteblock .attribution {
472482
color: var(--quote-attribution-font-color);
473-
font-size: calc(15 / var(--rem-base) * 1rem);
483+
font-size: inherit;
474484
margin-top: 0.75rem;
475485
}
476486

@@ -487,7 +497,7 @@
487497
}
488498

489499
.doc .verseblock {
490-
font-size: 1.15em;
500+
font-size: inherit;
491501
padding: 1rem 2rem;
492502
}
493503

@@ -624,12 +634,12 @@
624634
.doc .videoblock .title,
625635
.doc .tableblock caption {
626636
color: var(--caption-font-color);
627-
font-size: calc(16 / var(--rem-base) * 1rem);
637+
font-size: inherit;
628638
font-style: var(--caption-font-style);
629639
font-weight: var(--caption-font-weight);
630640
hyphens: none;
631641
letter-spacing: 0.01em;
632-
padding-bottom: 0.075rem;
642+
padding-bottom: 0.35rem;
633643
}
634644

635645
.doc .tableblock caption {
@@ -706,8 +716,8 @@
706716
.doc .exampleblock > .content,
707717
.doc details.result > .content {
708718
background: var(--example-background);
709-
border: 0.25rem solid var(--example-border-color);
710-
border-radius: 0.5rem;
719+
border: 0.125rem solid var(--example-border-color);
720+
border-radius: 0;
711721
padding: 0.75rem;
712722
}
713723

@@ -750,11 +760,12 @@
750760
.doc pre.highlight code,
751761
.doc .listingblock pre:not(.highlight),
752762
.doc .literalblock pre {
753-
background: var(--pre-background);
754-
box-shadow: inset 0 0 1.75px var(--pre-border-color);
763+
background: none;
764+
border: 1px solid var(--color-gray-15);
755765
display: block;
756766
overflow-x: auto;
757-
padding: 0.875em;
767+
padding: 0.685em;
768+
font-size: inherit;
758769
}
759770

760771
.doc .listingblock > .content {

‎antora-ui/src/css/toolbar.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
justify-content: flex-start;
1010
position: sticky;
1111
top: var(--navbar-height);
12+
z-index: var(--z-index-toolbar);
1213
}
1314

1415
.toolbar a {

‎antora-ui/src/css/vars.css

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
2-
31
:root {
42
/* colors */
53
--color-white: #fff;
@@ -9,6 +7,7 @@
97
--color-smoke-70: #f0f0f0;
108
--color-smoke-90: #eaf0f3;
119
--color-gray-10: #c1c1c1;
10+
--color-gray-15: #dcdcdc;
1211
--color-gray-30: #9c9c9c;
1312
--color-gray-40: #8e8e8e;
1413
--color-gray-50: #808080;
@@ -20,15 +19,14 @@
2019
--color-jet-80: rgb(49 74 87);
2120
--color-black: #000;
2221
/* fonts */
23-
--rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
24-
--body-font-size: 1.0625em; /* 17px */
25-
--body-font-size--desktop: 1.125em; /* 18px */
26-
--body-font-size--print: 0.9375em; /* 15px */
27-
--body-line-height: 1.15;
22+
--rem-base: 16; /* used to compute rem value from desired pixel value (e.g., calc(16 / var(--rem-base) * 1rem) = 16px) */
23+
--body-font-size: 0.83333rem; /* 13.33px */
24+
--body-font-size--desktop: 1rem; /* 16px */
25+
--body-font-size--print: 0.9375rem; /* 15px */
2826
--body-font-color: var(--color-jet-70);
29-
--body-font-family: "Cairo", sans-serif;
30-
--body-font-weight-bold: 500;
31-
--monospace-font-family: "Roboto Mono", monospace;
27+
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
28+
--body-font-weight-bold: 600;
29+
--monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
3230
--monospace-font-weight-bold: 500;
3331
/* base */
3432
--body-background: var(--color-white);
@@ -75,13 +73,15 @@
7573
--warning-color: #e18114;
7674
--warning-on-color: var(--color-white);
7775
/* doc */
78-
--doc-font-color: var(--color-jet-50);
79-
--doc-font-size: inherit;
80-
--doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
81-
--doc-line-height: 1.6;
76+
--doc-heading-font-size: 1.375rem;
77+
--doc-font-family: var(--body-font-family);
78+
--doc-font-color: var(--color-black);
79+
--doc-font-size: var(--body-font-size);
80+
--doc-font-size--desktop: var(--body-font-size);
81+
--doc-line-height: 1.15;
8282
--doc-margin: 0 auto;
8383
--doc-margin--desktop: 0 2rem;
84-
--heading-font-color: var(--color-jet-80);
84+
--heading-font-color: var(--color-black);
8585
--heading-font-weight: normal;
8686
--alt-heading-font-weight: var(--body-font-weight-bold);
8787
--section-divider-color: var(--panel-border-color);
@@ -91,7 +91,8 @@
9191
--abstract-background: var(--color-smoke-70);
9292
--abstract-font-color: var(--color-jet-20);
9393
--abstract-border-color: var(--panel-border-color);
94-
--admonition-background: var(--panel-background);
94+
--admonition-background: var(--color-white);
95+
--admonition-border: 1px solid var(--color-gray-15);
9596
--admonition-label-font-weight: var(--body-font-weight-bold);
9697
--caption-font-color: var(--color-gray-70);
9798
--caption-font-style: italic;
@@ -103,14 +104,14 @@
103104
--kbd-background: var(--panel-background);
104105
--kbd-border-color: var(--color-gray-10);
105106
--pre-background: var(--panel-background);
106-
--pre-border-color: var(--panel-border-color);
107+
--pre-border-color: var(--color-gray-50);
107108
--pre-annotation-font-color: var(--color-gray-50);
108109
--quote-background: var(--panel-background);
109110
--quote-border-color: var(--color-gray-70);
110111
--quote-font-color: var(--color-gray-70);
111112
--quote-attribution-font-color: var(--color-gray-40);
112113
--sidebar-background: var(--color-smoke-90);
113-
--table-border-color: var(--panel-border-color);
114+
--table-border-color: var(--color-gray-15);
114115
--table-stripe-background: var(--panel-background);
115116
--table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
116117
/* toc */

‎antora-ui/src/img/caution.svg

Lines changed: 1 addition & 0 deletions
Loading

‎antora-ui/src/img/important.svg

Lines changed: 1 addition & 0 deletions
Loading

‎antora-ui/src/img/note.svg

Lines changed: 1 addition & 0 deletions
Loading

‎antora-ui/src/img/tip.svg

Lines changed: 1 addition & 0 deletions
Loading

‎antora-ui/src/img/warning.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)