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 %}
+
+
+
+
+
+
+
+
+
+
+
+
+ {% 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