diff --git a/docs/content/assets/img/traefik.logo.horizontal.png b/docs/content/assets/img/traefik.logo.horizontal.png new file mode 100644 index 000000000..0e440c37a Binary files /dev/null and b/docs/content/assets/img/traefik.logo.horizontal.png differ diff --git a/docs/content/assets/styles/content.css b/docs/content/assets/styles/content.css new file mode 100644 index 000000000..ba0d24e0d --- /dev/null +++ b/docs/content/assets/styles/content.css @@ -0,0 +1,70 @@ +.md-container { + padding-top: 0; +} + +.md-content h1 { + color: var(--dark) !important; + font-weight: bold !important; +} + +.md-content a { + color: var(--blue) !important; +} + +.md-content a:hover { + font-weight: bold !important; +} + +.md-typeset p code, +.md-typeset .codehilite, +.md-typeset .highlight { + background-color: var(--light-blue) !important; +} + +.md-typeset table:not([class]) th { + background: var(--dark) !important; + color: white !important; +} + +/* Front page image size */ +img[src$='#small'] { + width: 150px; +} +img[src$='#medium'] { + width: 300px; +} + +/* Center table and objects */ +.center, +img, +.md-typeset__table { + display: block !important; + margin: 0 auto; +} + +.md-typeset table:not([class]) tr td:first-child { + text-align: left; +} +.md-typeset table:not([class]) th:not([align]), +.md-typeset table:not([class]) td:not([align]) { + text-align: center; +} +article p:not([class]), +article ul:not([class]), +article ol:not([class]) { + padding-left: 0.8em !important; +} + +/* Fix for Chrome */ +.md-typeset__table td code { + word-break: unset; +} + +.md-typeset__table tr :nth-child(1) { + word-wrap: break-word; + max-width: 30em; +} + +p { + text-align: justify; +} \ No newline at end of file diff --git a/docs/content/assets/styles/extra.css b/docs/content/assets/styles/extra.css deleted file mode 100644 index f865034b0..000000000 --- a/docs/content/assets/styles/extra.css +++ /dev/null @@ -1,63 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif'); - -.md-logo img { - background-color: white; - border-radius: 50%; - width: 30px; - height: 30px; -} - -/* Fix for Chrome */ -.md-typeset__table td code { - word-break: unset; -} - -.md-typeset__table tr :nth-child(1) { - word-wrap: break-word; - max-width: 30em; -} - -body { - font-family: 'Noto Sans', sans-serif; -} - -h1 { - font-weight: bold !important; - color: rgba(0,0,0,.9) !important; -} - -h2 { - font-weight: bold !important; -} - -h3 { - font-weight: bold !important; -} - -.md-typeset h5 { - text-transform: none; -} - -figcaption { - text-align: center; - font-size: 0.8em; - font-style: italic; - color: #8D909F; -} - -p.subtitle { - color: rgba(0,0,0,.54); - padding-top: 0; - margin-top: -2em; - font-weight: bold; - font-size: 1.25em; -} - -.markdown-body .task-list-item { - list-style-type: none !important; -} - -.markdown-body .task-list-item input[type="checkbox"] { - margin: 0 4px 0.25em -20px; - vertical-align: middle; -} \ No newline at end of file diff --git a/docs/content/assets/styles/footer.css b/docs/content/assets/styles/footer.css new file mode 100644 index 000000000..d71e88262 --- /dev/null +++ b/docs/content/assets/styles/footer.css @@ -0,0 +1,10 @@ +.md-footer-meta { + background-color: var(--dark); +} + +.md-footer-privacy-policy { + margin: 0 .6rem; + padding: .4rem 0; + color: hsla(0,0%,100%,.3); + font-size: .64rem; +} \ No newline at end of file diff --git a/docs/content/assets/styles/header.css b/docs/content/assets/styles/header.css new file mode 100644 index 000000000..5c539a5ca --- /dev/null +++ b/docs/content/assets/styles/header.css @@ -0,0 +1,462 @@ +@import url('https://fonts.googleapis.com/css?family=Rubik:300i,400,400i,500,500i,700&display=swap'); + +.wrapper-1200 { + width: 100%; + max-width: 61rem; + margin: 0 auto; + padding: 0 .6rem; +} + +@media (max-width: 700px) { + .wrapper-1200 { + padding: 0 20px; + } +} + +.btn-type-1 { + outline: none; + border: none; + background-color: #1e54d5; + line-height: 1em; + border-radius: 8px; + padding: 12px 15px; + text-transform: uppercase; + letter-spacing: 0.05em; + font-size: 1.25rem; + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.28) 1%, #1e54d5 99%); + font-weight: 500; + text-align: center; + color: white; + transition: all 0.2s; +} + +.button--secondary { + outline: none; + border: 2px solid #1e54d5 !important; + background: transparent; + line-height: 1em; + border-radius: 8px; + padding: 9px 13px; + letter-spacing: 0; + font-size: 1.3rem; + font-weight: 500; + text-align: center; + color: #1e54d5; + transition: all 0.2s; + display: inline-block; +} +.button--secondary:hover { + color: white !important; + background: #1e54d5; +} +.button--secondary:focus { + color: white !important; + background: #1e54d5; +} + +.site-header-and-placeholder-wrapper { + position: relative; + height: 64px; +} + +.site-header { + position: fixed; + width: 100%; + top: 0; + left: 0; + transition: height 0.1s; + z-index: 100; + background: white; + box-shadow: 0 0 7px 0 #00000021; + border-bottom: 1px solid #e2e2e2; + height: 64px; + display: flex; + align-items: center; + font-size: 10px; + font-family: 'Rubik', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', + 'Helvetica Neue', sans-serif; + color: #06102a; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.site-header.scrolled { + box-shadow: 0 0 5px 0 #00000028; + position: fixed; + top: 0; + height: 52px; +} +.site-header.scrolled .site-header__title a { + font-size: 2.2em; +} + +.header-placeholder { + background: none; + width: 100%; + height: 64px; + position: absolute; +} +.header-placeholder.active { + display: block; +} + +.site-header .wrapper-1200 { + display: flex; + justify-content: space-between; + align-items: center; +} +.site-header .wrapper-1200 .left { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.site-header__logo { + max-width: 145px; +} + +.site-header__title a { + color: #06102a; + font-size: 2.2em; + font-weight: 500; + transition: all 0.2s; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +/* Navigation */ +.site-header__nav .menu-item-wrapper { + display: inline-block; + padding-left: 30px; +} +.site-header__nav .menu-item { + color: #06102a; + transition: all 0.05s; + font-size: 1.45em; + line-height: 1em; + font-weight: 500; +} +.site-header__nav .menu-item:hover { + color: #8a959e; +} +.site-header__nav .menu-item--with-icon { + display: flex; + align-items: center; + justify-content: flex-start; +} +.site-header__nav .menu-item--with-icon .title { + margin-right: 3px; +} +.site-header__nav .menu-item--with-icon .icon { + width: 20px; + height: 20px; + transition: all 0.1s; +} +.site-header__nav .menu-item--with-icon .icon svg { + stroke-width: 2.5 !important; + width: 100%; + height: 100%; +} +.site-header__nav .menu-item-wrapper--dropdown { + position: relative; +} +.site-header__nav .menu-item-wrapper--dropdown:hover .nav-dropdown-menu { + display: block; +} +.site-header__nav .nav-dropdown-menu { + display: none; +} + +.nav-dropdown-menu { + position: absolute; + z-index: 500; + background: transparent; +} + +.nav-dropdown-menu-wrapper { + border-radius: 8px; + box-shadow: 0 12px 40px 0 rgba(1, 10, 32, 0.24); + background: white; + margin: 8px 0; + overflow: hidden; +} + +/* Products, Solutions dropdown menu */ +.nav-dropdown-menu--products, +.nav-dropdown-menu--solutions { + width: 500px; +} +.nav-dropdown-menu--products .nav-dropdown-menu-wrapper, +.nav-dropdown-menu--solutions .nav-dropdown-menu-wrapper { + padding: 20px; +} +.nav-dropdown-menu--products .dm-header, +.nav-dropdown-menu--solutions .dm-header { + font-size: 1.1em; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: 3.67px; + color: #505769; + margin-bottom: 20px; + text-transform: uppercase; +} +.nav-dropdown-menu--products .dm-item, +.nav-dropdown-menu--solutions .dm-item { + border: none; + margin: 0 0 20px; + color: #06102a; + transition: all 0.1s; + position: relative; + width: 100%; +} +.nav-dropdown-menu--products .dm-item:last-child, +.nav-dropdown-menu--solutions .dm-item:last-child { + margin-bottom: 0; +} +.nav-dropdown-menu--products .dm-item .dmi-image, +.nav-dropdown-menu--solutions .dm-item .dmi-image { + width: 118px; + height: 92px; + position: absolute; + background: #f4f4f4; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + border-radius: 4px; + z-index: 0; +} +.nav-dropdown-menu--products .dm-item .dmi-image img, +.nav-dropdown-menu--solutions .dm-item .dmi-image img { + width: 100%; +} +.nav-dropdown-menu--products .dm-item .dmi-details, +.nav-dropdown-menu--solutions .dm-item .dmi-details { + padding: 8px 0 10px 135px; + width: 100%; + background: transparent; + display: block; + color: #06102a; + position: relative; + z-index: 1; +} +.nav-dropdown-menu--products .dm-item .dmi-details:hover, +.nav-dropdown-menu--solutions .dm-item .dmi-details:hover { + color: #1e54d5; +} +.nav-dropdown-menu--products .dm-item .dmi-title, +.nav-dropdown-menu--solutions .dm-item .dmi-title { + font-size: 1.6em; + font-weight: 500; + margin: 0 0 2px; +} +.nav-dropdown-menu--products .dm-item .dmi-description, +.nav-dropdown-menu--solutions .dm-item .dmi-description { + font-size: 1.4em; + opacity: 0.7; + line-height: 1.6em; +} +.nav-dropdown-menu--products .dm-item--traefikee .dmi-image img, +.nav-dropdown-menu--solutions .dm-item--traefikee .dmi-image img { + transform: scale(1.1); +} + +.nav-dropdown-menu--solutions .dm-item .dmi-image { + width: 65px; + padding: 10px; + background: white; + height: auto; +} +.nav-dropdown-menu--solutions .dm-item .dmi-details { + padding: 5px 0 0 80px; +} +.nav-dropdown-menu--solutions .dm-item:last-child { + margin-bottom: 10px; +} + +/* Dropdown menu: Learn */ +.nav-dropdown-menu--learn { + width: 250px; +} +.nav-dropdown-menu--company { + width: 500px; +} +.nav-dropdown-menu--company .nav-dropdown-menu-wrapper { + display: grid; + grid-template-columns: 50% 50%; +} +.nav-dropdown-menu--learn .dm-left, +.nav-dropdown-menu--company .dm-left { + padding: 25px; +} +.nav-dropdown-menu--learn .dm-header, +.nav-dropdown-menu--company .dm-header { + font-size: 1.1em; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: 3.67px; + color: #505769; + margin-bottom: 20px; + text-transform: uppercase; +} +.nav-dropdown-menu--learn .dm-item, +.nav-dropdown-menu--company .dm-item { + display: block; + font-size: 1.6em; + font-weight: 500; + color: #06102a; + margin-bottom: 15px; +} +.nav-dropdown-menu--learn .dm-item:last-child, +.nav-dropdown-menu--company .dm-item:last-child { + margin-bottom: 0; +} +.nav-dropdown-menu--learn .dm-item:hover, +.nav-dropdown-menu--company .dm-item:hover { + color: #1e54d5; +} + +.dm-preview { + background: #edeff4; + overflow: hidden; + height: 100%; + display: flex; + flex-direction: column; +} + +.dm-preview__feature-image { + overflow: hidden; + display: block; +} + +.dm-preview__feature-image img { + width: 100%; + height: 145px; + background: #ffffff no-repeat 50%; + object-fit: cover; + vertical-align: middle; +} + +.dm-preview__content { + padding: 15px; + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; + flex: 1; + position: relative; +} + +.dm-preview__tag { + display: block; + font-size: 1.2em; + color: #db7d11; + letter-spacing: 2.5px; + font-weight: 500; + margin: 0 0; + text-transform: uppercase; +} + +.dm-preview__title { + font-size: 1.6em; + font-weight: 500; + line-height: 1.6em; + margin: 0; + color: #06102a; + display: block; + flex: 1; + position: relative; + z-index: 1; + padding-bottom: 20px; +} + +.dm-preview .arrow-link { + justify-content: flex-start; + font-size: 1.4em; + position: absolute; + bottom: 12px; + z-index: 0; +} + +/* Dropdown menu: Company */ +.nav-dropdown-menu--company { + width: 450px; +} + +.nav-dropdown-menu--company .dm-right { + background: #06102a; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + color: white; + padding: 20px; +} +.nav-dropdown-menu--company .dm-right p { + font-size: 1.6em; + font-weight: 500; + margin: 0 0 15px; + text-align: center; +} +.nav-dropdown-menu--company .dm-right a { + text-transform: uppercase; + line-height: 1.5em; + padding: 9px 12px; + font-size: 1.2em; +} + +/* Demo */ +.site-header__demo-button .button--secondary { + font-size: 1.4em; + padding: 8px 12px; + border-radius: 6px; +} + +/* Drawer */ +.site-header .drawer { + display: none; +} + +@media (max-width: 1060px) { + .site-header__nav .menu-item-wrapper { + padding-left: 20px; + } +} +@media (max-width: 980px) { + .site-header__nav { + display: none; + } + + .site-header .drawer { + display: block; + } + + .site-header .right .site-header__demo-button { + display: none; + } + + html [data-md-color-primary=indigo] .md-nav--primary .md-nav__title--site { + background-color: #06102a; + } + + html .md-nav--primary .md-nav__title { + padding: 64px .8rem .2rem; + } + + .md-search__inner { + top: 64px; + right: 0; + } +} + +.md-header .md-search { + margin-left: 12.1rem; +} + +.site-header__main { + display: flex; + align-items: center; +} diff --git a/docs/content/assets/styles/menu.css b/docs/content/assets/styles/menu.css new file mode 100644 index 000000000..da46bae00 --- /dev/null +++ b/docs/content/assets/styles/menu.css @@ -0,0 +1,101 @@ +.md-nav__link { + margin-left: -0.4rem; + padding: 0 0.4rem; + line-height: 32px; + color: var(--dark) !important; +} + +.md-nav__link::after { + font-size: 16px; + vertical-align: -.25em; +} + +.md-nav__toggle:checked + .md-nav__link, +.md-nav__link--active, +.md-nav__link:hover { + border-radius: 8px; + background-color: var(--light-blue) !important; + color: var(--dark) !important; + transition: background-color 0.3s ease; +} + +.md-nav__link--active { + color: var(--blue) !important; + font-weight: bold; +} + +.md-sidebar--primary { + background-color: white; +} + +.md-sidebar--secondary .md-nav__title { + font-size: 12px; + text-transform: uppercase; + margin-bottom: 0.4rem; + padding: 0; +} + +.md-sidebar--secondary .md-sidebar__scrollwrap { + border-radius: 8px; + background-color: var(--light-blue) !important; +} + +.md-sidebar--secondary .md-nav__title { + padding: 0.8rem 0.4rem 0.8rem; +} + +.md-sidebar--secondary .md-nav__list { + padding: 0 0.4rem 0.8rem 1.2rem; +} + +.md-sidebar--secondary .md-sidebar__scrollwrap .md-nav__link { + font-weight: 300; +} + +.md-sidebar--secondary + .md-sidebar__scrollwrap + .md-nav__link[data-md-state='blur'], +.md-sidebar--secondary .md-sidebar__scrollwrap .md-nav__link:hover { + color: var(--blue) !important; + font-weight: bold; +} + +.md-sidebar--secondary .md-nav__item { + padding: 0 0 0 0.4rem; +} + +.md-sidebar--secondary .md-nav__link { + margin-top: 0.225em; + padding: 0.1rem 0.2rem; +} + +.md-sidebar--secondary li { + list-style-type: disc; +} + +.md-sidebar--secondary .repo_url { + padding: 10px 0 14px 0; +} + + +.md-search__inner { + width: inherit; + float: inherit; +} + +.md-search__input { + margin-bottom: 10px; + border-radius: 4px; + background-color: inherit; + border: 1px solid rgba(0,0,0,.07); +} + +.md-search__input::placeholder { + color: rgba(0,0,0,.07); +} + +@media only screen and (min-width: 60em) { + [data-md-toggle=search]:checked~.md-header .md-search__inner { + margin-top: 100px; + } +} diff --git a/docs/content/assets/styles/product-switcher.css b/docs/content/assets/styles/product-switcher.css new file mode 100644 index 000000000..a4bfcb9bb --- /dev/null +++ b/docs/content/assets/styles/product-switcher.css @@ -0,0 +1,11 @@ +.product-switcher { + font-size: 10px; + font-family: 'Rubik', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', + 'Helvetica Neue', sans-serif; + color: #06102a; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.product-switcher img { + margin-right: 10px; +} diff --git a/docs/content/assets/styles/root.css b/docs/content/assets/styles/root.css new file mode 100644 index 000000000..8668ace71 --- /dev/null +++ b/docs/content/assets/styles/root.css @@ -0,0 +1,10 @@ +:root { + --dark: #06102a; + --blue: #04B5D1; + --light-blue: #E4F7FA; + + --input-bg-color: white; + --input-color: black; + --input-placeholder-color: #bbb; + --input-border-color: #dcdcdc; +} \ No newline at end of file diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 986dc19a8..cce63de4c 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -29,7 +29,12 @@ theme: copyright: "Copyright © 2016-2020 Containous" extra_css: - - assets/styles/extra.css # Our custom styles + - assets/styles/root.css + - assets/styles/header.css + - assets/styles/footer.css + - assets/styles/menu.css + - assets/styles/content.css + - assets/styles/product-switcher.css - assets/styles/atom-one-light.css # HightlightJS's CSS theme extra_javascript: diff --git a/docs/scripts/verify.sh b/docs/scripts/verify.sh index b7830b24c..b4ba696fe 100755 --- a/docs/scripts/verify.sh +++ b/docs/scripts/verify.sh @@ -21,7 +21,7 @@ find "${PATH_TO_SITE}" -type f -not -path "/app/site/theme/*" \ --check_external_hash \ --alt_ignore="/traefik.logo.png/" \ --http_status_ignore="0,500,501,503" \ - --url_ignore="/https://groups.google.com/a/traefik.io/forum/#!forum/security/,/localhost:/,/127.0.0.1:/,/fonts.gstatic.com/,/.minikube/,/github.com\/containous\/traefik\/*edit*/,/github.com\/containous\/traefik\/$/,/docs.traefik.io/,/github\.com\/golang\/oauth2\/blob\/36a7019397c4c86cf59eeab3bc0d188bac444277\/.+/,/www.akamai.com/" \ + --url_ignore="/https://groups.google.com/a/traefik.io/forum/#!forum/security/,/localhost:/,/127.0.0.1:/,/fonts.gstatic.com/,/.minikube/,/github.com\/containous\/traefik\/*edit*/,/github.com\/containous\/traefik\/$/,/docs.traefik.io/,/github\.com\/golang\/oauth2\/blob\/36a7019397c4c86cf59eeab3bc0d188bac444277\/.+/,/www.akamai.com/,/pilot.traefik.io\/profile/,/containo.us/,/docs.mae.sh/,/www.mkdocs.org/,/squidfunk.github.io/,/ietf.org/" \ '{}' 1>/dev/null ## HTML-proofer options at https://github.com/gjtorikian/html-proofer#configuration diff --git a/docs/theme/main.html b/docs/theme/main.html index 5b1a18c99..176befcce 100644 --- a/docs/theme/main.html +++ b/docs/theme/main.html @@ -10,6 +10,46 @@ {% endblock %} +{% block header %} + {% include "partials/containous-header.html" %} + {% include "partials/header.html" %} +{% endblock %} + + +{% block site_nav %} + {% if nav %} + {% include "partials/product-switcher.html" %} +
+ {% include "partials/search.html" %} + {% if "search" in config["plugins"] %} + + {% endif %} +
+
+ {% include "partials/nav.html" %} +
+
+
+ {% endif %} + {% if page.toc %} +
+ {% if config.repo_url %} +
+
+ {% include "partials/source.html" %} +
+
+ {% endif %} +
+
+ {% include "partials/toc.html" %} +
+
+
+ {% endif %} +{% endblock %} + + {% block footer %} {% import "partials/language.html" as lang with context %} @@ -36,6 +76,10 @@ Material for MkDocs +
+ Privacy Policy +
+ {% block social %} {% include "partials/social.html" %} diff --git a/docs/theme/partials/containous-header.html b/docs/theme/partials/containous-header.html new file mode 100644 index 000000000..ade0a1ace --- /dev/null +++ b/docs/theme/partials/containous-header.html @@ -0,0 +1,238 @@ +
+
+ {/* Do not remove this. It serves an important purpose. */} +
+ +
+
+
+
+ + + + +
+ + +
+ +
+ +
+ + Get a demo + +
+
+ + +
+
+ +
diff --git a/docs/theme/partials/product-switcher.html b/docs/theme/partials/product-switcher.html new file mode 100644 index 000000000..b57a9a14a --- /dev/null +++ b/docs/theme/partials/product-switcher.html @@ -0,0 +1,49 @@ + \ No newline at end of file