diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css index b0a6a42..c3c40e2 100644 --- a/docs/_static/css/landing.css +++ b/docs/_static/css/landing.css @@ -58,26 +58,43 @@ --shadow: 0px 2px 2px rgba(0, 0, 0, 0.11); } -/* callout boxes */ -.callout { - border-left: solid 1px var(--pst-color-border); - border-bottom: solid 1px var(--pst-color-border); - border-right: solid 1px var(--pst-color-border); - border-bottom-right-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); - box-shadow: var(--shadow); - margin-bottom: 20px; - padding: 28px 20px 20px; - position: relative; +/* Introductory title. */ +.intro-title { + color: var(--pst-color-primary); + font-family: var(--pst-font-family-heading); + font-size: var(--pst-font-size-h2); + font-weight: var(--regular) !important; } -.callout__list { - display: flex; - flex-direction: row; +.mpl-card-title { + color: var(--pst-color-text-base); + font-family: var(--pst-font-family-heading); + font-size: var(--pst-font-size-h3); + font-weight: var(--regular) !important; } -.callout__list p{ - margin: 1em 0; +.mpl-card-resources ul { + list-style-type: none; + padding: 0; + display: table; + border-collapse: separate; + border-spacing: 0 1em; +} + +.mpl-card-resources ul li { + display: table-row; +} + +.mpl-card-resources ul li p { + display: table-cell; + vertical-align: middle; +} + +/* callout boxes */ +.callout { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-bottom: 20px; } .callout::before { @@ -91,41 +108,43 @@ background-color: var(--blue); } -.callout--purple::before { +.callout-purple::before { background-image: var(--viridis-purple); } -.callout--blue::before { +.callout-blue::before { background-image: var(--viridis-blue); } -.callout--teal::before { +.callout-teal::before { background-image: var(--viridis-teal); } -.callout--green::before { +.callout-green::before { background-image: var(--viridis-green); } -.callout__icon { +.mpl-callout-title { + color: var(--pst-color-text-base); + font-family: var(--pst-font-family-heading); + font-size: var(--pst-font-size-h4); + font-weight: var(--regular) !important; +} + +.callout-icon { color: var(--pst-color-primary); font-size: 2em; margin: auto 10px auto 0; } -.callout > * { - margin-top: 0; -} /* offsite links */ -a.link--offsite { +a.link-offsite, div.link-offsite a { font-size: var(--pst-font-size-h5); - display: block; - position: relative; - left: 0; + padding-left: 0; transition: left 0.2s ease-in-out; } -a.link--offsite::after { +a.link-offsite::after, div.link-offsite a::after { display: inline-block; font-style: normal; font-variant: normal; @@ -143,193 +162,90 @@ a.link--offsite::after { border: none; height: 1px; margin-bottom: 0em; + margin-top: 1em; } -.rule--viridis { +.rule-viridis { background-image: var(--viridis); height: 3px; margin-bottom: 0em; } /* Quicklinks */ -.quicklinks { - padding: 0; - list-style-type: none; - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; -} -.quicklinks a { - display: flex; - flex-direction: column; - align-items: center; - flex: 1 1 100px; - font-size: var(--heading-4); - font-family: var(--heading-font); +.quicklink { + text-decoration: underline; } -.quicklinks a, .quicklinks a:visited, -.quicklinks a:hover, .quicklinks a:visited:hover { - color: var(--default-text); +.quicklink:hover { + text-decoration-thickness: max(3px,.1875rem,.12em); } -.quicklinks__icon { +.quicklink img { width: 1in; - display: block; - margin-bottom: 10px; -} - -@media (max-width: 700px) { - .quicklinks__icon { - width: 60px; - } - .quicklinks a { - font-size: var(--base-font); - } - .quicklinks li { - margin-bottom: 20px; - } + margin: 0 auto; } /* News */ -.news { - display: flex; - flex-direction: column; - justify-content: space-between; - margin-bottom: 2em; -} -.news__item:not(:last-of-type){ +.news-item:not(:last-of-type) { margin-bottom: 2em; } -.news__item--highlight, .news__item:last-of-type { +.news-item-highlight, .news-item:last-of-type { margin-bottom: 40px; } -.news__item .date, .news__item--highlight .date{ +.news-item-highlight p:first-of-type, .news-item p:first-of-type { + margin-bottom: 0; +} + +.news-item .date, .news-item-highlight .date { margin: 1em 0 .5em; } .date{ font-size: small; } + /* tab switcher */ .tools { min-height: 280px; } -.tabs { - padding: 0; - padding: 0; - list-style-type: none; - display: flex; - flex-direction: column; - justify-content: space-evenly; - position: relative; -} - -.tabs__tab { - border: none; - text-align: right; - line-height: 1em; - cursor: pointer; - padding: 0.5em 0; - background-color: transparent; - font-family: var(--heading-font); - color: var(--pst-color-link); - font-size: var(--heading-4); - font-weight: var(--bold); - transition: left 0.2s ease-out; - position: relative; - left: 0; -} - -.tabs__tab:hover { - left: 8px; -} - -.tabs__content { - border-top: solid 1px var(--pst-color-border); - border-bottom: solid 1px var(--pst-color-border); - border-right: solid 1px var(--pst-color-border); - flex-grow: 1; - padding: 20px 40px 20px 50px; - position: relative; -} - -.tabs::before { - content: ""; - width: 8px; - height: 100%; - background-color: var(--dark-purple); - position: absolute; - top: 0; - right: -20px; - display: block; - transition: background-color 0.2s ease-in-out; -} - -.tabs[data-current-tab="0"]::before { - background-color: var(--dark-purple); -} - -.tabs[data-current-tab="1"]::before { - background-color: var(--purple); -} - -.tabs[data-current-tab="2"]::before { - background-color: var(--blue); -} - -.tabs[data-current-tab="3"]::before { - background-color: var(--teal); -} - -.tabs[data-current-tab="4"]::before { - background-color: var(--green); -} - -.tabs::after { - content: ""; - width: 0; - height: 0; - border-top: 9px solid transparent; - border-left: 18px solid var(--purple); - border-bottom: 9px solid transparent; - position: absolute; - right: -38px; - top: 0; - display: block; - margin: 10% 0; - transition: top 0.2s ease-out, border-left-color 0.2s ease-in-out; -} - -.tabs[data-current-tab="0"]::after { - top: 0; - border-left-color: var(--dark-purple); +.sd-tab-label[for="sd-tab-item-0"] { + --sd-color-tabs-underline-active: var(--dark-purple); + --sd-color-tabs-underline-hover: var(--dark-purple); + --sd-color-tabs-label-active: var(--dark-purple); + --sd-color-tabs-label-hover: var(--dark-purple); } -.tabs[data-current-tab="1"]::after { - top: 20%; - border-left-color: var(--purple); +.sd-tab-label[for="sd-tab-item-1"] { + --sd-color-tabs-underline-active: var(--purple); + --sd-color-tabs-underline-hover: var(--purple); + --sd-color-tabs-label-active: var(--purple); + --sd-color-tabs-label-hover: var(--purple); } -.tabs[data-current-tab="2"]::after { - top: 40%; - border-left-color: var(--blue); +.sd-tab-label[for="sd-tab-item-2"] { + --sd-color-tabs-underline-active: var(--blue); + --sd-color-tabs-underline-hover: var(--blue); + --sd-color-tabs-label-active: var(--blue); + --sd-color-tabs-label-hover: var(--blue); } -.tabs[data-current-tab="3"]::after { - top: 60%; - border-left-color: var(--teal); +.sd-tab-label[for="sd-tab-item-3"] { + --sd-color-tabs-underline-active: var(--teal); + --sd-color-tabs-underline-hover: var(--teal); + --sd-color-tabs-label-active: var(--teal); + --sd-color-tabs-label-hover: var(--teal); } -.tabs[data-current-tab="4"]::after { - top: 80%; - border-left-color: var(--green); +.sd-tab-label[for="sd-tab-item-4"] { + --sd-color-tabs-underline-active: var(--green); + --sd-color-tabs-underline-hover: var(--green); + --sd-color-tabs-label-active: var(--green); + --sd-color-tabs-label-hover: var(--green); } /* footer */ @@ -437,142 +353,6 @@ html, body { align-items: stretch; } -@media (min-width: 960px) { - /* Undo pydata-sphinx-theme's max width setting. */ - div.bd-container__inner.bd-page-width { - max-width: inherit; - } -} - -main.bd-main { - flex-grow: 1; - display: grid; - column-gap: 20px; -} - -@media (min-width: 800px) { - main.bd-main { - grid-template-columns: - minmax(1em, auto) repeat(12, minmax(44px, 118px)) minmax(1em, auto); - grid-template-areas: - /* These are mostly two sections side-by-side (6 columns each), except - * for tools+tool-switcher which are 1/3+2/3. */ - ". intro intro intro intro intro intro intro-text intro-text intro-text intro-text intro-text intro-text ." - ". quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks ." - "rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1" - ". news news news news news news resources resources resources resources resources resources ." - "rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2" - ". tools tools tools tools tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher ." - "rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3" - ". support support support support support support support support support support support support ." - "footer footer footer footer footer footer footer footer footer footer footer footer footer footer"; - } -} - -@media (max-width: 799px) { - main.bd-main { - margin-top: 0px; - grid-template-columns: 1em auto 1em; - grid-template-areas: - ". intro-text ." - ". intro ." - ". quicklinks ." - "rule1 rule1 rule1" - ". resources ." - ". news ." - "rule2 rule2 rule2" - ". tools ." - ". tool-switcher ." - "rule3 rule3 rule3" - ". support ." - "footer footer footer"; - } -} - -.grid__full-page { - grid-area: intro-start / intro-start / footer-start / intro-text-end; -} - -.grid__intro-text { - grid-area: intro-text; -} - -.grid__intro { - margin-top: 4em; - grid-area: intro; -} - -.grid__quicklinks { - margin-top: 2em; - grid-area: quicklinks; -} - -@media (min-width: 1000px) { - .grid__quicklinks { - padding: 0 100px; - } -} - -.grid__rule1 { - margin-top: 1em; - grid-area: rule1; -} - -.grid__resources { - grid-area: resources; -} - -.grid__news { - grid-area: news; -} - -.grid__rule2 { - margin-top: 1em; - grid-area: rule2; -} - -.grid__tools { - margin-top: 2em; - margin-bottom: 2em; - grid-area: tools; -} - -.grid__tools-switcher { - margin-top: 2em; - margin-bottom: 2em; - grid-area: tool-switcher; -} - -.grid__rule3 { - margin-top: 1em; - grid-area: rule3; -} - -.grid__support { - grid-area: support; -} - -.grid__contribute { - grid-area: contribute; -} - -.support__items { - list-style-type: none; - padding: 0; -} - -@media (min-width: 800px) { - .support__items { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } -} - -.support__items .callout { - flex: 0 0 calc(33.333333% - 13.3333333333333px); -} - footer { grid-area: footer; display: grid; @@ -616,39 +396,6 @@ footer { grid-area: release; } -.grid__tools-switcher__tabs { - display: grid; - gap: 2em; -} - -@media (min-width: 800px) { - .grid__tools-switcher__tabs { - grid-template-columns: - minmax(44px, 118px) minmax(44px, 118px) minmax(44px, 118px) - minmax(44px, 118px) minmax(44px, 118px) minmax(44px, 118px) minmax( - 44px, - 118px - ) - minmax(44px, 118px); - grid-template-areas: "tabs tabs panel panel panel panel panel panel"; - } -} - -@media (max-width: 799px) { - .grid__tools-switcher__tabs { - grid-template-columns: 30% auto; - grid-template-areas: "tabs panel"; - } -} - -.grid__tabs__tabs { - grid-area: tabs; -} - -.grid__tabs__panel { - grid-area: panel; -} - /* buttons */ .button, a.button { @@ -657,6 +404,7 @@ a.button { width: fit-content; width: -moz-fit-content; display: block; + border: none; border-radius: var(--border-radius); color: var(--white); margin: 1em 0; @@ -685,37 +433,37 @@ a.button:hover::after { margin-left: 80px; } -.button--purple, -a.button--purple { +.button-purple, +a.button-purple { background: var(--viridis-purple); } -.button--blue, -a.button--blue { +.button-blue, +a.button-blue { background: var(--viridis-blue); } -.button--teal, -a.button--teal { +.button-teal, +a.button-teal { background: var(--viridis-teal); } -.button--green, -a.button--green, -a.button--green:hover { +.button-green, +a.button-green, +a.button-green:hover { background: var(--viridis-green); color: var(--black); } -.button--green::after, -a.button--green::after { +.button-green::after, +a.button-green::after { content: "\f061"; /* fa-arrow-right */ font-family: "Font Awesome 5 Free"; font-weight: 900; } .imrot-img { - display: flex; + display: flex; margin: auto; max-width:18em; align-self: center; diff --git a/docs/_static/script.js b/docs/_static/script.js index a94e644..10fe655 100644 --- a/docs/_static/script.js +++ b/docs/_static/script.js @@ -1,50 +1,8 @@ -// accessible JavaScript tab switcher -// modified from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role - function getRandomInt(max) { return Math.floor(Math.random() * max); } document.addEventListener("DOMContentLoaded", function(event) { - const tabs = document.querySelectorAll('[role="tab"]'); - const tabList = document.querySelector('[role="tablist"]'); - - // set currently active tab to 0 - tabList.setAttribute("data-current-tab", 0); - - // Add a click event handler to each tab - tabs.forEach((tab, i) => { - tab.addEventListener("click", changeTabs); - tab.setAttribute("data-tab-count", i); - }); - - // Enable arrow navigation between tabs in the tab list - let tabFocus = 0; - - tabList.addEventListener("keydown", e => { - // Move right - if (e.keyCode === 39 || e.keyCode === 37) { - tabs[tabFocus].setAttribute("tabindex", -1); - if (e.keyCode === 39) { - tabFocus++; - // If we're at the end, go to the start - if (tabFocus >= tabs.length) { - tabFocus = 0; - } - // Move left - } else if (e.keyCode === 37) { - tabFocus--; - // If we're at the start, move to the end - if (tabFocus < 0) { - tabFocus = tabs.length - 1; - } - } - - tabs[tabFocus].setAttribute("tabindex", 0); - tabs[tabFocus].focus(); - } - }); - /////////////////////////////////////// // rotate images in images-rotate directory: var ind = getRandomInt(images_rotate.length); @@ -56,33 +14,5 @@ document.addEventListener("DOMContentLoaded", function(event) { '' + '
' + ''; - document.getElementById('image_rotator').innerHTML = html; - + document.getElementById('image-rotator').innerHTML = html; }); - -function changeTabs(e) { - const target = e.target; - const parent = target.parentNode; - const grandparent = parent.parentNode; - - // set attribute for currently active tab for setting the location of the pointer triangle - parent.setAttribute("data-current-tab", e.target.getAttribute("data-tab-count")); - - // Remove all current selected tabs - parent - .querySelectorAll('[aria-selected="true"]') - .forEach(t => t.setAttribute("aria-selected", false)); - - // Set this tab as selected - target.setAttribute("aria-selected", true); - - // Hide all tab panels - grandparent - .querySelectorAll('[role="tabpanel"]') - .forEach(p => p.setAttribute("hidden", true)); - - // Show the selected panel - grandparent.parentNode - .querySelector(`#${target.getAttribute("aria-controls")}`) - .removeAttribute("hidden"); -} diff --git a/docs/_templates/landing_footer.html b/docs/_templates/landing_footer.html index e502188..bf35027 100644 --- a/docs/_templates/landing_footer.html +++ b/docs/_templates/landing_footer.html @@ -30,7 +30,7 @@{{ copyright }}
diff --git a/docs/body.html b/docs/body.html deleted file mode 100644 index d089ad8..0000000 --- a/docs/body.html +++ /dev/null @@ -1,457 +0,0 @@ -- Matplotlib is a comprehensive library for creating static, animated, - and interactive visualizations in Python. Matplotlib makes easy things - easy and hard things possible. -
- -- A warm welcome to Trygve Magnus Ræder, who is working on bivariate colormapping. -
-- We thank the 175 authors for the 450 pull requests that comprise the 3.9.0 release. -
-- Be sure to check the - Users - guide and the - API - docs. The full text - search is a - good way to discover the docs including the many examples. -
-- Join our community at - discourse.matplotlib.org - to get help, share your work, and discuss contributing & - development. -
-- Check out the Matplotlib tag on - StackOverflow. -
-- Meet us at our monthly call for new contributors to the Matplotlib - project. Subscribe to our - community calendar - at Scientific Python to get access to all our community meetings. -
-- Short questions related to contributing to Matplotlib may be posted on the - gitter - channel. -
-- A large number of third party packages extend and build on Matplotlib - functionality, including several higher-level plotting interfaces - (seaborn, HoloViews, ggplot, ...), and a projection and mapping - toolkit (Cartopy). -
- More Domain-Specific Tools -- seaborn is a high level interface for drawing statistical graphics - with Matplotlib. It aims to make visualization a central part of - exploring and understanding complex datasets. -
- statistical data visualization -- Cartopy is a Python package designed for geospatial data - processing in order to produce maps and other geospatial data - analyses. -
- - Cartopy -- DNA Features Viewer is a Python library to visualize DNA features, - e.g. from GenBank or Gff files, or Biopython SeqRecords. -
- DNA Features Viewer -- plotnine is an implementation of a grammar of graphics in Python. - The grammar allows users to compose plots by explicitly mapping - data to the visual objects that make up the plot. -
- plotnine -- WCSAxes is a framework for making plots of Astronomical data in - Matplotlib. -
- WCSAxes -- Matplotlib is a community project maintained for and by its users -
-- You can help by answering questions - on discourse, - reporting a bug or requesting a feature - on GitHub, or improving the - documentation and code! -
- Join us on Discourse - Join us on GitHub -- Matplotlib is the result of development efforts by John Hunter - (1968–2012) and the project's - many contributors. -
-- If Matplotlib contributes to a project that leads to a scientific - publication, please acknowledge this work by citing the project! -
- Ready made citation -- If you would like to support Matplotlib financially you can - donate by - - sponsoring Matplotlib on GitHub - or making a (USA) tax-deductible donation - - through NumFOCUS. -
- Sponsor on GitHub - Donate to Matplotlib -