From e3794d1383eba3b30bbba68841336d374fda551a Mon Sep 17 00:00:00 2001 From: JulioPDX Date: Fri, 15 Dec 2023 09:26:42 -0800 Subject: [PATCH 1/5] hardcoding mike version --- ansible_collections/arista/avd/docs/requirements.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ansible_collections/arista/avd/docs/requirements.txt b/ansible_collections/arista/avd/docs/requirements.txt index 2c274c8d46d..28737438922 100644 --- a/ansible_collections/arista/avd/docs/requirements.txt +++ b/ansible_collections/arista/avd/docs/requirements.txt @@ -3,7 +3,7 @@ mkdocs-material<10 mkdocs-material-extensions pymdown-extensions mdx_truly_sane_lists -mike +mike==1.1.2 mkdocs-git-revision-date-localized-plugin mkdocs-git-revision-date-plugin mkdocs-exclude From 719805d5fa6bcf189169ffd58a1982c9af15d1a7 Mon Sep 17 00:00:00 2001 From: JulioPDX Date: Fri, 15 Dec 2023 10:37:46 -0800 Subject: [PATCH 2/5] Correcting CSS --- .../avd/docs/stylesheets/extra.material.css | 392 +++++++++--------- 1 file changed, 206 insertions(+), 186 deletions(-) diff --git a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css index a807b95cc30..0311068edb9 100644 --- a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css +++ b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css @@ -1,199 +1,219 @@ [data-md-color-scheme="slate"] { - --md-hue: 210; -} - -:root { - /* Color schema based on Arista Color Schema */ - - /* Primary color shades */ - --md-primary-fg-color: #27569B; - --md-primary-fg-color--light: #FFFFFF; - --md-primary-fg-color--dark: #27569B; - --md-primary-bg-color: #FFFFFF; - --md-primary-bg-color--light: #FFFFFF; - - /* Accent color shades */ - --md-accent-fg-color: #27569B; - --md-accent-bg-color: #27569B; - --md-accent-bg-color--light: #27569B; - - /* Link color */ - --md-typeset-a-color: #27569B; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades */ - --md-code-bg-color: #E6E6E6; - --md-code-border-color: #0000004f; - --block-code-bg-color: #e4e4e4; - /* --md-code-fg-color: ...; */ - - /* font-size: 1rem; */ - /* min-height: 100%; - position: relative; - width: 100%; */ - font-feature-settings: "kern","liga"; - font-family: var(--md-text-font-family,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; - -webkit-font-smoothing: antialiased; - -} - -[data-md-color-scheme="slate"] { - - /* Link color */ - --md-typeset-a-color: #75aaf8; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades */ - /* --md-code-bg-color: #E6E6E6; */ - --md-code-border-color: #aec6db4f; - /* --block-code-bg-color: #e4e4e4; */ -} - -[data-md-color-scheme="default"] { - /* Primary color shades */ - --md-primary-fg-color: #27569B; - --md-primary-fg-color--light: #FFFFFF; - --md-primary-fg-color--dark: #27569B; - --md-primary-bg-color: #FFFFFF; - --md-primary-bg-color--light: #FFFFFF; - - /* Accent color shades */ - --md-accent-fg-color: #27569B; - --md-accent-bg-color: #27569B; - --md-accent-bg-color--light: #27569B; - - /* Link color */ - --md-typeset-a-color: #27569B; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades */ - --md-code-bg-color: #E6E6E6; - --md-code-border-color: #0000004f; - --block-code-bg-color: #e4e4e4; -} - -@media only screen and (min-width: 76.25em) { - .md-main__inner { - max-width: 100%; - } - .md-sidebar--primary { - /* left: 5%; */ - margin-left: 30; - } - .md-sidebar--secondary { - /* right: 5%; */ - margin-left: 0; - margin-right: 30; - -webkit-transform: none; - transform: none; - } -} - -@media only screen { - .md-typeset a:hover { - background-color: var(--md-typeset-a-color-bg); - color: var(--md-typeset-a-color-fg); - } - .md-footer-nav { - background-color: var(--md-default-bg-color--light); - color: var(--md-accent-fg-color--transparent) - } - .md-footer { - height: 2%; - } - .md-footer-nav__direction { - position: absolute; - right: 0; - left: 0; - margin-top: -1rem; - padding: 0 1rem; - color: var(--md-default-fg-color--light); - font-size: .64rem; - } - .md-footer-nav__title { - font-size: .9rem; - line-height: 10rem; - color: var(--md-default-fg-color--light); - } - - .md-typeset h4 h5 h6 { - font-size: 1.5rem; - margin: 1em 0; - /* font-weight: 700; */ - letter-spacing: -.01em; - line-height: 3em; - } - - .md-typeset table:not([class]) th { - min-width: 5rem; - padding: .6rem .8rem; - color: var(--md-default-fg-color--lighter); - vertical-align: top; - background-color: var(--md-accent-bg-color); - text-align: left; - /* min-width: 100%; */ - /* display: table; */ - } - .md-typeset table:not([class]) td { - /* padding: .9375em 1.25em; */ - border-collapse: collapse; - vertical-align: center; - text-align: left; - border-bottom: 1px solid var(--md-default-fg-color--light); - } - .md-typeset code { - padding: 0 .2941176471em; - font-size: 80%; - word-break: break-word; - background-color: var(--md-code-bg-color); - border-radius: .1rem; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; - } - .highlight code { - background-color: var(--md-code-bg-color); - border: 2px solid var(--md-code-border-color); - } - .md-typeset .admonition, .md-typeset details { + --md-hue: 210; + } + + :root { + /* Color schema based on Arista Color Schema */ + + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + + /* Link color */ + --md-typeset-a-color: #27569B; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; + + /* Code block color shades-org */ + --md-code-bg-color: #E6E6E6; + --md-code-border-color: #0000004f; + --block-code-bg-color: #E6E6E6; + --md-code-fg-color: ...; + + /* font-size: 1rem; */ + /* min-height: 100%; + position: relative; + width: 100%; */ + font-feature-settings: "kern","liga"; + font-family: var(--md-text-font-family,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; + -webkit-font-smoothing: antialiased; + + } + + [data-md-color-scheme="slate"] { + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + --md-default-bg-color: #2e363e; + + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + + /* Link color */ + --md-typeset-a-color: #4473a9; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; + + /* background-color: #2e363e; */ + + /* Code block color shades */ + /* --md-code-bg-color: #E6E6E6; + --md-code-border-color: #aec6db4f; + --block-code-bg-color: #e4e4e4; */ + } + + [data-md-color-scheme="default"] { + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + + /* Link color */ + --md-typeset-a-color: #4473a9; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; + + /* Code block color shades */ + --md-code-bg-color: #E6E6E6; + --md-code-border-color: #0000004f; + --block-code-bg-color: #e4e4e4; + + /* Code block color shades-v1AN */ + /*--md-code-bg-color: #FFFFFF; + --md-code-border-color: #ffffff; + + /*--block-code-bg-color: #ffffff; + + } + + @media only screen and (min-width: 76.25em) { + .md-main__inner { + max-width: 85%; + } + .md-sidebar--primary { + left: 5%; + } + .md-sidebar--secondary { + right: 5%; + margin-left: 0; + -webkit-transform: none; + transform: none; + } + } + + @media only screen { + .md-typeset a:hover { + background-color: var(--md-typeset-a-color-bg); + color: var(--md-typeset-a-color-fg); + } + .md-footer-nav { + background-color: var(--md-default-bg-color--light); + color: var(--md-accent-fg-color--transparent) + } + .md-footer { + height: 2%; + } + .md-footer-nav__direction { + position: absolute; + right: 0; + left: 0; + margin-top: -1rem; + padding: 0 1rem; + color: var(--md-default-fg-color--light); + font-size: .64rem; + } + .md-footer-nav__title { + font-size: .9rem; + line-height: 10rem; + color: var(--md-default-fg-color--light); + } + + .md-typeset h4 h5 h6 { + font-size: 1.5rem; + margin: 1em 0; + /* font-weight: 700; */ + letter-spacing: -.01em; + line-height: 3em; + } + + .md-typeset table:not([class]) th { + min-width: 5rem; + padding: .6rem .8rem; + color: var(--md-default-fg-color--lighter); + vertical-align: top; + background-color: var(--md-accent-bg-color); + text-align: left; + /* min-width: 100%; */ + /* display: table; */ + } + .md-typeset table:not([class]) td { + /* padding: .9375em 1.25em; */ + border-collapse: collapse; + vertical-align: center; + text-align: left; + border-bottom: 1px solid var(--md-default-fg-color--light); + } + .md-typeset code { + padding: 0 .2941176471em; + font-size: 80%; + word-break: break-word; + background-color: var(--md-code-bg-color); + border-radius: .1rem; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + } + .highlight code { + background-color: var(--md-code-bg-color); + border: 2px solid var(--md-code-border-color); + } + .md-typeset .admonition, .md-typeset details { margin: 1.5625em 0; padding: 0 .6rem; - overflow: hidden; + overflow: visible; font-size: .64rem; page-break-inside: avoid; border-left: .2rem solid var(--md-accent-bg-color); border-left-color: var(--md-accent-bg-color); border-radius: .1rem; + border-width: thin; box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); + } + /* .md-typeset .note > .admonition-title, .md-typeset .note > summary { + background-color: var(--md-accent-bg-color); + color: var(--md-default-fg-color--lighter) + } */ + } + .md-typeset__table { + min-width: 100%; + } + .md-typeset table:not([class]) { + display: table; + } + + .mdx-content__footer { + margin-top: 20px; + text-align: center; } - /* .md-typeset .note > .admonition-title, .md-typeset .note > summary { - background-color: var(--md-accent-bg-color); - color: var(--md-default-fg-color--lighter) - } */ -} - .md-typeset__table { - min-width: 100%; + .mdx-content__footer a { + display: inline-block; + transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms; } - .md-typeset table:not([class]) { - display: table; + .mdx-content__footer a:focus, .mdx-content__footer a:hover { + transform: scale(1.2); } -.mdx-content__footer { - margin-top: 20px; - text-align: center; -} -.mdx-content__footer a { - display: inline-block; - transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms; -} -.mdx-content__footer a:focus, .mdx-content__footer a:hover { - transform: scale(1.2); -} - -.md-typeset table:not([class]) th { - min-width: 5rem; - padding: .6rem .8rem; - color: var(--md-primary-fg-color--light); -} + .md-typeset table:not([class]) th { + min-width: 5rem; + padding: .6rem .8rem; + color: var(--md-primary-fg-color--light); + } From c8b226aacce34b26a9fb6bde5c7aa793e0caaaae Mon Sep 17 00:00:00 2001 From: JulioPDX Date: Tue, 19 Dec 2023 16:55:34 -0800 Subject: [PATCH 3/5] more cleanup on css and formatting --- .../avd/docs/stylesheets/extra.material.css | 334 +++++++----------- 1 file changed, 121 insertions(+), 213 deletions(-) diff --git a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css index 0311068edb9..3361ef00431 100644 --- a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css +++ b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css @@ -1,219 +1,127 @@ [data-md-color-scheme="slate"] { --md-hue: 210; - } - - :root { - /* Color schema based on Arista Color Schema */ - - /* Primary color shades */ - --md-primary-fg-color: #27569B; - --md-primary-fg-color--light: #FFFFFF; - --md-primary-fg-color--dark: #27569B; - --md-primary-bg-color: #FFFFFF; - --md-primary-bg-color--light: #FFFFFF; - - /* Accent color shades */ - --md-accent-fg-color: #27569B; - --md-accent-bg-color: #27569B; - --md-accent-bg-color--light: #27569B; - - /* Link color */ - --md-typeset-a-color: #27569B; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades-org */ - --md-code-bg-color: #E6E6E6; - --md-code-border-color: #0000004f; - --block-code-bg-color: #E6E6E6; - --md-code-fg-color: ...; - - /* font-size: 1rem; */ - /* min-height: 100%; - position: relative; - width: 100%; */ +} +:root { + /* Color schema based on Arista Color Schema */ + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + /* Link color */ + --md-typeset-a-color: #27569B; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; + /* Code block color shades-org */ + --md-code-bg-color: #E6E6E6; + --md-code-border-color: #0000004f; + --block-code-bg-color: #E6E6E6; font-feature-settings: "kern","liga"; font-family: var(--md-text-font-family,_),-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; - - } - - [data-md-color-scheme="slate"] { - /* Primary color shades */ - --md-primary-fg-color: #27569B; - --md-primary-fg-color--light: #FFFFFF; - --md-primary-fg-color--dark: #27569B; - --md-primary-bg-color: #FFFFFF; - --md-primary-bg-color--light: #FFFFFF; +} +[data-md-color-scheme="slate"] { + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; --md-default-bg-color: #2e363e; - - /* Accent color shades */ - --md-accent-fg-color: #27569B; - --md-accent-bg-color: #27569B; - --md-accent-bg-color--light: #27569B; - - /* Link color */ - --md-typeset-a-color: #4473a9; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* background-color: #2e363e; */ - - /* Code block color shades */ - /* --md-code-bg-color: #E6E6E6; - --md-code-border-color: #aec6db4f; - --block-code-bg-color: #e4e4e4; */ - } - - [data-md-color-scheme="default"] { - /* Primary color shades */ - --md-primary-fg-color: #27569B; - --md-primary-fg-color--light: #FFFFFF; - --md-primary-fg-color--dark: #27569B; - --md-primary-bg-color: #FFFFFF; - --md-primary-bg-color--light: #FFFFFF; - - /* Accent color shades */ - --md-accent-fg-color: #27569B; - --md-accent-bg-color: #27569B; - --md-accent-bg-color--light: #27569B; - - /* Link color */ - --md-typeset-a-color: #4473a9; - --md-typeset-a-color-fg: #FFFFFF; - --md-typeset-a-color-bg: #27569B; - - /* Code block color shades */ - --md-code-bg-color: #E6E6E6; - --md-code-border-color: #0000004f; - --block-code-bg-color: #e4e4e4; - - /* Code block color shades-v1AN */ - /*--md-code-bg-color: #FFFFFF; - --md-code-border-color: #ffffff; - - /*--block-code-bg-color: #ffffff; - - } - - @media only screen and (min-width: 76.25em) { - .md-main__inner { - max-width: 85%; - } - .md-sidebar--primary { - left: 5%; - } - .md-sidebar--secondary { - right: 5%; - margin-left: 0; - -webkit-transform: none; - transform: none; - } - } - - @media only screen { - .md-typeset a:hover { - background-color: var(--md-typeset-a-color-bg); - color: var(--md-typeset-a-color-fg); - } - .md-footer-nav { - background-color: var(--md-default-bg-color--light); - color: var(--md-accent-fg-color--transparent) - } - .md-footer { - height: 2%; - } - .md-footer-nav__direction { - position: absolute; - right: 0; - left: 0; - margin-top: -1rem; - padding: 0 1rem; - color: var(--md-default-fg-color--light); - font-size: .64rem; - } - .md-footer-nav__title { - font-size: .9rem; - line-height: 10rem; - color: var(--md-default-fg-color--light); - } - - .md-typeset h4 h5 h6 { - font-size: 1.5rem; - margin: 1em 0; - /* font-weight: 700; */ - letter-spacing: -.01em; - line-height: 3em; - } - - .md-typeset table:not([class]) th { - min-width: 5rem; - padding: .6rem .8rem; - color: var(--md-default-fg-color--lighter); - vertical-align: top; - background-color: var(--md-accent-bg-color); - text-align: left; - /* min-width: 100%; */ - /* display: table; */ - } - .md-typeset table:not([class]) td { - /* padding: .9375em 1.25em; */ - border-collapse: collapse; - vertical-align: center; - text-align: left; - border-bottom: 1px solid var(--md-default-fg-color--light); - } - .md-typeset code { - padding: 0 .2941176471em; - font-size: 80%; - word-break: break-word; - background-color: var(--md-code-bg-color); - border-radius: .1rem; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; - } - .highlight code { - background-color: var(--md-code-bg-color); - border: 2px solid var(--md-code-border-color); - } - .md-typeset .admonition, .md-typeset details { - margin: 1.5625em 0; - padding: 0 .6rem; - overflow: visible; - font-size: .64rem; - page-break-inside: avoid; - border-left: .2rem solid var(--md-accent-bg-color); - border-left-color: var(--md-accent-bg-color); - border-radius: .1rem; - border-width: thin; - box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); - } - /* .md-typeset .note > .admonition-title, .md-typeset .note > summary { - background-color: var(--md-accent-bg-color); - color: var(--md-default-fg-color--lighter) - } */ - } - .md-typeset__table { - min-width: 100%; - } - .md-typeset table:not([class]) { - display: table; - } - - .mdx-content__footer { - margin-top: 20px; - text-align: center; - } - .mdx-content__footer a { - display: inline-block; - transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms; - } - .mdx-content__footer a:focus, .mdx-content__footer a:hover { - transform: scale(1.2); - } - - .md-typeset table:not([class]) th { - min-width: 5rem; - padding: .6rem .8rem; - color: var(--md-primary-fg-color--light); - } + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + /* Link color */ + --md-typeset-a-color: #4473a9; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; +} +[data-md-color-scheme="default"] { + /* Primary color shades */ + --md-primary-fg-color: #27569B; + --md-primary-fg-color--light: #FFFFFF; + --md-primary-fg-color--dark: #27569B; + --md-primary-bg-color: #FFFFFF; + --md-primary-bg-color--light: #FFFFFF; + /* Accent color shades */ + --md-accent-fg-color: #27569B; + --md-accent-bg-color: #27569B; + --md-accent-bg-color--light: #27569B; + /* Link color */ + --md-typeset-a-color: #4473a9; + --md-typeset-a-color-fg: #FFFFFF; + --md-typeset-a-color-bg: #27569B; + /* Code block color shades */ + --md-code-bg-color: #E6E6E6; + --md-code-border-color: #0000004f; + --block-code-bg-color: #e4e4e4; + letter-spacing: -.01em; + line-height: 3em; +} +.md-typeset table:not([class]) th { + min-width: 5rem; + padding: .6rem .8rem; + color: var(--md-default-fg-color--lighter); + vertical-align: top; + background-color: var(--md-accent-bg-color); + text-align: left; +} +.md-typeset table:not([class]) td { + border-collapse: collapse; + vertical-align: center; + text-align: left; + border-bottom: 1px solid var(--md-default-fg-color--light); +} +.md-typeset code { + padding: 0 .2941176471em; + font-size: 80%; + word-break: break-word; + background-color: var(--md-code-bg-color); + border-radius: .1rem; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} +.highlight code { + background-color: var(--md-code-bg-color); + border: 2px solid var(--md-code-border-color); +} +.md-typeset .admonition, .md-typeset details { + margin: 1.5625em 0; + padding: 0 .6rem; + overflow: visible; + font-size: .64rem; + page-break-inside: avoid; + border-left: .2rem solid var(--md-accent-bg-color); + border-left-color: var(--md-accent-bg-color); + border-radius: .1rem; + border-width: thin; + box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); +} +.md-typeset__table { + min-width: 100%; +} +.md-typeset table:not([class]) { + display: table; +} +.mdx-content__footer { + margin-top: 20px; + text-align: center; +} +.mdx-content__footer a { + display: inline-block; + transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms; +} +.mdx-content__footer a:focus, .mdx-content__footer a:hover { + transform: scale(1.2); +} +.md-typeset table:not([class]) th { + min-width: 5rem; + padding: .6rem .8rem; + color: var(--md-primary-fg-color--light); +} From 3d6a973bc9e612639a0a9aa21d6727adbd0e1718 Mon Sep 17 00:00:00 2001 From: JulioPDX Date: Wed, 20 Dec 2023 11:10:54 -0800 Subject: [PATCH 4/5] screen overrides updated --- .../avd/docs/stylesheets/extra.material.css | 121 ++++++++++++------ 1 file changed, 84 insertions(+), 37 deletions(-) diff --git a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css index 3361ef00431..84f2dd3a7a5 100644 --- a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css +++ b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css @@ -64,44 +64,91 @@ letter-spacing: -.01em; line-height: 3em; } -.md-typeset table:not([class]) th { - min-width: 5rem; - padding: .6rem .8rem; - color: var(--md-default-fg-color--lighter); - vertical-align: top; - background-color: var(--md-accent-bg-color); - text-align: left; -} -.md-typeset table:not([class]) td { - border-collapse: collapse; - vertical-align: center; - text-align: left; - border-bottom: 1px solid var(--md-default-fg-color--light); -} -.md-typeset code { - padding: 0 .2941176471em; - font-size: 80%; - word-break: break-word; - background-color: var(--md-code-bg-color); - border-radius: .1rem; - -webkit-box-decoration-break: clone; - box-decoration-break: clone; -} -.highlight code { - background-color: var(--md-code-bg-color); - border: 2px solid var(--md-code-border-color); +@media only screen and (min-width: 76.25em) { + .md-main__inner { + max-width: 100%; + } + .md-sidebar--primary { + margin-left: 30; + } + .md-sidebar--secondary { + margin-left: 0; + margin-right: 30; + -webkit-transform: none; + transform: none; + } } -.md-typeset .admonition, .md-typeset details { - margin: 1.5625em 0; - padding: 0 .6rem; - overflow: visible; - font-size: .64rem; - page-break-inside: avoid; - border-left: .2rem solid var(--md-accent-bg-color); - border-left-color: var(--md-accent-bg-color); - border-radius: .1rem; - border-width: thin; - box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); +@media only screen { + .md-typeset a:hover { + background-color: var(--md-typeset-a-color-bg); + color: var(--md-typeset-a-color-fg); + } + .md-footer-nav { + background-color: var(--md-default-bg-color--light); + color: var(--md-accent-fg-color--transparent) + } + .md-footer { + height: 2%; + } + .md-footer-nav__direction { + position: absolute; + right: 0; + left: 0; + margin-top: -1rem; + padding: 0 1rem; + color: var(--md-default-fg-color--light); + font-size: .64rem; + } + .md-footer-nav__title { + font-size: .9rem; + line-height: 10rem; + color: var(--md-default-fg-color--light); + } + .md-typeset h4 h5 h6 { + font-size: 1.5rem; + margin: 1em 0; + letter-spacing: -.01em; + line-height: 3em; + } + .md-typeset table:not([class]) th { + min-width: 5rem; + padding: .6rem .8rem; + color: var(--md-default-fg-color--lighter); + vertical-align: top; + background-color: var(--md-accent-bg-color); + text-align: left; + } + .md-typeset table:not([class]) td { + border-collapse: collapse; + vertical-align: center; + text-align: left; + border-bottom: 1px solid var(--md-default-fg-color--light); + } + .md-typeset code { + padding: 0 .2941176471em; + font-size: 80%; + word-break: break-word; + background-color: var(--md-code-bg-color); + border-radius: .1rem; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + } + .highlight code { + background-color: var(--md-code-bg-color); + border: 2px solid var(--md-code-border-color); + } + .md-typeset .admonition, .md-typeset details { + margin: 1.5625em 0; + padding: 0 .6rem; + overflow: visible; + font-size: .64rem; + page-break-inside: avoid; + border-left: .2rem solid var(--md-accent-bg-color); + border-left-color: var(--md-accent-bg-color); + border-radius: .1rem; + border-width: thin; + box-shadow: 0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); + } } .md-typeset__table { min-width: 100%; From dd0cb1eb8f3d9432f32be755bac2051a499a4fa6 Mon Sep 17 00:00:00 2001 From: JulioPDX Date: Thu, 21 Dec 2023 08:10:20 -0800 Subject: [PATCH 5/5] Correcting header and footer to take advantage of larger screens --- .../arista/avd/docs/stylesheets/extra.material.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css index 84f2dd3a7a5..ee4da247ca0 100644 --- a/ansible_collections/arista/avd/docs/stylesheets/extra.material.css +++ b/ansible_collections/arista/avd/docs/stylesheets/extra.material.css @@ -79,6 +79,9 @@ } } @media only screen { + .md-header__inner, .md-footer-meta__inner{ + max-width: 100%; + } .md-typeset a:hover { background-color: var(--md-typeset-a-color-bg); color: var(--md-typeset-a-color-fg);