Skip to content

Commit

Permalink
Update antora styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@julioest
julioest committed May 24, 2024
1 parent d10d7f2 commit 6b9a007
Show file tree
Hide file tree
Showing 10 changed files with 77 additions and 55 deletions.
3 changes: 3 additions & 0 deletions antora-ui/.stylelintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,8 @@
"rules": {
"comment-empty-line-before": null,
"no-descending-specificity": null,
"value-keyword-case": ["lower", {
"ignoreKeywords": ["/^BlinkMacSystemFont$/", "/^Roboto$/", "/^Oxygen-Sans$/", "/^Ubuntu$/", "/^Cantarell$/", "/^Helvetica Neue$/", "/^Consolas$/", "/^Menlo$/", "/^Courier$/"]
}]
}
}
1 change: 1 addition & 0 deletions antora-ui/src/css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ body {
color: var(--body-font-color);
font-family: var(--body-font-family);
line-height: var(--body-line-height);
font-size: inherit;
margin: 0;
tab-size: 4;
word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
Expand Down
85 changes: 48 additions & 37 deletions antora-ui/src/css/doc.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
font-family: var(--doc-font-family);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
Expand All @@ -25,15 +25,15 @@
.doc h5,
.doc h6 {
color: var(--heading-font-color);
font-weight: var(--heading-font-weight);
font-weight: var(--alt-heading-font-weight);
hyphens: none;
line-height: 1.3;
margin: 1rem 0 0;
font-size: revert;
}

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

Expand Down Expand Up @@ -151,7 +151,7 @@
}

.doc pre {
font-size: calc(16 / var(--rem-base) * 1rem);
font-size: inherit;
line-height: 1.5;
margin: 0;
}
Expand Down Expand Up @@ -219,7 +219,8 @@
}

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

.doc .tablecontainer,
Expand All @@ -242,6 +243,11 @@
padding: 0.5rem;
}

.doc table.tableblock tr th {
background-color: var(--color-smoke-70);
border: 1px solid var(--color-gray-15);
}

