From de61fd83c46346d56895200b40eab7583ef62609 Mon Sep 17 00:00:00 2001 From: Alina Derkach Date: Thu, 2 May 2024 01:37:22 +0300 Subject: [PATCH] PXC-4414 Apply new colour scheme, add a link and new icon to PXC (8.0) (#149) * PXC-4414 Apply new colour scheme, add a link and new icon to PXC (8.0) new file: _resource/overrides/partials/header.html new file: docs/assets/mysql-fav.svg new file: docs/assets/mysql-mark.svg modified: docs/css/design.css new file: docs/css/landing.css new file: docs/css/mysql.css modified: mkdocs-base.yml * Update header.html --- _resource/overrides/partials/header.html | 113 +++++++ docs/assets/mysql-fav.svg | 18 ++ docs/assets/mysql-mark.svg | 13 + docs/css/design.css | 365 +++++++++++++++++++---- docs/css/landing.css | 301 +++++++++++++++++++ docs/css/mysql.css | 67 +++++ mkdocs-base.yml | 38 +-- 7 files changed, 839 insertions(+), 76 deletions(-) create mode 100644 _resource/overrides/partials/header.html create mode 100644 docs/assets/mysql-fav.svg create mode 100644 docs/assets/mysql-mark.svg create mode 100644 docs/css/landing.css create mode 100644 docs/css/mysql.css diff --git a/_resource/overrides/partials/header.html b/_resource/overrides/partials/header.html new file mode 100644 index 00000000..d09eb0f4 --- /dev/null +++ b/_resource/overrides/partials/header.html @@ -0,0 +1,113 @@ + +{% set class = "md-header" %} +{% if "navigation.tabs.sticky" in features %} + {% set class = class ~ " md-header--shadow md-header--lifted" %} +{% elif "navigation.tabs" not in features %} + {% set class = class ~ " md-header--shadow" %} +{% endif %} + + +
+ + +
+
+ + + + + + + + + + Percona Documentation + +
+
+ + + + + {% if "navigation.tabs.sticky" in features %} + {% if "navigation.tabs" in features %} + {% include "partials/tabs.html" %} + {% endif %} + {% endif %} +
diff --git a/docs/assets/mysql-fav.svg b/docs/assets/mysql-fav.svg new file mode 100644 index 00000000..a91a9d94 --- /dev/null +++ b/docs/assets/mysql-fav.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/mysql-mark.svg b/docs/assets/mysql-mark.svg new file mode 100644 index 00000000..dda76879 --- /dev/null +++ b/docs/assets/mysql-mark.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/css/design.css b/docs/css/design.css index a93b4fea..520e13a1 100644 --- a/docs/css/design.css +++ b/docs/css/design.css @@ -1,4 +1,12 @@ +/* +* Prefixed by https://autoprefixer.github.io +* PostCSS: v8.4.14, +* Autoprefixer: v10.4.7 +* Browsers: last 4 version +*/ + /* Custom fonts */ + @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf"); @@ -25,49 +33,109 @@ } /* Variables */ + :root { + + /* Typography */ + --fHeading: "Poppins", "Roboto", Arial, Helvetica, sans-serif; + + /* Colors */ --white: #fff; - /* Percona Tonal Palette */ + + /* Percona Night */ --night500: #0E1A53; - --night450: #263164; --night400: #3E4875; - --night50: #E7E8EE; + --night300: #5E668C; + + /* Percona Aqua */ + --aqua900: #14584B; + --aqua800: #1A7362; --aqua700: #22947E; --aqua600: #2CBEA2; + + /* Percona Sky */ + --sky900: #08386B; + --sky800: #0B4A8C; --sky700: #0E5FB5; - --sky650: #106DCF; --sky600: #127AE8; --sky500: #1486FF; --sky400: #439EFF; --sky300: #62AEFF; + --sky200: #93C7FF; + + /* Percona Stone */ + --stone900: #2C323E; + --stone800: #3A4151; + --stone700: #4B5468; + --stone100: #D1D5DE; + --stone50: #F0F1F4; + /* mkdocs root override */ --md-primary-fg-color--dark: var(--night400); } +:root, [data-md-color-scheme="percona-light"] { + /* Primitives */ - --md-typeset-a-color: var(--sky650); --md-primary-fg-color: var(--sky700); - --md-accent-fg-color: var(--sky650); + + /* Type */ + --md-typeset-color: #2C323E; + --md-typeset-a-color: var(--sky700); + + /* Defaults */ + --md-default-bg-color: var(--white); + --md-default-fg-color--light: rgba(44,50,62,0.72); + --md-default-fg-color--lighter: rgba(44,50,62,0.40); + --md-default-fg-color--lightest: rgba(44,50,62,0.25); + + /* Accent */ + --md-accent-fg-color: var(--sky500); /* Footer */ --md-footer-fg-color: var(--md-typeset-color); --md-footer-fg-color--light: var(--md-default-fg-color--light); --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter); - --md-footer-bg-color: var(--night50); - --md-footer-bg-color--dark: var(--night50); - + --md-footer-bg-color: var(--stone50); + --md-footer-bg-color--dark: var(--stone50); + + /* Code */ + --md-code-bg-color: var(--stone800); + --md-code-bg-color: var(--stone50); } -[data-md-color-scheme="slate"] { +[data-md-color-scheme="percona-dark"] { + /* Primitives */ --md-hue: 230; - --md-typeset-a-color: var(--sky400); - --md-primary-fg-color: var(--sky500); + --md-primary-fg-color: var(--sky200); + + /* Type */ + --md-typeset-color: #FBFBFB; + --md-typeset-a-color: var(--sky200); + + /* Defaults */ + --md-default-bg-color: var(--stone900); + --md-default-fg-color--light: rgba(251,251,251,0.72); + --md-default-fg-color--lighter: rgba(251,251,251,0.4); + --md-default-fg-color--lightest: rgba(209,213,222,0.25); + + /* Accent */ --md-accent-fg-color: var(--sky400); + --md-accent-bg-color: var(--stone900); + /* Footer */ - --md-footer-bg-color--dark: var(--night400); + --md-footer-fg-color: var(--md-typeset-color); + --md-footer-fg-color--light: var(--md-default-fg-color--light); + --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter); + --md-footer-bg-color--dark: var(--stone800); + + /* Code */ + --md-code-bg-color: var(--stone50); + --md-code-bg-color: var(--stone800); } -/* Typography specifics */ +/* Typography */ + .md-typeset { font-size: 0.75rem; } @@ -77,29 +145,42 @@ .md-typeset h4, .md-typeset h5, .md-typeset h6 { - font-family: "Poppins", "Roboto", Arial, Helvetica, sans-serif; + font-family: var(--fHeading); font-weight: bold; } .md-typeset h1 { - font-weight: normal; color: inherit; } .md-typeset h1 { margin: 0 0 0.75em; } -.md-header, -.md-nav__title[for="__drawer"] { - font-family: "Poppins", Arial, Helvetica, sans-serif; +.md-header { + font-family: var(--fHeading); font-weight: bold; } +.md-header__button.md-logo { + margin: 0.2rem 0.1rem 0.2rem 0.4rem; + padding: 0.2rem; +} +.md-header__button.md-logo img, +.md-header__button.md-logo svg { + height: 1.6rem; +} .md-nav__link--active { font-weight: bold; } .md-typeset small { opacity: 0.5; } +.md-content a:not(.md-button) { + text-decoration: underline; +} +.md-content .tabbed-labels a { + text-decoration: none; +} /* Header nav */ + .md-header, .md-tabs { background-color: var(--night400); @@ -111,54 +192,102 @@ margin-right: 0; } .md-tabs .md-tabs__link { - font-family: "Poppins", Arial, Helvetica, sans-serif; + font-family: var(--fHeading); font-weight: bold; } +.md-nav__source { + margin-top: -0.25rem; +} +.md-header__inner > :last-child { + padding-right: 0.6rem; +} +.md-tabs__item { + height: 2rem; +} +.md-tabs__link { + margin-top: 0.55rem; +} +.md-header__topic { + -webkit-transition: opacity .25s; + -o-transition: opacity .25s; + transition: opacity .25s; +} +.md-header__topic:hover { + opacity: 0.7; +} /* Footer */ + +.md-footer a { + text-decoration: underline; +} +.md-copyright, .md-copyright__highlight { - color: var(--md-footer-fg-color--lighter); + color: var(--md-footer-fg-color--light); } /* Base components */ -[data-md-color-scheme="percona-light"] .md-main a:focus:not(.md-button), -[data-md-color-scheme="percona-light"] .md-main a:hover:not(.md-button) { - color: var(--sky400); -} -[data-md-color-scheme="slate"] .md-main a:focus:not(.md-button), -[data-md-color-scheme="slate"] .md-main a:hover:not(.md-button) { - color: var(--sky300); -} + .md-typeset .md-button { + font-family: var(--fHeading); + font-size: 0.6818rem; + font-weight: bold; + padding: 0.4167em 1.6em; border-radius: 10rem; -} -.md-typeset .md-button:not(.md-button--primary):not(:hover):not(:focus) { + -webkit-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} +.md-typeset .md-button--primary { + color: var(--md-accent-bg-color); + -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); +} +.md-typeset .md-button--primary:focus, +.md-typeset .md-button--primary:hover { + -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20); + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20); +} +.md-typeset .md-button:not(.md-button--primary):focus, +.md-typeset .md-button:not(.md-button--primary):hover { + background: none; color: var(--md-accent-fg-color); } +.md-typeset code { + font-size: 0.9091em; + color: var(--md-typeset-color); + vertical-align: baseline; + padding: 0 0.2em 0.1em; + border-radius: 0.15em; +} .md-button code, -.md-typeset .md-button:hover code, -.md-typeset .md-button:focus code, -[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) code { +[data-md-color-scheme="percona-dark"] .md-button:not(.md-button--primary) code { background-color: rgba(255, 255, 255, 0.1); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05) inset; + -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset; } .md-button:not(.md-button--primary) code { background-color: rgba(0, 0, 0, 0.05); - box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset; + -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset; + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset; } .md-content .md-button { margin: 0 0.25em 0.5em 0; } -.md-typeset .tabbed-labels>label { +.md-typeset .tabbed-labels--linked > label > a { font-size: 0.75rem; padding: 0.75em 1em; } .js .md-typeset .tabbed-labels:before { height: 4px; + background-color: var(--md-typeset-a-color); } .md-typeset [class*="moji"] { vertical-align: -0.25em; } +.md-typeset .tabbed-set>input:first-child:checked~.tabbed-labels>:first-child, .md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10), .md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11), .md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12), .md-typeset .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13), .md-typeset .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14), .md-typeset .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15), .md-typeset .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16), .md-typeset .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17), .md-typeset .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18), .md-typeset .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19), .md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2), .md-typeset .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20), .md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3), .md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4), .md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5), .md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6), .md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7), .md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8), .md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9) { + color: var(--md-typeset-a-color); +} .md-typeset .md-button [class*="moji"], .md-typeset .tabbed-set [class*="moji"] { height: 1.3333em; @@ -175,60 +304,103 @@ color: var(--md-default-fg-color--lighter); } .md-typeset hr { - border-color: var(--md-default-fg-color--lighter) + margin: 2em 0; + border-color: var(--md-default-fg-color--lightest) } .md-typeset .tabbed-labels { - box-shadow: 0 -0.05rem var(--md-default-fg-color--lighter) inset; + -webkit-box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset; + box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset; +} +.md-typeset .tabbed-labels > label:hover { + color: var(--md-accent-fg-color); +} +.md-typeset .tabbed-button { + width: 1.25rem; + height: 1.25rem; + margin-top: 0.0625rem; +} +.md-typeset .tabbed-control { + width: 2.25rem; + height: 2.25rem; +} +.tabbed-block > *:last-child { + margin-bottom: 0; } /* Content re-styling */ + +.md-main__inner { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} .md-typeset [type=checkbox]:checked + .task-list-indicator:before { background-color: var(--aqua600); } .md-feedback { margin: 2em 0 !important; } -:not([data-banner]) + .md-feedback { +:not([data-banner]):not(.splash) + .md-feedback { padding-top: 2em; border-top: 0.05rem solid var(--md-default-fg-color--lightest); } .md-typeset .admonition, .md-typeset details { - box-shadow: none; + --md-admonition-bg-color: var(--md-default-bg-color); + --md-admonition-fg-color: var(--md-typeset-color); + border-width: 0.1125rem; + -webkit-box-shadow: none; + box-shadow: none; } .md-tabs__link { font-size: 0.67rem; } -.md-tabs__link--active, -.md-tabs__link--active a { +.md-tabs__item--active .md-tabs__link, +.md-tabs__item--active .md-tabs__link a { font-weight: bold; border-bottom: 0.15em solid currentColor; } +.md-sidebar__scrollwrap { + scrollbar-gutter: unset; +} /* Custom Banner */ + [data-banner] { padding: 1.5em; - margin: 2em 0; - border: 0.05rem solid var(--md-default-fg-color--lighter); - /* border: 0.05rem solid var(--md-typeset-table-color); */ + margin: 1.5em 0; + border: 0.05rem solid var(--md-default-fg-color--lightest); border-radius: 0.2rem; + /* box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); */ + -webkit-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} +[data-banner]:hover { + -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20); + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20); } [data-banner] .title { - font-weight: normal; + font-weight: bold; margin: 0; } +[data-banner] .title + * { + margin-top: 0.25em; +} [data-banner] > :last-child { margin-bottom: 0; } [data-banner] a:link { + font-family: var(--fHeading); + font-size: 0.6818rem; font-weight: bold; + text-decoration: none; } [data-banner] .actions > p { margin: 0; } [data-banner] .actions a { display: inline-block; - margin: 0.5em 1.5em 0 0; + margin: 0 1em 0 0; } [data-banner] > :only-child, [data-banner] .actions a:first-of-type { @@ -241,15 +413,31 @@ [data-banner] a [class*="moji"] svg { width: 1.3333em; } +[data-banner="logo"] > p:first-child { + margin-top: 0; +} +[data-banner="logo"] > p:first-child [class*="moji"] { + font-size: 4em; +} [data-grid] { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; margin-right: -1rem; } [data-grid] [data-banner] { - flex: 1 1 320px; + -webkit-box-flex: 1; + -ms-flex: 1 1 320px; + flex: 1 1 320px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; margin: 0 1rem 1rem 0; } [data-grid] .title { @@ -260,7 +448,9 @@ margin-top: 0; } [data-grid] [data-banner] > p:nth-last-child(2) { - flex-grow: 2; + -webkit-box-flex: 2; + -ms-flex-positive: 2; + flex-grow: 2; } [data-grid] + [data-banner] { margin-top: 0; @@ -270,6 +460,7 @@ } /* Custom lists */ + [dir] .power-bullet + ul, [dir] .power-bullet + ul ul, [dir] .power-bullet + ul ol, @@ -332,7 +523,7 @@ .power-number + ol ol > li::before, .power-bullet + ul ol > li::before { content: counter(power-list); - font-family: "Poppins", "Roboto", Arial, Helvetica, sans-serif; + font-family: var(--fHeading); } .power-bullet + ul > li::before, .power-bullet + ul ul > li::before, @@ -376,6 +567,7 @@ } /* Custom highlights */ + i[info], i[warning] { font-style: normal; @@ -403,17 +595,72 @@ i[warning] [class*="moji"] { color: #ff9100; } +/* Modals */ + +.md-consent__overlay { + -webkit-backdrop-filter: blur(.2rem); + backdrop-filter: blur(.2rem); + background-color: rgba(44,50,62,0.72); +} +.md-consent__inner { + background-color: var(--md-footer-bg-color--dark); +} + +/* Code injections */ + +.injections { + position: absolute; + width: 0; + height: 0; + padding: 0; + margin: 0; + visibility: hidden; + pointer-events: none; +} + +/* Super Nav */ + +.superNav { + font-family: var(--fHeading); + font-size: 0.5625rem; + line-height: 1; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.0625em; + color: var(--white); + background-color: var(--stone800); +} +.superNav a { + display: inline-block; + padding: 0.25rem 0.625rem !important; + transition: all 0.2s ease-out; +} +.superNav a:hover { + opacity: 0.7; +} +.superNav svg { + width: 1.375em; + height: 1.375em; + margin-right: 0.125em; + fill: currentColor; + vertical-align: -0.3125em; +} + /* Media queries */ + @media screen and (max-width: 76.1875em) { - .md-nav--primary .md-nav__title[for=__drawer] { - background-color: var(--night400); + .md-nav--primary .md-nav__title[for=__drawer], + .md-nav--primary .md-nav__title { + line-height: 1.5; + height: unset; + padding: 3.5rem .8rem 0.5rem; + color: var(--md-primary-bg-color); + background-color: var(--md-primary-fg-color--dark); } } @media screen and (max-width: 60em) { [data-banner] { padding: 1em; } - [data-banner] .actions a { - width: 100%; - } -} \ No newline at end of file +} +/**/ \ No newline at end of file diff --git a/docs/css/landing.css b/docs/css/landing.css new file mode 100644 index 00000000..df69386e --- /dev/null +++ b/docs/css/landing.css @@ -0,0 +1,301 @@ + +/* Type */ + +.landing h1, +.landing h2 { + font-size: calc(1.5em + 1vw); + line-height: 1.125; + text-transform: uppercase; + letter-spacing: 0; + margin: 0.5em 0; +} + +/* Layout adjustments */ + +.md-header, .md-tabs { + background-color: var(--stone800); +} +.landing > :not(:last-child) { + margin-bottom: 2em; +} +/* .md-content__inner { + display: flex; + flex-direction: column; +} +.md-content__inner > :not(.landing) { + width: 100%; + max-width: calc(34.3rem); + max-width: calc(34.3rem + 1.2rem + 12.1rem); + align-self: center; +} */ +[data-grid] [data-banner] { + flex: 0 1 calc(50% - 1rem); +} + +/* Splash Box */ + +.splash { + display: flex; + position: relative; + justify-content: space-between; + line-height: 1.25; + padding: calc(0.5em + 3%); + border: 1px solid var(--md-default-fg-color--lightest); + border-radius: calc(0.5rem + 0.75vw); + background: linear-gradient(110deg, var(--md-default-bg-color) 33%, var(--md-footer-bg-color--dark) 95%); + overflow: hidden; + background-repeat: no-repeat; +} +.splash.dark { + color: var(--white); + --md-primary-fg-color: var(--stone50); + --md-accent-fg-color: var(--white); +} +.splash.highlight { + background: + linear-gradient( + 110deg, + rgba(44,50,62,0.9) 10%, + rgba(44,50,62,0.1) 90% + ), + url(../assets/highlight.jpg) center / cover var(--stone800); + border: none; + background-repeat: no-repeat; +} +.splash.mysql { + background: + linear-gradient( + 110deg, + rgba(0,0,0,0.2) 33%, + rgba(0,0,0,0.1) 95% + ), + linear-gradient( + 110deg, + rgb(14,95,181) 33%, + rgb(48,209,178) 95% + ); +} +.splash.postgresql { + background: + linear-gradient( + 110deg, + rgba(0,0,0,0.4) 33%, + rgba(0,0,0,0.1) 95% + ), + linear-gradient( + 110deg, + rgb(78,91,150) 33%, + rgb(67,158,255) 95% + ); +} +.splash.mongodb { + background: + linear-gradient( + 110deg, + rgba(0,0,0,0.4) 33%, + rgba(0,0,0,0.1) 95% + ), + linear-gradient( + 110deg, + rgb(24,109,73) 33%, + rgb(48,209,190) 95% + ); +} +.splash.operators { + background: + linear-gradient( + 110deg, + transparent 33%, + rgba(0,0,0,0.1) 95% + ), + linear-gradient( + 110deg, + rgb(11,39,140) 33%, + rgb(20,142,255) 95% + ); +} +.splash.header { + flex-direction: column; + align-items: flex-start; + border: none; + background-repeat: no-repeat; +} + +/* Splash Contents */ + +.splash > * { + flex: 0 1 45%; +} +.splash h1, +.splash h2 { + margin-top: 0; + margin-bottom: -0.125em; +} +.splash > :last-child { + margin-bottom: 0; +} +.splash-intro { + margin: 0.5rem 0.75rem; +} +.splash-links > :not(:last-child) { + margin-bottom: 1em; +} +.splash.dark .md-button { + border-color: rgba(255, 255, 255, 0.4) +} +.splash.dark .md-button:hover { + border-color: var(--white) +} +.splash.dark .md-button--primary, +.splash.dark .md-button--primary:hover { + color: var(--stone700); +} +.splash.dark .md-button--primary:hover { + color: var(--stone900); +} +.splash.header > * { + max-width: 30rem; + z-index: 1; +} +.splash.header > :first-child { + margin: 0; +} +.splash.header img { + display: block; + position: absolute; + top: 50%; + right: 1rem; + width: 12rem; + height: 12rem; + margin: 0; + transform: translateY(-50%); + z-index: 0; +} + +/* Splash Card */ + +a.splash-card { + display: flex; + flex-direction: column; + justify-content: center; + min-height: 6.75em; + padding: 0.75rem 0.375rem 0.5rem 4.75rem; + border: 1px solid var(--md-default-fg-color--lightest); + border-radius: calc(0.25rem + 0.375vw); + cursor: pointer; + text-decoration: none !important; + color: var(--md-typeset-color); + position: relative; + background-color: var(--md-default-bg-color); + transition: all 0.2s ease-out; +} +.splash.highlight a.splash-card { + color: var(--white); + background-color: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(0.75rem); + border-color: rgba(255,255,255,0.1); +} +a.splash-card:hover { + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20); + color: var(--md-typeset-color); +} +.splash.highlight a.splash-card:hover { + background-color: rgba(255, 255, 255, 0.4); + border-color: rgba(255,255,255,0.2); + backdrop-filter: blur(1.5rem); +} +a.splash-card img { + display: block; + position: absolute; + top: 0.75rem; + left: 0.75rem; + width: 3.5rem; + height: 3.5rem; + border-radius: 0.25rem; + float: left; +} +.splash-card > * { + margin: 0 0.25rem 0.25rem 0 !important; +} +.splash-card > h3 { + font-size: 0.875rem; + margin-bottom: 0.0625rem !important; +} + +/* News elements */ + +[data-news] { + display: flex; + flex-wrap: wrap; + margin-right: -1rem; +} +[data-news] [data-article] { + flex: 0 1 calc(50% - 1rem); + display: flex; + flex-direction: column; + margin: 0 1rem 1rem 0; + padding: 0 1rem 1rem 0; + border-bottom: 1px solid var(--md-default-fg-color--lightest); +} +[data-article] > * { + margin: 0.25rem 0; +} +[data-article] > :first-child { + font-family: var(--fHeading); + font-size: 0.8rem; + /* flex-grow: 1; */ +} +[data-article] > :nth-child(2):not(:last-child) { + font-size: 0.875em; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + max-height: 2.8em; + position: relative; +} +[data-article] > :nth-child(2):not(:last-child)::after { + content: ""; + position: absolute; + display: block; + right: 0; + bottom: 0; + width: 4rem; + height: 1.4em; + background: linear-gradient(to right, transparent 0%, var(--md-default-bg-color) 50%); +} +[data-article] > :last-child > * { + margin-right: 1em; +} +[data-article] a:link { + font-family: var(--fHeading); + font-size: 0.6818rem; + font-weight: bold; + text-decoration: none; +} + +/* Conditionals */ + +@media screen and (max-width: 76.1875em) { + .md-nav--primary .md-nav__title[for=__drawer], + .md-nav--primary .md-nav__title { + background-color: var(--stone800); + } +} +@media screen and (max-width: 55em) { + .splash.header img { + right: -2rem; + opacity: 0.2; + } +} +@media screen and (max-width: 45em) { + .splash { + flex-direction: column; + } + [data-grid] [data-banner], + [data-news] [data-article] { + flex: 1 1 100%; + } +} \ No newline at end of file diff --git a/docs/css/mysql.css b/docs/css/mysql.css new file mode 100644 index 00000000..4e81656a --- /dev/null +++ b/docs/css/mysql.css @@ -0,0 +1,67 @@ +/* Overrides */ + +:root { + --md-primary-fg-color--dark: var(--sky700) +} +.md-header, +.md-tabs { + background: + -o-linear-gradient( + 340deg, + rgba(0,0,0,0.1) 33%, + rgba(0,0,0,0.2) 95% + ), + -o-linear-gradient( + 340deg, + rgb(14,95,181) 33%, + rgb(48,209,178) 95% + ); + background: + linear-gradient( + 110deg, + rgba(0,0,0,0.1) 33%, + rgba(0,0,0,0.2) 95% + ), + linear-gradient( + 110deg, + rgb(14,95,181) 33%, + rgb(48,209,178) 95% + ); +} +@media screen and (max-width: 76.1875em) { + .md-nav--primary .md-nav__title[for="__drawer"], + .md-nav--primary .md-nav__title { + background: + -o-linear-gradient( + 340deg, + rgba(0,0,0,0.1) 33%, + rgba(0,0,0,0.2) 95% + ), + -o-linear-gradient( + 340deg, + rgb(14,95,181) 33%, + rgb(48,209,178) 95% + ); + background: + linear-gradient( + 110deg, + rgba(0,0,0,0.1) 33%, + rgba(0,0,0,0.2) 95% + ), + linear-gradient( + 110deg, + rgb(14,95,181) 33%, + rgb(48,209,178) 95% + ); + } +} +.superNav, +.md-nav__source { + background-color: rgb(14,95,181); + background-image: + linear-gradient( + 110deg, + rgba(0,0,0,0.25) 33%, + rgba(0,0,0,0.25) 95% + ); +} \ No newline at end of file diff --git a/mkdocs-base.yml b/mkdocs-base.yml index 7f7434fd..c70eccbb 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -10,32 +10,38 @@ edit_uri: edit/8.0/docs/ use_directory_urls: false -# Theme for netlify testing +# Theme setup theme: name: material - logo: _static/percona-logo.svg - favicon: _static/percona-favicon.ico + logo: assets/mysql-mark.svg + favicon: assets/mysql-fav.svg font: text: Roboto code: Roboto Mono icon: edit: material/file-edit-outline view: material/file-eye-outline + palette: - - # Light mode + - media: "(prefers-color-scheme)" + toggle: + icon: material/brightness-auto + name: Color theme set to Automatic. Click to change - media: "(prefers-color-scheme: light)" scheme: percona-light + primary: custom + accent: custom toggle: - icon: material/toggle-switch-off-outline - name: Switch to dark mode - - # Dark mode + icon: material/brightness-7 + name: Color theme set to Light Mode. Click to change - media: "(prefers-color-scheme: dark)" - scheme: slate + scheme: percona-dark + primary: custom + accent: custom toggle: - icon: material/toggle-switch - name: Switch to light mode + icon: material/brightness-4 + name: Color theme set to Dark Mode. Click to change + # Theme features @@ -51,11 +57,11 @@ theme: extra_css: - https://unicons.iconscout.com/release/v3.0.3/css/line.css - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css - - css/percona.css - - css/nocopy.css - - css/osano.css - css/design.css + - css/osano.css - css/extra.css + - css/nocopy.css + - css/mysql.css extra_javascript: - js/version-select.js @@ -134,8 +140,6 @@ plugins: extra: version: provider: mike - homepage: - https://docs.percona.com nav: - Home: index.md