From 54cb31c8e76515b3245bf90ffb3735ae31918b9e Mon Sep 17 00:00:00 2001 From: bogdankol <68349689+bogdankol@users.noreply.github.com> Date: Mon, 19 Feb 2024 15:53:51 +0200 Subject: Styles refactoring (#1278) --- docs/_locale/de/copyright.pot | 4 +- docs/_locale/es/copyright.pot | 4 +- docs/_locale/ja/copyright.pot | 4 +- docs/_locale/pt/copyright.pot | 4 +- docs/_locale/uk/copyright.pot | 4 +- docs/_static/css/breadcrumbs.css | 165 ++++++ docs/_static/css/code-snippets.css | 229 ++++++++ docs/_static/css/configuration/index.css | 23 + docs/_static/css/custom.css | 650 +++++++++++++++------ docs/_static/css/headers.css | 134 +++++ docs/_static/css/hints.css | 123 ++++ .../css/installation/running-on-bare-metal.css | 11 + docs/_static/css/leftSidebar.css | 371 ++++++++++++ docs/_static/css/linkButtons.css | 57 ++ docs/_static/css/lists.css | 56 ++ docs/_static/css/scrolls.css | 20 + docs/_static/css/separate-commands.css | 116 ++++ docs/_static/css/tables.css | 231 ++++++++ docs/_static/css/text.css | 120 ++++ .../_static/images/IPSec_close_action_settings.jpg | Bin 70253 -> 62330 bytes docs/_static/images/VyOS_Dual-Hub_DMVPN.png | Bin 0 -> 67747 bytes docs/_static/images/arrow-left.svg | 3 + docs/_static/images/arrow-right.svg | 3 + docs/_static/images/breadcrumbs-icon.svg | 3 + docs/_static/images/check.svg | 3 + docs/_static/images/close-sidebar-icon.svg | 3 + docs/_static/images/cmnd-link-dollar-icon.svg | 3 + docs/_static/images/cmnd-link-icon.svg | 3 + docs/_static/images/copy-code-icon.svg | 4 + docs/_static/images/github.svg | 10 + docs/_static/images/hamburger-icon.svg | 3 + docs/_static/images/note-icon.svg | 5 + .../_static/images/wireguard_site2site_diagram.jpg | Bin 21630 -> 19987 bytes docs/_static/images/zone-policy-diagram.png | Bin 126116 -> 113618 bytes docs/_static/js/codecopier.js | 67 +++ docs/_static/js/footer.js | 92 +++ docs/_static/js/sidebar.js | 162 +++++ docs/_templates/layout.html | 28 +- docs/conf.py | 4 +- docs/copyright.md | 2 +- 40 files changed, 2542 insertions(+), 182 deletions(-) create mode 100644 docs/_static/css/breadcrumbs.css create mode 100644 docs/_static/css/code-snippets.css create mode 100644 docs/_static/css/configuration/index.css create mode 100644 docs/_static/css/headers.css create mode 100644 docs/_static/css/hints.css create mode 100644 docs/_static/css/installation/running-on-bare-metal.css create mode 100644 docs/_static/css/leftSidebar.css create mode 100644 docs/_static/css/linkButtons.css create mode 100644 docs/_static/css/lists.css create mode 100644 docs/_static/css/scrolls.css create mode 100644 docs/_static/css/separate-commands.css create mode 100644 docs/_static/css/tables.css create mode 100644 docs/_static/css/text.css create mode 100644 docs/_static/images/VyOS_Dual-Hub_DMVPN.png create mode 100644 docs/_static/images/arrow-left.svg create mode 100644 docs/_static/images/arrow-right.svg create mode 100644 docs/_static/images/breadcrumbs-icon.svg create mode 100644 docs/_static/images/check.svg create mode 100644 docs/_static/images/close-sidebar-icon.svg create mode 100644 docs/_static/images/cmnd-link-dollar-icon.svg create mode 100644 docs/_static/images/cmnd-link-icon.svg create mode 100644 docs/_static/images/copy-code-icon.svg create mode 100644 docs/_static/images/github.svg create mode 100644 docs/_static/images/hamburger-icon.svg create mode 100644 docs/_static/images/note-icon.svg create mode 100644 docs/_static/js/codecopier.js create mode 100644 docs/_static/js/footer.js create mode 100644 docs/_static/js/sidebar.js (limited to 'docs') diff --git a/docs/_locale/de/copyright.pot b/docs/_locale/de/copyright.pot index d5d53a50..be71d158 100644 --- a/docs/_locale/de/copyright.pot +++ b/docs/_locale/de/copyright.pot @@ -13,8 +13,8 @@ msgid "Copyright Notice" msgstr "Copyright Notice" #: ../../copyright.md:3 -msgid "Copyright (C) 2018-2023 VyOS maintainers and contributors" -msgstr "Copyright (C) 2018-2023 VyOS maintainers and contributors" +msgid "Copyright (C) 2018-2024 VyOS maintainers and contributors" +msgstr "Copyright (C) 2018-2024 VyOS maintainers and contributors" #: ../../copyright.md:9 msgid "Permission is granted to copy and distribute modified versions of this manual under the conditions for verbatim copying, provided that the entire resulting derived work is distributed under the terms of a permission notice identical to this one." diff --git a/docs/_locale/es/copyright.pot b/docs/_locale/es/copyright.pot index b4dcfb4e..c7befa5e 100644 --- a/docs/_locale/es/copyright.pot +++ b/docs/_locale/es/copyright.pot @@ -13,8 +13,8 @@ msgid "Copyright Notice" msgstr "Aviso de copyright" #: ../../copyright.md:3 -msgid "Copyright (C) 2018-2023 VyOS maintainers and contributors" -msgstr "Copyright (C) 2018-2023 Mantenedores y colaboradores de VyOS" +msgid "Copyright (C) 2018-2024 VyOS maintainers and contributors" +msgstr "Copyright (C) 2018-2024 Mantenedores y colaboradores de VyOS" #: ../../copyright.md:9 msgid "Permission is granted to copy and distribute modified versions of this manual under the conditions for verbatim copying, provided that the entire resulting derived work is distributed under the terms of a permission notice identical to this one." diff --git a/docs/_locale/ja/copyright.pot b/docs/_locale/ja/copyright.pot index 53078f45..d64e38c0 100644 --- a/docs/_locale/ja/copyright.pot +++ b/docs/_locale/ja/copyright.pot @@ -13,8 +13,8 @@ msgid "Copyright Notice" msgstr "Copyright Notice" #: ../../copyright.md:3 -msgid "Copyright (C) 2018-2023 VyOS maintainers and contributors" -msgstr "Copyright (C) 2018-2023 VyOS maintainers and contributors" +msgid "Copyright (C) 2018-2024 VyOS maintainers and contributors" +msgstr "Copyright (C) 2018-2024 VyOS maintainers and contributors" #: ../../copyright.md:9 msgid "Permission is granted to copy and distribute modified versions of this manual under the conditions for verbatim copying, provided that the entire resulting derived work is distributed under the terms of a permission notice identical to this one." diff --git a/docs/_locale/pt/copyright.pot b/docs/_locale/pt/copyright.pot index 63b2984b..6f47ee66 100644 --- a/docs/_locale/pt/copyright.pot +++ b/docs/_locale/pt/copyright.pot @@ -13,8 +13,8 @@ msgid "Copyright Notice" msgstr "Copyright Notice" #: ../../copyright.md:3 -msgid "Copyright (C) 2018-2023 VyOS maintainers and contributors" -msgstr "Copyright (C) 2018-2023 VyOS maintainers and contributors" +msgid "Copyright (C) 2018-2024 VyOS maintainers and contributors" +msgstr "Copyright (C) 2018-2024 VyOS maintainers and contributors" #: ../../copyright.md:9 msgid "Permission is granted to copy and distribute modified versions of this manual under the conditions for verbatim copying, provided that the entire resulting derived work is distributed under the terms of a permission notice identical to this one." diff --git a/docs/_locale/uk/copyright.pot b/docs/_locale/uk/copyright.pot index 1e83545b..c2e88942 100644 --- a/docs/_locale/uk/copyright.pot +++ b/docs/_locale/uk/copyright.pot @@ -13,8 +13,8 @@ msgid "Copyright Notice" msgstr "Copyright Notice" #: ../../copyright.md:3 -msgid "Copyright (C) 2018-2023 VyOS maintainers and contributors" -msgstr "Copyright (C) 2018-2023 VyOS maintainers and contributors" +msgid "Copyright (C) 2018-2024 VyOS maintainers and contributors" +msgstr "Copyright (C) 2018-2024 VyOS maintainers and contributors" #: ../../copyright.md:9 msgid "Permission is granted to copy and distribute modified versions of this manual under the conditions for verbatim copying, provided that the entire resulting derived work is distributed under the terms of a permission notice identical to this one." diff --git a/docs/_static/css/breadcrumbs.css b/docs/_static/css/breadcrumbs.css new file mode 100644 index 00000000..bdc91993 --- /dev/null +++ b/docs/_static/css/breadcrumbs.css @@ -0,0 +1,165 @@ +.wy-breadcrumbs { + + & > li, + & > li a { + color: #636A6D; + font-family: 'Roboto', sans-serif; + font-weight: 500; + letter-spacing: -0.5px; + height: 26px; + } + + & > li a { + padding: 0 5px 0 0; + } + + & > li:nth-child(1) { + visibility: hidden; + position: relative; + padding-left: 0; + } + + & > li > .icon-home::after { + content: url('../images/breadcrumbs-icon.svg'); + visibility: visible; + top: 6px; + position: absolute; + } + + & > li > .icon-home::before { + padding-right: 0; + content: 'Home'; + visibility: visible; + font-family: 'Roboto', sans-serif; + letter-spacing: -0.5px; + font-weight: 500; + } + + & > li:nth-child(n + 1) { + font-weight: 500; + position: relative; + } + + & > li:nth-child(n + 1)::before { + display: none; + } + + & > li:nth-last-child(2) { + color: #121010; + } + + & > li:nth-last-child(2)::after, + & > li:nth-last-child(1)::after { + display: none !important + } + + & > li:nth-child(n + 1)::after { + content: url('../images/breadcrumbs-icon.svg'); + top: 0; + position: absolute; + width: 20px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + } + + & > li:last-of-type:has(a), + & > li:last-of-type:has(a) a { + font-family: 'Archivo', sans-serif; + font-size: 14px; + font-weight: 700; + letter-spacing: -0.02em; + color: #fff; + background-color: #121010; + display: flex; + align-items: center; + } + + & > li:last-of-type:has(a) { + padding: 7px 10px; + border-radius: 4px; + height: 30px; + } + + & > li:last-of-type:has(a) a { + max-height: 100%; + } + + & > li:last-of-type:has(a) a::before { + content: url('../images/github.svg'); + margin-right: 4px; + display: flex; + align-items: center; + } + + & > li:last-of-type::before { + display: none; + } +} + +@media screen and (max-width: 375px) { + + .wy-breadcrumbs { + & > li > .icon-home::after { + right: -2px; + } + + & > li:nth-child(n + 1)::after { + right: -13px; + } + } + + .wy-breadcrumbs > li { + padding: 5px 5px 5px 0; + } + + .wy-breadcrumbs > li, + .wy-breadcrumbs > li a { + font-size: 14px; + } + + .wy-breadcrumbs > li > .icon-home::before { + font-size: 14px; + } +} + +@media screen and (min-width: 376px) { + .wy-breadcrumbs { + & > li > .icon-home::after { + right: -8px; + } + + & > li:nth-child(n + 1)::after { + right: -13px; + } + } + + .wy-breadcrumbs > li { + padding: 5px 5px 5px 10px; + } + + .wy-breadcrumbs > li, + .wy-breadcrumbs > li a { + font-size: 16px; + } + + .wy-breadcrumbs > li > .icon-home::before { + font-size: 16px; + } +} + +@media screen and (max-width: 991px) { + li.wy-breadcrumbs-aside { + display: none !important; + } +} + +@media screen and (max-width: 1200px) { + ul.wy-breadcrumbs:has(li + li + li + li) li.wy-breadcrumbs-aside { + margin: 24px 0 16px; + max-width: 140px; + float: none; + } +} diff --git a/docs/_static/css/code-snippets.css b/docs/_static/css/code-snippets.css new file mode 100644 index 00000000..0ae5464d --- /dev/null +++ b/docs/_static/css/code-snippets.css @@ -0,0 +1,229 @@ +.rst-content { + & div[class^=highlight], + & pre.literal-block { + border: none; + background: linear-gradient(#FF9000, #FFBF12); + border-radius: 8px; + padding-left: 5px; + } + + & div[class^=highlight] div[class^=highlight], + & pre.literal-block div[class^=highlight] { + background: #525659 !important; + border-radius: 0; + border: none; + padding: 0; + position: relative; + } + + & .linenodiv pre, + & div[class^=highlight] pre, + & pre.literal-block { + font-size: 16px; + font-family: 'Roboto Mono', monospace; + font-weight: 400; + letter-spacing: -0.04em; + color: #fff; + line-height: 1.2; + overflow-x: scroll; + scroll-behavior: smooth; + } + + & .linenodiv pre::-webkit-scrollbar, + & div[class^=highlight] pre::-webkit-scrollbar, + & pre.literal-block::-webkit-scrollbar { + height: 3px; + color: #99A0A5 transparent; + } + + & .linenodiv pre::-webkit-scrollbar-track, + & div[class^=highlight] pre::-webkit-scrollbar-track, + & pre.literal-block::-webkit-scrollbar-track { + background-color: transparent; + border-radius: 8px; + margin: 0 18px; + } + + & .linenodiv pre::-webkit-scrollbar-thumb, + & div[class^=highlight] pre::-webkit-scrollbar-thumb, + & pre.literal-block::-webkit-scrollbar-thumb { + background-color: #99A0A5; + border-radius: 8px; + margin: 0 10px; + } + +} + +/* copy code div */ +.highlight > .copyDiv { + display: flex; + align-items: center; + transition: transform linear 250ms, width linear 250ms; + bottom: 0; + right: 0; + width: 100%; + padding: 5px 12px; + justify-content: end; + background-color: #393C3F; + height: 32px; + margin-top: 4px; +} + +.copiedNotifier > span { + font-size: 14px !important; + color: #fff !important; + text-align: center; + margin-bottom: 0; +} + +.highlight { + + & .kn { + color: #ccffda; + } + + & .nn { + color: #d0eefb; + } + + & .o { + color: #e6e6e6; + } + + & .s2 { + color: #dbe6f0; + } + + & .s1 { + color: #dbe6f0; + } + + & .nb { + color: #ccffda; + } + + & .c1 { + color: #dcebef; + font-style: italic; + } + + & .nt { + color: #8db1fe; + font-weight: bold; + } + + & .k { + color: #ccffda; + font-weight: bold; + } + + & .se { + color: #dbe6f0; + font-weight: bold; + } + + & .nv { + color: #eed7f4; + } + + & .gh { + color: #ccccff; + font-weight: bold; + } + + & .gd { + color: #ffcccc; + } + + & .gi { + color: #ccffcc; + } + + & .gu { + color: #ffc2ff; + font-weight: bold; + } + + & .na { + color: #81c0ff; + } + + & .s { + color: #dbe6f0; + } + + & .ni { + color: #f4d4cd; + font-weight: bold; + } + + & .cm { + color: #d5e7ec; + font-style: italic; + } + + & .cp { + color: #c2ffd3; + } + + & .mi { + color: #cef3e0; + } + + & .nf { + color: #c5d4fc; + } + + & .kc { + color: #c2ffd3; + font-weight: bold; + } + + & .ch { + color: #d5e7ec; + font-style: italic; + } + + & .mf { + color: #d6f5e6; + } + + & .go { + color: #e6e6e6; + } + + & .m { + color: #d6f5e6; + } +} + +.rst-content blockquote { + margin: 0 +} + +@media screen and (max-width: 991px) { + .rst-content .linenodiv pre, + .rst-content div[class^=highlight] pre, + .rst-content pre.literal-block { + padding: 16px 20px; + } + + .copyDiv > p { + margin: 0 10px 0 0; + color: #fff; + font-family: 'Roboto', sans-serif; + font-size: 14px; + } +} + +@media screen and (min-width: 992px) { + .rst-content .linenodiv pre, + .rst-content div[class^=highlight] pre, + .rst-content pre.literal-block { + padding: 24px 36px 18px; + } + + .copyDiv > p { + display: none; + } +} diff --git a/docs/_static/css/configuration/index.css b/docs/_static/css/configuration/index.css new file mode 100644 index 00000000..a759ea45 --- /dev/null +++ b/docs/_static/css/configuration/index.css @@ -0,0 +1,23 @@ +#configuration-guide > div > ul > li { + list-style: none !important; + position: relative; +} + +#configuration-guide > div > ul > li::before { + content: ''; + position: absolute; + top: 9px; + left: -15px; + width: 6px; + height: 6px; + background-color: #000; + border-radius: 50%; +} + +#configuration-guide .toctree-l1 > a { + color: #FD8F01; + font-family: 'Roboto', sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: -0.5px; +} \ No newline at end of file diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css index e934fb54..cdb036d2 100644 --- a/docs/_static/css/custom.css +++ b/docs/_static/css/custom.css @@ -1,215 +1,535 @@ -div.card-header { - font-weight: bold; - background: #fdab10; -} - -span.opcmd, -span.cfgcmd { - font-weight: bold; - background-color: transparent; - border: none; - padding: 0; - font-size: 100% !important; - max-width: 100%; - color: #000; - font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace; -} - -span.cfgcmd:before { - content: "#"; - margin-right: 0px; -} - -td a.cmdlink span.cfgcmd:before, -td a.cmdlink span.opcmd:before { - content: ""; +p.devwarning { + top: 10px; + position: sticky; + margin: 10px 10px 10px 310px; + padding: 5px 10px; + border-radius: 4px; + letter-spacing: 1px; + color: #000; + text-align: center; + background: #d40 + repeating-linear-gradient( + 135deg, + transparent, + transparent 56px, + rgba(255, 255, 255, 0.2) 56px, + rgba(255, 255, 255, 0.2) 112px + ); + background-color: #fdab10; +} + +/* main page */ +.wy-body-for-nav { + background: #fff; + overflow-y: hidden +} + +.wy-grid-for-nav { + margin: 0 auto; + position: relative; + padding-top: 80px; + display: flex; + + &:has(nav.wy-nav-side.shift) { + background: #E7E7E7; + } + + &:not(:has(nav.shift)) > section > div.overlay { + background-color: transparent + } + + &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::before, + &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::after, + &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::before, + &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::after { + background-color: #fff; + } +} + +.wy-nav-content-wrap { + width: 100%; + margin-left: auto; + background-color: transparent; } -td a.cmdlink, -td a.cmdlink { - margin-left: 0px; -} +.wy-nav-content { + max-width: 100%; + background-color: transparent; + + &.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::before, + &.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::after, + &.overlay > div > div[role=navigation] .wy-breadcrumbs > li::before, + &.overlay > div > div[role=navigation] .wy-breadcrumbs > li::after, + &.overlay > div > div.document div.sd-card, + &.overlay > div > div.document div.sd-card-title { + background-color: #E7E7E7; + } + + &.overlay > div.rst-content > footer > .rst-footer-buttons > a { + background-color: #E7E7E7 !important; + } + +} + +/* main-page content */ +#vyos-user-guide { + & .sd-container-fluid { + padding-left: 0; + padding-right: 0; + } + + & .sd-container-fluid > .docutils > .sd-col { + max-width: 387px; + box-shadow: none; + flex: none; + width: 100% !important; + padding: 0 !important; + margin-top: 0 !important; + + & .sd-card-body .sd-card-text { + min-height: 120px; + } + } + + & > div.sd-container-fluid { + margin-top: 30px; + + & > div.docutils { + margin: 0; + display: grid; + } + } + + & > .pb-4 { + padding-bottom: 1.4rem !important; + } +} + +div.sd-card-title { + font-weight: bold; + background: #fff; + border: none; + font-family: 'Archivo', sans-serif; +} + +.sd-card { + background: #fff; + border: none; + border-bottom: 1px solid #ffae12; + border-radius: 0; + box-shadow: none !important; +} + +.sd-card-body { + padding: 0; +} + +.sd-card-title, +.sd-card-text { + padding: 0; +} + +.internal > .std-ref, +.line > .external { + color: #fd8f01; + font-family: 'Roboto', sans-serif; + font-size: 16px; + letter-spacing: -0.5px; + font-weight: 400; +} + +img { + height: auto !important; + border: 1px solid #C4C9CC; + margin-bottom: 20px !important; + border-radius: 8px; +} + +footer { + text-align: center; + font-family: 'Roboto', sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: -0.5px; + color: #636a6d; + + & > a { + color: #fd8f01; + font-family: 'Roboto', sans-serif; + font-size: 16px; + letter-spacing: -0.5px; + font-weight: 400; + } + + & > hr { + display: none; + } + + & p { + margin-top: 105px; + text-align: center; + font-family: 'Roboto', sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: -0.5px; + color: #636a6d; + + &:has(a) > a, + &:has(a) > a:visited { + color: #636a6d; + } + } + +} + +.rst-versions { + position: static; + background: transparent; + width: 262px; + display: block; + + &.shift-up { + background: #525659; + z-index: 100; + position: absolute; + left: 19px; + bottom: 30px; + border-radius: 6px; + overflow: hidden; + } + + & .rst-current-version { + background-color: #525659; + color: #01D38E; + border-radius: 6px; + width: 264px; + font-family: 'Roboto', sans-serif; + letter-spacing: -0.5px; + } + + & .rst-current-version span.fa-book { + color: #fff !important; + font-family: 'Roboto', sans-serif; + letter-spacing: -0.5px; + } +} + +.rst-other-versions { + & dt { + color: #808080; + font-family: 'Roboto', sans-serif; + font-size: 16px; + letter-spacing: -0.5px; + } + + & small { + font-family: 'Roboto', sans-serif; + color: #fff; + + & a { + font-family: 'Roboto', sans-serif; + letter-spacing: -0.5px; + color: #fd8f01; + } + } + +} + +div#rtd-sidebar { + display: none; +} + +.wy-nav-content-opened-sidebar { + padding: 25px 0 27px 40px; +} + +.wy-nav-content-wrap-opened-sidebar { + max-width: calc(100% - 294px); + margin-left: 294px; +} + +.wy-nav-content-closed-sidebar { + padding: 26px 0 !important; +} + +.wy-nav-content-wrap-closed-sidebar { + max-width: 100% !important; + width: 100% !important; +} + +html { + scroll-padding-top: 90px !important; +} + +.overlayDiv { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + z-index: 111; + background-color: #121010; + opacity: 0.1; +} + +.iframe-container { + position: relative; + width: 100%; + background-color: #f0f0f0; + z-index: 201; + overflow: hidden; + + &::-webkit-scrollbar { + display: none; + } + + & iframe { + width: 100%; + height: 100%; + border: none; + overflow: hidden; + + &::-webkit-scrollbar { + display: none; + } + } + +} + +@media screen and (min-width: 320px) and (max-width: 575px) { + #vyos-user-guide .container > .row { + grid-gap: 0px 15px + } +} + +@media screen and (max-width: 575px) { + .wy-nav-content-wrap, + .wy-nav-content-wrap.shift { + max-width: 100%; + width: 100% + } + + .wy-nav-content-wrap.shift { + padding: 70px 15px 0; + overflow: auto; + } + + .wy-nav-side { + display: none; + min-height: unset; + } + + .wy-nav-side.shift { + display: inherit; + width: 100%; + max-width: 320px; + } -tr td p { - margin-bottom:0px - } + #vyos-user-guide .container > .docutils > .p-2 { + max-width: 100%; + &:nth-child(2n) { + margin-left: 0; + } -span.opcmd:before { - content: "$"; - margin-right: 0px; -} + & .card-body .card-text { + min-height: 80px; + } + } -.cfgcmd-heading { - display: inline-block; - margin: 6px 0; - font-size: 90%; - line-height: normal; - background: #f0d481; - color: #2980B9; - border-top: solid 3px #6ab0de; - border-top-width: 3px; - border-top-style: solid; - border-top-color: #FF9302; - padding: 6px; -} + .wy-nav-content-wrap-opened-sidebar { + max-width: 100%; + margin-left: unset; + } -.opcmd-heading { - display: inline-block; - margin: 6px 0; - font-size: 90%; - line-height: normal; - background: #e7f2fa; - color: #2980B9; - border-top: solid 3px #6ab0de; - border-top-width: 3px; - border-top-style: solid; - border-top-color: rgb(106, 176, 222); - padding: 6px; -} + dl.footnote > dt { + padding-left: 0 !important; + } -.opcmd-body, -.cfgcmd-body { - margin: 6px 0; - padding-left: 12px; + .wy-grid-for-nav { + padding: 80px 20px 0; + max-width: 738px; + } +} + +@media screen and (min-width: 575px) and (max-width: 768px) { + .wy-nav-content-wrap, + .wy-nav-content-wrap.shift { + max-width: 100%; + width: 100% + } + + .wy-nav-content-wrap.shift { + padding: 70px 15px 0; + overflow: auto; + width: calc(100% - 294px); + + } + + .wy-nav-side { + display: none; + min-height: unset; + } + + .wy-nav-side.shift { + display: inherit; + width: 294px; + } +} + +@media screen and (min-width: 575px) { + #vyos-user-guide div.sd-container-fluid > div.docutils { + grid-gap: 30px; + grid-template-columns: 1fr 1fr; + } } +@media screen and (max-width: 767px) { + .wy-nav-content-wrap, + .wy-nav-content-wrap.shift { + margin: 0 auto; + } + .wy-nav-top { + background-color: #fdab10; + } -.cfgcmd-heading .cmdlink:after, -.opcmd-heading .cmdlink:after{ - content: ""; - font-family: FontAwesome -} - + p.devwarning { + margin: 10px 10px 10px 10px; + } -.cfgcmd-heading:not(:hover) .cmdlink, -.opcmd-heading:not(:hover) .cmdlink { - display: none; -} + #vyos-user-guide .container { + max-width: none; + } -.defaultvalue{ - font-size: 90%; - color: gray; - margin-bottom: 5px; + .wy-nav-content-wrap .wy-nav-content { + padding: 0 0 26px 0; + } -} + .wy-grid-for-nav { + padding: 80px 15px 0; + max-width: 738px; + } -a.cmdlink { - font-size: 80%; - margin-left: 6px; + .rst-content > div > hr { + display: none; + } } -a.cmdlink span{ - color: #2980B9; -} +@media screen and (min-width: 768px) { + .wy-nav-content-wrap { + width: calc(100% - 292px); + } -a.cmdlink span:hover{ - color: #3091d1; + .rst-content > div > hr { + margin: 16px 0 26px 0; + } } -.wy-nav-content { - max-width : none; -} +@media screen and (min-width: 768px) and (max-width: 991px) { + .wy-nav-content { + padding: 25px 0 27px 40px; + } -.wy-tray-container li.wy-tray-item-info { - background : #409ad5; -} + .wy-nav-content-wrap { + max-width: calc(100% - 294px); + } -.wy-table-responsive { - overflow : visible !important; + .wy-grid-for-nav { + max-width: 738px; + padding: 70px 15px 0; + } } -.wy-table-responsive table td { - white-space : normal !important; -} +@media screen and (min-width: 992px) and (max-width: 1266px) { + .wy-nav-content { + padding: 25px 0 27px 40px; + } -.wy-menu-vertical header, -.wy-menu-vertical p.caption { - color : #ffcc00 !important; -} + .wy-nav-content-wrap { + max-width: calc(100% - 294px); + } -.wy-menu-vertical li.current a { - color : #040077 !important; + .wy-grid-for-nav { + max-width: calc(100% - 130px); + } } -.wy-menu-vertical li ul li a { - color : #ffffff !important; -} +@media screen and (min-width: 1266px) { + .wy-nav-content { + padding: 25px 0 27px 40px; + } -.wy-menu-vertical a { - color : #ffffff !important; -} + .wy-nav-content-wrap { + max-width: calc(100% - 294px); + } -.wy-menu-vertical a:active { - background-color : #409ad5 !important; + .wy-grid-for-nav { + max-width: 1140px; + } } -.wy-side-nav-search { - background-color : #ffffff !important; -} +@media screen and (min-width: 1500px) { + .wy-nav-content { + padding: 25px 0 27px 40px; + } -.wy-side-nav-search img { - background-color : #ffffff !important; -} + .wy-nav-content-wrap { + max-width: calc(100% - 294px); + } -.wy-side-nav-search > div.version { - color : #000000 !important; + .wy-grid-for-nav { + max-width: 1340px; + } } -.wy-side-nav-search>a, -.wy-side-nav-search .wy-dropdown>a { - color:#000000; - font-size:100%; - font-weight:bold; - display:inline-block; - padding:4px 6px; - margin-bottom:.809em -} +@media screen and (max-height: 500px) { + .rst-versions { + margin-top: 10px; + } -.wy-nav-top { - background-color : #ffffff; + .closeButtonDivLine { + bottom: 45px; + } } -.wy-nav-top img { - background-color : #000000 !important; -} +@media screen and (min-height: 501px) and (max-height: 1000px) { + .rst-versions { + margin-top: 10px; + } -.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-ok, -.rst-content table.docutils td.coverage-ok { - color: green; - text-align: center; + .closeButtonDivLine { + bottom: 55px; + } } -.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail, -.rst-content table.docutils td.coverage-fail { - color: red; - text-align: center; +@media screen and (min-height: 1001px) and (max-height: 1300px) { + .rst-versions { + margin-top: 10px; + } + .closeButtonDivLine { + bottom: 60px; + } } +@media screen and (min-height: 1301px) and (max-height: 1600px) { + .rst-versions { + margin-top: 25px; + } -p.devwarning { - top: 10px; - position: sticky; - margin: 10px 10px 10px 310px; - padding: 5px 10px; - border-radius: 4px; - letter-spacing: 1px; - color: #000; - text-align: center; - background: #d40 repeating-linear-gradient( 135deg, transparent, transparent 56px, rgba(255, 255, 255, 0.2) 56px, rgba(255, 255, 255, 0.2) 112px ); - background-color: #fdab10; + .closeButtonDivLine { + bottom: 75px; + } } +@media screen and (min-height: 1601px) { + .rst-versions { + margin-top: 35px; + } -@media screen and (max-width: 768px) { - .wy-nav-top{ - background-color: #fdab10; - } -} - -@media screen and (max-width: 768px) { - p.devwarning { - margin: 10px 10px 10px 10px; - } + .closeButtonDivLine { + bottom: 85px; + } } \ No newline at end of file diff --git a/docs/_static/css/headers.css b/docs/_static/css/headers.css new file mode 100644 index 00000000..48b78a41 --- /dev/null +++ b/docs/_static/css/headers.css @@ -0,0 +1,134 @@ +h1, +h2, +h3, +h4, +h5 { + font-family: 'Archivo', sans-serif !important; + font-weight: 700 !important; + letter-spacing: -0.02em !important; + display: flex; + color: #121010; + margin-bottom: 15px !important; +} + +h2, +h3, +h4, +h5 { + margin-top: 15px !important; +} + +h1:has(a) > a, +h2:has(a) > a, +h3:has(a) > a, +h4:has(a) > a, +h5:has(a) > a { + display: flex !important; + position: relative; + padding-left: 5px; +} + +@media screen and (max-width: 767px) { + h1 { + font-size: 28px !important; + } + + h2 { + font-size: 22px !important; + } + + h3 { + font-size: 20px !important; + } + + h4 { + font-size: 18px !important; + } + + h5 { + font-size: 16px !important; + } +} + +@media screen and (min-width: 768px) { + h1 { + font-size: 48px !important; + } + + h2 { + font-size: 34px !important; + } + + h3 { + font-size: 24px !important; + } + + h4 { + font-size: 22px !important; + } + + h5 { + font-size: 20px !important; + } +} + +@media screen and (max-width: 991px) { + h1 { + margin-top: 15px; + } + + a.headerlink { + opacity: 1 !important; + color: transparent; + } + + h1:has(a):hover > a::after, + h2:has(a):hover > a::after, + h3:has(a):hover > a::after, + h4:has(a):hover > a::after, + h5:has(a):hover > a::after { + content: none !important; + display: none !important; + } + + h1:has(a) > a::before, + h2:has(a) > a::before, + h3:has(a) > a::before, + h4:has(a) > a::before, + h5:has(a) > a::before { + content: url('../images/cmnd-link-icon.svg'); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 25%; + height: 100%; + width: 20px; + z-index: 2; + background-color: transparent; + } +} + +@media screen and (min-width: 992px) { + h1:has(a):hover > a::after, + h2:has(a):hover > a::after, + h3:has(a):hover > a::after, + h4:has(a):hover > a::after, + h5:has(a):hover > a::after { + content: url('../images/cmnd-link-icon.svg'); + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + height: 100%; + width: 20px; + z-index: 2; + background-color: transparent; + } + + a.headerlink { + color: transparent; + } +} + diff --git a/docs/_static/css/hints.css b/docs/_static/css/hints.css new file mode 100644 index 00000000..fd7553f5 --- /dev/null +++ b/docs/_static/css/hints.css @@ -0,0 +1,123 @@ +div { + &.note, + &.hint, + &.warning, + &.error, + &.seealso, + &.tip { + border-radius: 8px; + + & > .admonition-title { + padding: 5px 8px; + border-radius: 6px; + font-family: 'Archivo', sans-serif !important; + font-size: 14px !important; + letter-spacing: -0.02em !important; + font-weight: 600 !important; + margin: -12px -16px 12px; + } + + & > .admonition-title::before { + content: url('../images/note-icon.svg'); + } + + & > .highlight-none { + margin-top: 10px; + } + + & > p:nth-child(1n+2) { + font-family: 'Roboto', sans-serif; + font-size: 16px; + letter-spacing: -0.5px; + color: #525659; + font-weight: 400; + margin: 10px 0 0 0 !important; + } + } + + &.note, + &.seealso { + background-color: #F5FCFF !important; + } + + &.note:has(a.reference), + &.hint:has(a.reference), + &.warning:has(a.reference), + &.error:has(a.reference), + &.seealso:has(a.reference), + &.tip:has(a.reference) { + & a.reference, + & a.reference span { + color: #508EEB !important; + } + } + + &.note, + &.seealso { + & > .admonition-title { + background-color: #CCEFFB !important; + color: #356E81 !important; + } + } + + &.hint, + &.tip { + background-color: #F7FDFB !important; + + & > .admonition-title { + background-color: #C6F0E3 !important; + color: #3F6461 !important; + } + } + + &.warning, + &.error { + background-color: #FDF7F7 !important; + + & > .admonition-title { + background-color: #F0C6C6 !important; + color: #8E2F2F !important; + } + } + +} + +#running-on-bare-metal div.note > p:nth-child(2) { + padding: 8px 12px 0 12px; +} + +@media screen and (max-width: 575px) { + div.note, + div.hint, + div.warning, + div.error, + div.seealso, + div.tip { + padding: 24px 32px !important; + border-radius: 8px; + } +} + +@media screen and (min-width: 576px) and (max-width: 991px) { + div.note, + div.hint, + div.warning, + div.error, + div.seealso, + div.tip { + padding: 24px 32px !important; + border-radius: 8px; + } +} + +@media screen and (min-width: 992px) { + div.note, + div.hint, + div.warning, + div.error, + div.seealso, + div.tip { + padding: 24px 32px !important; + border-radius: 8px; + } +} diff --git a/docs/_static/css/installation/running-on-bare-metal.css b/docs/_static/css/installation/running-on-bare-metal.css new file mode 100644 index 00000000..25ad7bbb --- /dev/null +++ b/docs/_static/css/installation/running-on-bare-metal.css @@ -0,0 +1,11 @@ +.toctree-l1 { + background-color: transparent; +} + +.current > .current > .internal { + background-color: #fff; + color: #FD8F01; + border: transparent; + padding: 11px 12px 11px 28px; + border: none !important; +} \ No newline at end of file diff --git a/docs/_static/css/leftSidebar.css b/docs/_static/css/leftSidebar.css new file mode 100644 index 00000000..87112121 --- /dev/null +++ b/docs/_static/css/leftSidebar.css @@ -0,0 +1,371 @@ +nav.wy-nav-side { + padding-bottom: 1em !important; +} + +.wy-nav-side { + padding: 20px 19px; + width: 294px; + height: calc(100vh - 50px); +} + +.wy-form input { + height: 32px; +} + +.wy-form input::placeholder { + font-family: 'Archivo', sans-serif; + font-weight: 400; + font-size: 14px; + letter-spacing: -0.02em; +} + +.wy-side-nav-search { + width: 100%; + padding: 0; + margin-bottom: 0; + + & > .icon-home, + & > .version { + display: none + } + + & input { + border-color: #C4C9CC; + + &::placeholder { + color: #8D9499; + } + } +} + +.wy-nav-side, +.wy-nav-side .wy-side-nav-search { + background-color: #F6F7F7 +} + +ul.current > li.toctree-l1[aria-expanded=false] > a.current { + padding-left: 25px; + color: #FD8F01; + + & button.toctree-expand::before { + content: '+'; + color: #FD8F01; + } +} + +ul.current > li.toctree-l1[aria-expanded=false] > a.internal:has( + ul[aria-expanded=false]) { + padding-left: 25px; + color: #FD8F01; + + & button.toctree-expand::before { + content: '+'; + color: #FD8F01; + } +} + +ul.current > li.toctree-l1.current > ul > li.toctree-l2[aria-expanded=false]:has(ul > li > a.current) > a.internal { + color: #FD8F01; + padding-top: 11px; + padding-bottom: 11px; + padding-right: 12px; +} + +ul.current > li.toctree-l1.current > + ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false] + > a.current { + color: #FD8F01; + padding-top: 11px; + padding-bottom: 11px; + padding-right: 12px; +} + +ul.current > li.toctree-l1.current > + ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false]:has(ul > li.toctree-l4 > a.current) + > a.internal { + color: #FD8F01; + padding-top: 11px; + padding-bottom: 11px; + padding-right: 12px; +} + +.toctree-l2 > ul > li.toctree-l3.current { + padding-left: 0 !important; + background-color: #fff; +} + +.wy-menu-vertical { + width: 100%; + max-width: 292px; + + & a { + color: #121010; + font-family: 'Archivo', sans-serif; + font-weight: 500; + font-size: 14px; + letter-spacing: -0.02em; + padding: 11px 12px; + } + + & p.caption { + color: #8D9499; + font-family: 'Archivo', sans-serif; + font-weight: 600; + font-size: 14px; + letter-spacing: -0.02em; + padding: 5px 12px; + margin-top: 6px; + margin-bottom: 4px; + text-transform: none; + } + + & li.toctree-l1.current > a { + background-color: #fff; + color: #FD8F01; + border: transparent; + padding: 11px 12px; + } + + & > ul.current > li.toctree-l1.current > a.internal:has(+ ul) { + padding-left: 25px !important; + } + + & > ul.current > li.toctree-l1.current > a.current { + padding-left: 12px; + } + + & li.toctree-l1.current .toctree-l2 > a { + background-color: #fff; + border: transparent; + } + + & li.toctree-l1.current .toctree-l2 > a.internal { + padding-left: 35px !important; + } + + & li.toctree-l1.current .toctree-l2.current > a.internal:first-of-type { + color: #fdab10; + } + + & li.toctree-l1.current .toctree-l2 > a:hover { + background-color: #E1E4E5; + } + + & li.toctree-l1.current .toctree-l2 > a.current { + color: #fdab10; + padding: 11px 12px 11px 35px; + } + + & li.toctree-l1.current .toctree-l2 > a:hover { + background-color: #E1E4E5; + } + + & li.toctree-l2.current > a, + & li.toctree-l2.current li.toctree-l3 > a { + background: #fff; + border: none; + padding-left: 50px; + } + + & li.toctree-l2.current li.toctree-l3 > a.current, + & li.toctree-l2.current li.toctree-l3.current > a.internal { + padding-left: 50px !important; + color: #fdab10; + } + + & li.toctree-l3.current li.toctree-l4 > a { + background: #fff; + padding-left: 65px !important; + border-right: none; + } + + & li.toctree-l3.current li.toctree-l4 > a.current { + color: #fdab10; + } +} + +.wy-menu-vertical a:hover, +.wy-menu-vertical > ul.current > li.toctree-l1.current > a:hover, +.wy-menu-vertical li.toctree-l1.current .toctree-l2 > a:hover, +.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a:hover, +.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a:hover { + background-color: #E1E4E5; +} + +.wy-menu-vertical ul li .current > a { + padding: 11px 12px !important; +} + +.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:has(a[aria-expanded=false]) > a { + padding-left: 25px; +} + +.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:not(:has( ~ li:only-child a)) > a:has(.toctree-expand) { + padding-left: 25px; +} + +.wy-side-scroll { + /* that makes scroll possible to the end of div */ + height: 94%; +} + +.wy-nav-top { + display: none; +} + +.openLeftSidebarMenuButton { + width: 24px; + height: 24px; + cursor: pointer; + transition: transform 250ms linear; +} + +.openLeftSidebarMenuButton:hover, +.closeLeftSidebarMenuButton:hover { + transform: scale(1.05); +} + +div.wy-nav-content > div.rst-content > div:has(div.openLeftSidebarMenuButton) { + display: flex; +} + +div.wy-nav-content + > div.rst-content + > div:has(div.openLeftSidebarMenuButton) + > .wy-breadcrumbs { + margin-left: 20px; + width: 100%; +} + +.closeButtonDivLine { + width: 100%; + display: flex; + position: sticky; + height: 30px; + justify-content: flex-end; +} + +.closeLeftSidebarMenuButton { + width: 83px; + height: 32px; + margin-right: -6px; + display: flex; + justify-content: center; + align-items: center; + background-color: #FFBF12; + border-radius: 4px; + font-family: 'Roboto', sans-serif; + font-size: 16px; + letter-spacing: -0.5px; + font-weight: 400; + color: #FFF; + cursor: pointer; + align-self: flex-end; + transition: transform 250ms linear; + + &::before { + content: url('../images/close-sidebar-icon.svg'); + height: 100%; + display: flex; + align-items: center; + width: 14px; + margin-right: 10px; + margin-top: 3px; + } +} + +.additionalStylesForShift { + display: block !important; + padding-bottom: 10px !important; +} + +.overlay { + background-color: #E7E7E7; +} + +.wy-body-for-nav:has(.overlay) { + background-color: rgb(209,209,209); +} + +.display_none { + display: none !important; +} + +@media screen and (max-width: 575px) { + .wy-menu-vertical { + padding: 10px 0 0 0; + } +} + +@media screen and (min-width: 576px) { + .wy-side-nav-search { + max-width: 256px; + } + + .wy-menu-vertical { + padding: 10px 35px 0 0; + } +} + +@media screen and (max-width: 767px) { + .wy-nav-side { + border-radius: 0; + position: fixed; + top: 60px; + } + + .wy-side-scroll::-webkit-scrollbar { + display: none + } +} + +@media screen and (min-width: 768px) { + .wy-nav-side { + border-radius: 16px; + position: fixed; + left: unset; + top: 70px; + min-height: unset; + } +} + +@media screen and (max-width: 1200px) { + .wy-nav-side { + height: calc(100vh - 60px); + } +} + +@media screen and (min-width: 1200px) { + .wy-nav-side { + height: calc(100vh - 73px); + } +} + +@media screen and (max-height: 300px) { + .wy-side-scroll { + height: 78%; + } +} + +@media screen and (min-height: 301px) and (max-height: 400px) { + .wy-side-scroll { + height: 82%; + } +} + +@media screen and (min-height: 401px) and (max-height: 500px) { + .wy-side-scroll { + height: 88%; + } +} + +@media screen and (min-height: 501px) and (max-height: 700px) { + .wy-side-scroll { + height: 90%; + } +} + +@media screen and (min-height: 701px) { + .wy-side-scroll { + height: 94%; + } +} \ No newline at end of file diff --git a/docs/_static/css/linkButtons.css b/docs/_static/css/linkButtons.css new file mode 100644 index 00000000..11a48e64 --- /dev/null +++ b/docs/_static/css/linkButtons.css @@ -0,0 +1,57 @@ +.rst-footer-buttons { + .fa-arrow-circle-left { + padding-left: 25px; + } + + .fa-arrow-circle-left::before { + content: url('../images/arrow-left.svg'); + position: absolute; + top: 10px; + left: 15px; + } + + & > .btn-neutral { + background: #fff !important; + min-width: 90px; + height: 40px; + border: 2px solid #FD8F01; + color: #121010 !important; + font-family: 'Archivo', sans-serif; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.02em; + position: relative; + text-align: left; + box-shadow: none; + transition: transform 250ms linear; + display: flex; + align-items: center; + padding-top: 0; + padding-bottom: 0; + border-radius: 4px; + + &:hover, + &:active { + transform: scale(1.05); + /* padding-left: 16px; */ + } + + &:focus { + outline: none; + } + + .fa-arrow-circle-right::before { + content: url('../images/arrow-right.svg'); + position: absolute; + top: 10px; + right: 15px; + } + } +} + +p > a.reference.external, +p > a, +#partaker-i5 > p > a.external { + color: #FD8F01; + word-break: break-word; +} diff --git a/docs/_static/css/lists.css b/docs/_static/css/lists.css new file mode 100644 index 00000000..140663c9 --- /dev/null +++ b/docs/_static/css/lists.css @@ -0,0 +1,56 @@ +.simple > li, +.compound > ul > li, +.simple > li > ul > li, +#installation-and-image-management > div > ul > li.toctree-l1 > ul > li.toctree-l2, +#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2, +#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3, +#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2, +#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3, +#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2, +#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3, +#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2, +#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3 { + list-style: none !important; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 8px; + left: -15px; + width: 6px; + height: 6px; + background-color: #000; + border-radius: 50%; + } +} + +.simple > li a, +.compound > ul > li a, +.simple > li > ul > li a { + color: #FD8F01; + font-family: 'Roboto', sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: -0.5px; + height: 26px; +} + +.simple > li > ul > li p { + color: #525659; + font-family: 'Roboto', sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: -0.5px; + height: 26px; +} + +#site-to-site ul, +#troubleshooting ol, +#troubleshooting ul { + margin-bottom: 0 !important; +} + +.rst-content:has(#troubleshooting) .rst-footer-buttons { + margin-top: 20px !important; +} \ No newline at end of file diff --git a/docs/_static/css/scrolls.css b/docs/_static/css/scrolls.css new file mode 100644 index 00000000..26cfe413 --- /dev/null +++ b/docs/_static/css/scrolls.css @@ -0,0 +1,20 @@ +.wy-table-responsive { + scrollbar-color: #99A0A5 transparent; + scroll-behavior: smooth; + + &::-webkit-scrollbar { + height: 5px; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + border-radius: 8px; + margin: 0 10px; + } + + &::-webkit-scrollbar-thumb { + background-color: #99A0A5; + border-radius: 8px; + margin: 0 10px; + } +} diff --git a/docs/_static/css/separate-commands.css b/docs/_static/css/separate-commands.css new file mode 100644 index 00000000..5547c4ad --- /dev/null +++ b/docs/_static/css/separate-commands.css @@ -0,0 +1,116 @@ +.rst-content code.literal { + border: unset; + background-color: unset; + border: 1px solid rgba(253, 143, 1, 0.2); + background-color: #FFF4E6; + font-family: 'Archivo', sans-serif !important; + font-size: 14px !important; + font-weight: 500 !important; + color: #121010 !important; + border-radius: 4px; + padding: 3px 6px; + word-break: break-all; + + & > span.pre:nth-child(n+ 2) { + padding-left: 5px; + } +} + +div.opcmd-heading, +div.cfgcmd-heading, +table .opcmd, +table .cfgcmd { + padding: 0; + display: flex; + background-color: unset; + border: none; + border-radius: 8px 0 0 8px; +} + +div.opcmd-heading, +div.cfgcmd-heading { + margin-bottom: 15px; +} + +div.opcmd-heading, +table .opcmd { + border-left: 5px solid #B8E9F9; +} + +div.cfgcmd-heading, +table .cfgcmd { + border-left: 5px solid #FD8F01; +} + +span { + &.opcmd, + &.cfgcmd { + display: flex; + padding: 4px 8px 8px 30px; + align-items: center; + color: #121010 !important; + font-family: 'Roboto Mono', monospace !important; + letter-spacing: -0.04em !important; + font-weight: 500 !important; + position: relative; + word-break: break-all; + + &::before { + content: url('../images/cmnd-link-dollar-icon.svg'); + display: flex; + padding-right: 8px; + align-items: center; + position: absolute; + top: 6px; + left: 8px; + } + } + + &.opcmd { + background-color: #EBF9FF; + } + + &.cfgcmd { + background-color: #FFF4E6; + } +} + +span.opcmd, +span.cfgcmd { + font-size: 16px !important; +} + +table span.opcmd, +table span.cfgcmd { + font-size: 13px !important; +} + +.opcmd-heading > a.cmdlink, +.cfgcmd-heading > a.cmdlink { + display: flex; + + &::after { + display: flex; + align-items: center; + content: ''; + height: 100%; + align-items: center; + padding-right: 12px; + padding-top: 3px; + border-radius: 0 8px 8px 0; + } +} + +.opcmd-heading:hover a.cmdlink:after, +.cfgcmd-heading:hover a.cmdlink:after { + content: url('../images/cmnd-link-icon.svg'); + padding-right: 10px; +} + +.opcmd-heading a.cmdlink:after { + background-color: #EBF9FF; +} + +.cfgcmd-heading a.cmdlink:after { + background-color: #FFF4E6; +} \ No newline at end of file diff --git a/docs/_static/css/tables.css b/docs/_static/css/tables.css new file mode 100644 index 00000000..7a106d56 --- /dev/null +++ b/docs/_static/css/tables.css @@ -0,0 +1,231 @@ +.wy-table-responsive { + overflow : auto !important ; + width: 100%; + + & table { + border: none !important; + + + & td { + white-space : normal !important; + } + + & > caption:hover a { + position: relative; + + &::after { + content: url('../images/cmnd-link-icon.svg'); + position: absolute; + top: 0; + right: -3px; + z-index: 2; + background-color: #fff; + width: 20px; + height: 100%; + } + } + } +} + +#coverage table.docutils td.coverage-ok p { + color: green; + text-align: center; +} + +#coverage table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail p, +#coverage table.docutils td.coverage-fail p { + color: red; + text-align: center; +} + +#coverage a.paginate_button.current, +#coverage a.paginate_button.next, +#coverage a.paginate_button.previous { + color: #FD8F01 !important; + background-color: none; + background: none; +} + +#coverage a.paginate_button { + margin-left: 0; + border: unset; + border-radius: 8px; + transition: background-color 250ms linear, color 250ms linear; +} + +#coverage a.paginate_button:hover, +#coverage a.paginate_button.current:hover, +#coverage a.paginate_button.next:hover, +#coverage a.paginate_button.previous:hover { + background-color: #E1E4E5 !important; + background: none; + border: unset; + color: #121010 !important; +} + +.selectDiv { + width: 20px; + height: 20px; + position: absolute; + top: 10px; + right: 10px; + z-index: 11111; + background-color: red; +} + +#table-cfgcmd_wrapper, +#table-opcmd_wrapper { + & label { + color: #121010 !important; + font-family: 'Archivo', sans-serif; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.02em; + } + + & option { + color: #8D9499 !important; + font-family: 'Roboto', sans-serif; + font-size: 16px; + font-weight: 500; + letter-spacing: -0.02em; + } + + & select { + height: 40px; + width: 80px; + padding: 10px 14px; + margin: 0 10px; + border-radius: 4px; + border: 1px solid #C6C9CC !important; + color: #8D9499; + font-size: 16px; + position: relative; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: url("../images/select-arrow.svg"); + background-repeat: no-repeat; + background-position: right 18px top 50%; + } + + & input { + margin-left: 16px; + height: 40px; + padding: 10px 14px; + width: 245px; + border: 1px solid #C6C9CC !important; + color: #8D9499; + font-size: 16px; + } + + & .wy-table-responsive { + padding-top: 24px; + } +} + +@media screen and (max-width: 575px) { + #table-cfgcmd_wrapper, + #table-opcmd_wrapper { + & label { + & input { + margin-top: 10px + } + } + } +} + +thead tr th { + padding: 10px 16px !important; + border-top: none !important; + border-left: none !important; + border-right: none !important; + max-height: 40px; + + & p { + color: #121010 !important; + font-family: 'Archivo', sans-serif; + font-size: 14px !important; + font-weight: 600; + letter-spacing: -0.02em; + margin-right: 3px; + } +} + +.rst-content table.docutils td, +.wy-table-bordered-all td { + border-left: none !important; +} + +.rst-content table.docutils th:nth-child(2n), +.rst-content table.field-list th:nth-child(2n), +.wy-table td, .wy-table th:nth-child(2n) { + border-radius: 8px 8px 0 0 ; +} + +.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils td:nth-child(2n), +.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils th:nth-child(2n), +.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list td:nth-child(2n), +.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list th:nth-child(2n), +.wy-grid-for-nav:has(nav.display_none) .wy-table td, +.wy-grid-for-nav:has(nav.display_none) .wy-table th:nth-child(2n) { + background-color: #FAFAFA !important; +} + +.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table th, +.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table td { + background-color: #E7E7E7 !important; +} + +.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td, +.wy-table-backed, +.wy-table-odd td, +.wy-table-striped tr:nth-child(2n-1) td { + background-color: unset; +} + +tbody tr td { + & p { + color: #525659 !important; + font-family: 'Roboto', sans-serif; + font-size: 14px !important; + font-weight: 400; + letter-spacing: -0.02em; + } + + &.coverage-ok { + & p { + color: transparent !important; + width: 100%; + height: 100%; + margin: 0; + position: relative; + + &::before { + content: url('../images/check.svg'); + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + position: absolute; + top: 0; + } + } + } +} + +.dataTables_info { + color: #121010 !important; + font-family: 'Roboto', sans-serif; + font-size: 16px !important; + font-weight: 400; + letter-spacing: -0.5px; +} + +.paginate_button { + font-family: 'Archivo', sans-serif; + font-size: 16px !important; + font-weight: 600; + letter-spacing: -0.5px; +} \ No newline at end of file diff --git a/docs/_static/css/text.css b/docs/_static/css/text.css new file mode 100644 index 00000000..f1179534 --- /dev/null +++ b/docs/_static/css/text.css @@ -0,0 +1,120 @@ +.docutils .card-header p { + font-family: 'Archivo', sans-serif; + font-weight: 600; + font-size: 18px; + letter-spacing: -0.05em; + padding-bottom: 18px; + color: #121010; +} + +p, +blockquote > div > dl, +blockquote > div > dd, +#container dl, +#firewall dl, +#high-availability dl, +#development td, +#development th, +caption.caption-text, +.simple > dt, +div.line-block, +.paginate_button, +.dataTables_info, +#operational-commands label, +.card-body .card-text, +#search-results a { + font-family: 'Roboto', sans-serif; + font-size: 16px; + letter-spacing: -0.5px; + font-weight: 400; + color: #525659; + line-height: 1.6; +} + +p > strong { + color: #121010; +} + +.card-body .card-text { + padding-bottom: 22px; + display: block; +} + +.simple > dt { + font-weight: 600; +} + +#dual-hub-dmvpn-with-vyos td > p, +#route-based-redundant-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p, +#route-based-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p, +#development td p, +#development th p { + font-size: 14px !important; +} + +#development #writing-good-commit-messages > ul.simple > li > ul { + + & > li:nth-child(2) { + padding-bottom: 23px; + } + + & > li:nth-child(2) { + padding-bottom: 53px; + } +} + +#installation-and-image-management > div > p > span { + font-family: 'Archivo', sans-serif; + font-weight: 700; + letter-spacing: -0.02em; + font-size: 24px; + color: #121010; +} + +.caption-text { + text-align: left; + font-family: 'Roboto', sans-serif; +} + +p .caption-text { + color: #8D9499; + font-family: 'Roboto', sans-serif; +} + +aside.footnote .label { + & > a[role=doc-backlink] { + color: #fd8f01; + font-family: 'Roboto', sans-serif; + font-size: 16px; + } +} + +aside.footnote > p { + padding-bottom: 15px !important; +} + +#about a .external, +#a-note-on-copyright > dl.brackets > dt, +#a-note-on-copyright > dl.brackets > dt > .brackets > a, +a.footnote-reference.brackets, +#search-results a { + color: #FD8F01; +} + +#history p { + padding-bottom: 22px; + margin-bottom: 0; + font-size: 16px; +} + +#a-note-on-copyright > dl p { + padding-bottom: 12px; +} + +#search-results a { + font-size: 19px; +} + +#specify-custom-config-file { + padding-top: 15px; +} \ No newline at end of file diff --git a/docs/_static/images/IPSec_close_action_settings.jpg b/docs/_static/images/IPSec_close_action_settings.jpg index a4e258cc..6996f857 100644 Binary files a/docs/_static/images/IPSec_close_action_settings.jpg and b/docs/_static/images/IPSec_close_action_settings.jpg differ diff --git a/docs/_static/images/VyOS_Dual-Hub_DMVPN.png b/docs/_static/images/VyOS_Dual-Hub_DMVPN.png new file mode 100644 index 00000000..9c25a308 Binary files /dev/null and b/docs/_static/images/VyOS_Dual-Hub_DMVPN.png differ diff --git a/docs/_static/images/arrow-left.svg b/docs/_static/images/arrow-left.svg new file mode 100644 index 00000000..16d6750b --- /dev/null +++ b/docs/_static/images/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/_static/images/arrow-right.svg b/docs/_static/images/arrow-right.svg new file mode 100644 index 00000000..15ab0eb4 --- /dev/null +++ b/docs/_static/images/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/_static/images/breadcrumbs-icon.svg b/docs/_static/images/breadcrumbs-icon.svg new file mode 100644 index 00000000..6420468b --- /dev/null +++ b/docs/_static/images/breadcrumbs-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/_static/images/check.svg b/docs/_static/images/check.svg new file mode 100644 index 00000000..fcec28a1 --- /dev/null +++ b/docs/_static/images/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/_static/images/close-sidebar-icon.svg b/docs/_static/images/close-sidebar-icon.svg new file mode 100644 index 00000000..e630ce27 --- /dev/null +++ b/docs/_static/images/close-sidebar-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/_static/images/cmnd-link-dollar-icon.svg b/docs/_static/images/cmnd-link-dollar-icon.svg new file mode 100644 index 00000000..b0e4a74b --- /dev/null +++ b/docs/_static/images/cmnd-link-dollar-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/_static/images/cmnd-link-icon.svg b/docs/_static/images/cmnd-link-icon.svg new file mode 100644 index 00000000..4602fadf --- /dev/null +++ b/docs/_static/images/cmnd-link-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/_static/images/copy-code-icon.svg b/docs/_static/images/copy-code-icon.svg new file mode 100644 index 00000000..3417dfe5 --- /dev/null +++ b/docs/_static/images/copy-code-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/_static/images/github.svg b/docs/_static/images/github.svg new file mode 100644 index 00000000..cb3d30ef --- /dev/null +++ b/docs/_static/images/github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/_static/images/hamburger-icon.svg b/docs/_static/images/hamburger-icon.svg new file mode 100644 index 00000000..9fad3003 --- /dev/null +++ b/docs/_static/images/hamburger-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/_static/images/note-icon.svg b/docs/_static/images/note-icon.svg new file mode 100644 index 00000000..fd4f05c3 --- /dev/null +++ b/docs/_static/images/note-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/_static/images/wireguard_site2site_diagram.jpg b/docs/_static/images/wireguard_site2site_diagram.jpg index fc305952..4a7a95e4 100644 Binary files a/docs/_static/images/wireguard_site2site_diagram.jpg and b/docs/_static/images/wireguard_site2site_diagram.jpg differ diff --git a/docs/_static/images/zone-policy-diagram.png b/docs/_static/images/zone-policy-diagram.png index 49e3e046..cfde4af6 100644 Binary files a/docs/_static/images/zone-policy-diagram.png and b/docs/_static/images/zone-policy-diagram.png differ diff --git a/docs/_static/js/codecopier.js b/docs/_static/js/codecopier.js new file mode 100644 index 00000000..bf0b3b4d --- /dev/null +++ b/docs/_static/js/codecopier.js @@ -0,0 +1,67 @@ +const hamburgerIcon = ` + + + +` + +const innersOfCopyDiv = ` +

Copy

+ + + + +` + +function formDiv(id) { + return ` +
+ ${innersOfCopyDiv} +
+` +} + +$(document).ready(async function () { + const codeSnippets = $( + '.rst-content div[class^=highlight] div[class^=highlight], .rst-content pre.literal-block div[class^=highlight], .rst-content pre.literal-block div[class^=highlight]' + ) + + codeSnippets.each((index, el) => { + el.insertAdjacentHTML('beforeend', formDiv(index)) + }) + + const copyButton = $('.copyDiv') + + copyButton.click(async ({ + currentTarget + }) => { + // we obtain text and copy it + const id = currentTarget.dataset.identifier + + try { + await navigator.clipboard.writeText(currentTarget.offsetParent.innerText) + } catch (error) { + console.log('Copiing text failed, please try again', { + error + }) + } + + // we edit the copyDiv connected to copied text + const divWithNeededId = $(`div[data-identifier='${id}']`) + divWithNeededId.addClass('copiedNotifier') + divWithNeededId.html('Copied!') + + setTimeout(() => { + divWithNeededId.html(innersOfCopyDiv) + divWithNeededId.removeClass('copiedNotifier') + + }, 2000) + }) + + // we edit the button that is added by readthedocs portal + const readTheDocsButton = $('div.rst-versions') + const navbar = $('nav[data-toggle=wy-nav-shift]') + + navbar.append(readTheDocsButton) + +}); + diff --git a/docs/_static/js/footer.js b/docs/_static/js/footer.js new file mode 100644 index 00000000..5f135768 --- /dev/null +++ b/docs/_static/js/footer.js @@ -0,0 +1,92 @@ +$(document).ready(function() { + insertIframe() + + const options = { + threshold: 0.01, + } + const divDoc = document.querySelector('.iframe-container') + const innerSidebar = $('.wy-side-scroll') + + intersectionObserver(options, divDoc, innerSidebar) + + $(window).resize(function() { + intersectionObserver(options, divDoc, innerSidebar) + }) + + $(window).scroll(function() { + intersectionObserver(options, divDoc, innerSidebar) + }) +}); + +function intersectionObserver(options, divDoc, innerSidebar) { + // we delete any inline-styles from innerSidebar + if($(innerSidebar).attr('style')) { + innerSidebar.removeAttr('style') + } + const screenWidth = $(window).width() + const sidebar = $('.wy-nav-side') + const documentHeight = $(document).height() + const iframeHeight = $('.iframe-container').height() + const currentPosition = $(document).scrollTop() + const additionalPaddingFromSidebar = screenWidth > 991 ? 70 : 83 + const heightThatIsAddedByPaddings = 36 + const resultOfSums = documentHeight - + iframeHeight - + currentPosition - + additionalPaddingFromSidebar - + heightThatIsAddedByPaddings + const heightOfAdditionalButton = 50 + + const onEntry = (entries, observer) => { + entries.forEach(entry => { + if(entry.isIntersecting) { + if(resultOfSums <= 70) { + $(sidebar).hide() + return + } + $(sidebar).show() + $(sidebar).height(resultOfSums) + $(sidebar).css('margin-bottom', '20px') + $(innerSidebar).removeAttr('style') + $(innerSidebar).height(resultOfSums - heightOfAdditionalButton) + return + } else { + $(sidebar).removeAttr('style') + $(innerSidebar).removeAttr('style') + } + }) + } + const observer = new IntersectionObserver(onEntry, options); + observer.observe(divDoc) + + if($(innerSidebar).attr('style')) { + observer.unobserve(divDoc) + } + + determineHeightOfFooterContainer() + +} + +function determineHeightOfFooterContainer() { + const iframeFooter= $('#vyos-footer-iframe'); + const title = window.document.getElementsByTagName('title')?.[0]?.text; + const iframeContainer = $('.iframe-container') + const href = window.location.href; + + window.addEventListener('message',function(message){ + if(message.data.footerIframeHeight){ + $(iframeFooter).css('min-height', `${message.data.footerIframeHeight + 1}px`) + $(iframeContainer).height(message.data.footerIframeHeight + 1) + iframeFooter[0].contentWindow.postMessage({title, href},'*'); + } + }) +} + +function insertIframe() { + const body = $('.wy-body-for-nav') + body.append(divWithIframe) +} + +const divWithIframe = `
+ +
` diff --git a/docs/_static/js/sidebar.js b/docs/_static/js/sidebar.js new file mode 100644 index 00000000..8b5c029d --- /dev/null +++ b/docs/_static/js/sidebar.js @@ -0,0 +1,162 @@ +$(document).ready(function () { + removeOverlayAndCloseSidebar() + documentLoaded() + + $(window).on("resize", function () { + const screenWidth = window.innerWidth + + if (screenWidth <= 991) return userIsInTabletScreenWidth(screenWidth) + return removeOverlayAndButtons(screenWidth) + }) + +}) + +function removeButtons() { + const alreadyCreatedOpenButtonCheck = $('.openLeftSidebarMenuButton') + const alreadyCreatedCloseButtonCheck = $('.closeButtonDivLine') + + if(alreadyCreatedOpenButtonCheck[0]) alreadyCreatedOpenButtonCheck[0].remove() + if(alreadyCreatedCloseButtonCheck[0]) alreadyCreatedCloseButtonCheck[0].remove() +} + +function documentLoaded() { + const screenWidth = window.innerWidth + + if (screenWidth <= 991) return userIsInTabletScreenWidth(screenWidth) + return +} + +function userIsInTabletScreenWidth(screenWidth) { + const alreadyCreatedButtonCheck = $('.openLeftSidebarMenuButton') + if (alreadyCreatedButtonCheck[0]) return + createOpenSidebarButton(screenWidth) + createCloseSidebarButton(screenWidth) + removeOverlayAndCloseSidebar() +} + +function createOverlay(screenWidth) { + const contentContainer = $('.wy-nav-content') + contentContainer.addClass('overlay') + + const overlayDiv = ` +
+ ` + + contentContainer.append(overlayDiv) + + $('.wy-nav-content.overlay').on('click', onOverlayClickHandler) +} + +function onOverlayClickHandler() { + removeOverlayAndCloseSidebar() +} + +function removeOverlayAndCloseSidebar() { + const screenWidth = window.innerWidth + + const contentContainer = $('.wy-nav-content') + contentContainer.removeClass('overlay') + + const overlayDiv = $('.overlayDiv') + overlayDiv.remove() + + const leftSidebarOpened = $('nav.wy-nav-side.shift') + leftSidebarOpened.removeClass('shift') + + const leftSidebar = $('nav.wy-nav-side') + + // that's working don't touch + if(screenWidth > 991) { + // when user is not in tablet -> we add classes on opened sidebar and remove classes on closed sidebar + const contentSection = $('section.wy-nav-content-wrap') + const contentDiv = $('div.wy-nav-content') + contentSection.addClass('wy-nav-content-wrap-opened-sidebar') + contentDiv.addClass('wy-nav-content-opened-sidebar') + contentSection.removeClass('wy-nav-content-wrap-closed-sidebar') + contentDiv.removeClass('wy-nav-content-closed-sidebar') + leftSidebar.removeClass('display_none') + return + } + + if(screenWidth <= 991) { + // I add closed classes to make contentContainer 100% width + const contentSection = $('section.wy-nav-content-wrap') + const contentDiv = $('div.wy-nav-content') + contentSection.removeClass('wy-nav-content-wrap-opened-sidebar') + contentDiv.removeClass('wy-nav-content-opened-sidebar') + contentSection.addClass('wy-nav-content-wrap-closed-sidebar') + contentDiv.addClass('wy-nav-content-closed-sidebar') + leftSidebar.addClass('display_none') + } + +} + +function createOpenSidebarButton() { + const divToInsert = $('div[role=navigation][aria-label="Page navigation"]') + divToInsert[0].insertAdjacentHTML('afterbegin', formOpenSidebarButton()) + + const newlyCreatedButton = $('.openLeftSidebarMenuButton') + + newlyCreatedButton.on('click', onOpenLeftSidebarMenuButtonClickHandler) +} + +function onOpenLeftSidebarMenuButtonClickHandler(e) { + e.stopPropagation() + const leftSidebar = $('nav.wy-nav-side') + const leftSidebarOpened = $('nav.wy-nav-side.shift') + if(leftSidebarOpened[0]) { + // leftSidebarOpened.removeClass('shift') + removeOverlayAndCloseSidebar() + } + + createOverlay() + if(leftSidebar.hasClass('display_none')) leftSidebar.removeClass('display_none') + if(leftSidebar.hasClass('.additionalStylesForShift')) leftSidebar.removeClass('.additionalStylesForShift') + // here I add classes to contentSection and contentDiv to make them margined left and remove closed classes if any + const contentSection = $('section.wy-nav-content-wrap') + const contentDiv = $('div.wy-nav-content') + // contentSection.removeClass('wy-nav-content-wrap-closed-sidebar') + // contentDiv.removeClass('wy-nav-content-closed-sidebar') + // contentSection.addClass('wy-nav-content-wrap-opened-sidebar') + // contentDiv.addClass('wy-nav-content-opened-sidebar') + return leftSidebar.addClass('shift') +} + +function createCloseSidebarButton(screenWidth) { + const updatedLeftSidebarScrollDiv = $('nav.wy-nav-side') + + const alreadyCreatedButtonCheck = $('div.closeLeftSidebarMenuButton') + if(alreadyCreatedButtonCheck[0]) return + + updatedLeftSidebarScrollDiv[0].insertAdjacentHTML('beforeend', formCloseLeftSidebarButton()) + updatedLeftSidebarScrollDiv.addClass('additionalStylesForShift') + + const createdCloseSidebarButton = $('.closeButtonDivLine') + + createdCloseSidebarButton.on('click', function () { + removeOverlayAndCloseSidebar() + }) +} + +function formOpenSidebarButton() { + return ` +
+ ${hamburgerIcon} +
+ ` +} + +function formCloseLeftSidebarButton() { + return ` +
+
+ Close +
+
+ ` +} + +function removeOverlayAndButtons(screenWidth) { + removeOverlayAndCloseSidebar() + removeButtons() +} diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html index 6cb68508..5736a26f 100644 --- a/docs/_templates/layout.html +++ b/docs/_templates/layout.html @@ -1,12 +1,32 @@ {% extends "!layout.html" %} {%- set current_version = "1.5.x circinus" %} {% block extrahead %} + + + + + + + + + + + + + + + + + + + + -{% endblock %} -{% block extrabody %} -

Warning: This is the dev version. The latest stable version is - Equuleus 1.3.x.

+ + + + {% endblock %} diff --git a/docs/conf.py b/docs/conf.py index 4414286d..f05832fe 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -22,7 +22,7 @@ from docutils.parsers.rst.roles import set_classes # -- Project information ----------------------------------------------------- project = u'VyOS' -copyright = u'2023, VyOS maintainers and contributors' +copyright = u'2024, VyOS maintainers and contributors' author = u'VyOS maintainers and contributors' # The short X.Y version @@ -192,4 +192,4 @@ texinfo_documents = [ def setup(app): - pass + pass \ No newline at end of file diff --git a/docs/copyright.md b/docs/copyright.md index 2a06d761..97cc30ca 100644 --- a/docs/copyright.md +++ b/docs/copyright.md @@ -1,6 +1,6 @@ # Copyright Notice -Copyright (C) 2018-2023 VyOS maintainers and contributors +Copyright (C) 2018-2024 VyOS maintainers and contributors Permission is granted to make and distribute verbatim copies of this manual provided the copyright notice and this permission notice are preserved on all -- cgit v1.2.3