.doc table.tableblock,
.doc table.tableblock > * > tr > * {
border: 0 solid var(--table-border-color);
Expand All @@ -261,11 +267,11 @@

.doc table.grid-all > thead th,
.doc table.grid-rows > thead th {
border-bottom-width: 2.5px;
border-bottom-width: 1px;
}

.doc table.frame-all {
border-width: 1px;
border-width: 0;
}

.doc table.frame-ends {
Expand Down Expand Up @@ -333,11 +339,14 @@

.doc .admonitionblock {
margin: 1.4rem 0 0;
padding: 1rem;
background: var(--admonition-background);
border: var(--admonition-border);
}

.doc .admonitionblock p,
.doc .admonitionblock td.content {
font-size: calc(16 / var(--rem-base) * 1rem);
font-size: inherit;
}

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

.doc .admonitionblock pre {
font-size: calc(15 / var(--rem-base) * 1rem);
font-size: inherit;
}

.doc .admonitionblock > table {
Expand All @@ -355,56 +364,57 @@
width: 100%;
}

.doc .admonitionblock > table tr {
display: flex;
flex-direction: column;
gap: 0.25em;
}

.doc .admonitionblock td.content {
padding: 1rem 1rem 0.75rem;
background: var(--admonition-background);
padding: 0 1.7rem;
width: 100%;
word-wrap: anywhere;
}

.doc .admonitionblock .icon {
position: absolute;
top: 0;
left: 0;
font-size: calc(15 / var(--rem-base) * 1rem);
padding: 0 0.5rem;
height: 1.25rem;
font-size: inherit;
padding: 0 0 0 1.25rem;
line-height: 1;
font-weight: var(--admonition-label-font-weight);
text-transform: uppercase;
border-radius: 0.45rem;
transform: translate(-0.5rem, -50%);
color: var(--color-black) !important;
min-height: 1.25rem;
}

.doc .admonitionblock.caution .icon {
background-color: var(--caution-color);
color: var(--caution-on-color);
background: no-repeat url("../img/caution.svg");
}

.doc .admonitionblock.important .icon {
background-color: var(--important-color);
color: var(--important-on-color);
background: no-repeat url("../img/important.svg");
}

.doc .admonitionblock.note .icon {
background-color: var(--note-color);
color: var(--note-on-color);
background: no-repeat url("../img/note.svg");
}

.doc .admonitionblock.tip .icon {
background-color: var(--tip-color);
color: var(--tip-on-color);
background: no-repeat url("../img/tip.svg");
}

.doc .admonitionblock.warning .icon {
background-color: var(--warning-color);
color: var(--warning-on-color);
background: no-repeat url("../img/warning.svg");
}

.doc .admonitionblock .icon i {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 0.35rem;
}

.doc .admonitionblock .icon i::after {
Expand Down Expand Up @@ -459,18 +469,18 @@

.doc .quoteblock,
.doc .verseblock {
background: var(--quote-background);
border-left: 5px solid var(--quote-border-color);
background: var(--color-smoke-10);
border-left: 3px solid var(--quote-border-color);
color: var(--quote-font-color);
}

.doc .quoteblock {
padding: 0.25rem 2rem 1.25rem;
padding: 0.25rem 1.5rem 1.25rem;
}

.doc .quoteblock .attribution {
color: var(--quote-attribution-font-color);
font-size: calc(15 / var(--rem-base) * 1rem);
font-size: inherit;
margin-top: 0.75rem;
}

Expand All @@ -487,7 +497,7 @@
}

.doc .verseblock {
font-size: 1.15em;
font-size: inherit;
padding: 1rem 2rem;
}

Expand Down Expand Up @@ -624,12 +634,12 @@
.doc .videoblock .title,
.doc .tableblock caption {
color: var(--caption-font-color);
font-size: calc(16 / var(--rem-base) * 1rem);
font-size: inherit;
font-style: var(--caption-font-style);
font-weight: var(--caption-font-weight);
hyphens: none;
letter-spacing: 0.01em;
padding-bottom: 0.075rem;
padding-bottom: 0.35rem;
}

.doc .tableblock caption {
Expand Down Expand Up @@ -706,8 +716,8 @@
.doc .exampleblock > .content,
.doc details.result > .content {
background: var(--example-background);
border: 0.25rem solid var(--example-border-color);
border-radius: 0.5rem;
border: 0.125rem solid var(--example-border-color);
border-radius: 0;
padding: 0.75rem;
}

Expand Down Expand Up @@ -750,11 +760,12 @@
.doc pre.highlight code,
.doc .listingblock pre:not(.highlight),
.doc .literalblock pre {
background: var(--pre-background);
box-shadow: inset 0 0 1.75px var(--pre-border-color);
background: none;
border: 1px solid var(--color-gray-15);
display: block;
overflow-x: auto;
padding: 0.875em;
padding: 0.685em;
font-size: inherit;
}

.doc .listingblock > .content {
Expand Down
1 change: 1 addition & 0 deletions antora-ui/src/css/toolbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
justify-content: flex-start;
position: sticky;
top: var(--navbar-height);
z-index: var(--z-index-toolbar);
}

.toolbar a {
Expand Down
37 changes: 19 additions & 18 deletions antora-ui/src/css/vars.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');

:root {
/* colors */
--color-white: #fff;
Expand All @@ -9,6 +7,7 @@
--color-smoke-70: #f0f0f0;
--color-smoke-90: #eaf0f3;
--color-gray-10: #c1c1c1;
--color-gray-15: #dcdcdc;
--color-gray-30: #9c9c9c;
--color-gray-40: #8e8e8e;
--color-gray-50: #808080;
Expand All @@ -20,15 +19,14 @@
--color-jet-80: rgb(49 74 87);
--color-black: #000;
/* fonts */
--rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
--body-font-size: 1.0625em; /* 17px */
--body-font-size--desktop: 1.125em; /* 18px */
--body-font-size--print: 0.9375em; /* 15px */
--body-line-height: 1.15;
--rem-base: 16; /* used to compute rem value from desired pixel value (e.g., calc(16 / var(--rem-base) * 1rem) = 16px) */
--body-font-size: 0.83333rem; /* 13.33px */
--body-font-size--desktop: 1rem; /* 16px */
--body-font-size--print: 0.9375rem; /* 15px */
--body-font-color: var(--color-jet-70);
--body-font-family: "Cairo", sans-serif;
--body-font-weight-bold: 500;
--monospace-font-family: "Roboto Mono", monospace;
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--body-font-weight-bold: 600;
--monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
--monospace-font-weight-bold: 500;
/* base */
--body-background: var(--color-white);
Expand Down Expand Up @@ -75,13 +73,15 @@
--warning-color: #e18114;
--warning-on-color: var(--color-white);
/* doc */
--doc-font-color: var(--color-jet-50);
--doc-font-size: inherit;
--doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
--doc-line-height: 1.6;
--doc-heading-font-size: 1.375rem;
--doc-font-family: var(--body-font-family);
--doc-font-color: var(--color-black);
--doc-font-size: var(--body-font-size);
--doc-font-size--desktop: var(--body-font-size);
--doc-line-height: 1.15;
--doc-margin: 0 auto;
--doc-margin--desktop: 0 2rem;
--heading-font-color: var(--color-jet-80);
--heading-font-color: var(--color-black);
--heading-font-weight: normal;
--alt-heading-font-weight: var(--body-font-weight-bold);
--section-divider-color: var(--panel-border-color);
Expand All @@ -91,7 +91,8 @@
--abstract-background: var(--color-smoke-70);
--abstract-font-color: var(--color-jet-20);
--abstract-border-color: var(--panel-border-color);
--admonition-background: var(--panel-background);
--admonition-background: var(--color-white);
--admonition-border: 1px solid var(--color-gray-15);
--admonition-label-font-weight: var(--body-font-weight-bold);
--caption-font-color: var(--color-gray-70);
--caption-font-style: italic;
Expand All @@ -103,14 +104,14 @@
--kbd-background: var(--panel-background);
--kbd-border-color: var(--color-gray-10);
--pre-background: var(--panel-background);
--pre-border-color: var(--panel-border-color);
--pre-border-color: var(--color-gray-50);
--pre-annotation-font-color: var(--color-gray-50);
--quote-background: var(--panel-background);
--quote-border-color: var(--color-gray-70);
--quote-font-color: var(--color-gray-70);
--quote-attribution-font-color: var(--color-gray-40);
--sidebar-background: var(--color-smoke-90);
--table-border-color: var(--panel-border-color);
--table-border-color: var(--color-gray-15);
--table-stripe-background: var(--panel-background);
--table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
/* toc */
Expand Down
1 change: 1 addition & 0 deletions antora-ui/src/img/caution.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions antora-ui/src/img/important.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions antora-ui/src/img/note.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions antora-ui/src/img/tip.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions antora-ui/src/img/warning.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6b9a007

Please sign in to comment.