Skip to content

Commit

Permalink
docs: Move documentation site to Sphinx Immaterial (#1087)
Browse files Browse the repository at this point in the history 
Hi all,

This PR implements the move from the existing Sphinx documentation theme
to [sphinx-immaterial](https://jbms.github.io/sphinx-immaterial/) for
the documentation website.

This is still a work in progress. So far, this PR:
- Closes #944, 
- Closes #889 
- Closes #888 
- Addresses most of #765 

Pending are a few dark mode fixes, some API documentation page
improvements and updates to any graphics on the site.

To see a rendered/live version of this PR, go to
https://melissawm.github.io/cryoet-data-portal

Note: I plan on squashing the commits before merging, let me know what
is the preferred workflow for that. I am also keeping this as a draft
for now because more changes are incoming.

---------

Co-authored-by: Kira Evans <[email protected]>
  • Loading branch information
@melissawm @kne42
melissawm and kne42 authored Sep 6, 2024
1 parent 50bf5e7 commit 5d549dc
Show file tree
Hide file tree
Showing 28 changed files with 943 additions and 598 deletions.
2 changes: 1 addition & 1 deletion client/python/cryoet_data_portal/src/cryoet_data_portal/__init__.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"""
An API client library to facilitate use of the Cryo-Electron Tomography portal API. The Portal is a collection of high quality tomograms and metadata.
For more information on the API, visit the [cryoet-data-portal repo](https://github.com/chanzuckerberg/cryoet-data-portal/)
For more information on the API, visit the cryoet-data-portal repo: https://github.com/chanzuckerberg/cryoet-data-portal/
"""

from ._client import Client
Expand Down
12 changes: 9 additions & 3 deletions client/python/cryoet_data_portal/src/cryoet_data_portal/_gql_base.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,15 +244,21 @@ def find(
Search filters are combined with *and* so all results will match all filters.
Expressions with python-native operators (``==``, ``!=``, ``>``, ``>=``, ``<``, ``<=``) must be in the format:
``ModelSubclass.field`` ``{operator}`` ``{value}``
Example:
- ``Tomogram.voxel_spacing.run.name == "RUN1"``
- ``Tomogram.voxel_spacing.run.name == "RUN1"``
Expressions with method operators (``like``, ``ilike``, ``_in``) must be in the format:
``ModelSubclass.field.{operator}({value})``
Examples:
- ``Tomogram.voxel_spacing.run.name.like("%RUN1%")``
- ``Tomogram.voxel_spacing.run.name._in(["RUN1", "RUN2"])``
- ``Tomogram.voxel_spacing.run.name.like("%RUN1%")``
- ``Tomogram.voxel_spacing.run.name._in(["RUN1", "RUN2"])``
Supported operators are: ``==``, ``!=``, ``>``, ``>=``, ``<``, ``<=``, ``like``, ``ilike``, ``_in``
Expand Down
312 changes: 204 additions & 108 deletions docs/_static/css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,230 @@
body {
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
/* Main textual elements */

html, body {
--md-text-font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.md-typeset {
font-size: 14px;
letter-spacing: 0.09px;
font-family: "Inter";
}

.md-typeset a {
color: rgb(1 66 164);
}

/* Header */
.md-header {
background-color: black;
}

.md-header__button.md-logo {
display: none;
}

.md-header__topic {
align-items: center;
position: relative;
}

.md-ellipsis {
font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
.md-ellipsis--cet>img {
vertical-align: sub;
}

.navbar-cet {
width: 100%;
height: 48px;
background-color: #10161A;
position: fixed;
z-index: 1;
.md-ellipsis--cet {
font-size: 16px;
font-weight: 600;
color: white;
}

.navbar-cet-link {
display: inline-block;
background: none;
border-radius: 0;
color: #A7B6C2;
font-size: 13px;
font-weight: 500;
height: 22px;
letter-spacing: -0.1px;
line-height: 22px;
min-height: 22px;
padding: 0;
[dir="ltr"] .md-header__title {
margin-left: 1.1rem;
}

.navbar-divider {
background-color: #767676;
/* Vertical line in header */
.hv {
border-left: 1px solid white;
height: 18px;
padding-right: 12px;
margin-left: 16px;
opacity: 0.8;
}

/* Search bar */
.md-search__form, .md-search__form:hover {
background-color: #282A34;
}

@media screen and (min-width: 1024px) {
.md-search__inner {
width: 14rem;
}
}

/* Fixes for mobile navbar */
@media screen and (max-width: 1024px) {
.md-nav--primary .md-nav__title[for="__drawer"] {
background-color: black;
margin-top: -2rem;
text-wrap: wrap;
line-height: 1.5;
}

.md-header__topic {
display: flex;
flex-direction: column;
align-items: baseline;
}

.md-header__title {
height: auto;
border: none;
width: 1px;
margin: 0;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.md-ellipsis--cet {
line-height: 1.5;
}

.md-nav--primary .md-nav__title .md-logo {
display: none;
}

.md-source__facts {
display: none;
}

.md-grid {
max-width: 100% !important;
}
}

.navbar-cet-anchor {
color: #A7B6C2;
@media screen and (max-width: 1024px) {
.md-nav__source {
background-color: black;
}
}

.navbar-cet-anchor:visited {
color: #A7B6C2;
/* Navigation tabs (top) */
.md-tabs {
background-color: black;
}

.navbar-cet-anchor:hover {
color: white;
[dir="ltr"] .md-tabs__list {
margin-left: .7rem;
}

.wy-side-nav-search {
background-color: #6f67ff;
/* Content area */
.md-grid {
max-width: 80%;
}

.wy-nav-side {
background: #0e1214;
.md-content {
margin-left: 9px;
}

.wy-menu-vertical a {
color: #96a7b5;
/* Left sidebar */
.md-nav--primary .md-nav__title {
box-shadow: none;
}

.wy-menu-vertical a:hover {
.md-sidebar {
padding-left: 0.5rem;
}

/* Prevents duplicate entry for the tutorials page - sphinx immaterial bug? */
li.md-nav__item.md-nav__item--active.md-nav__current-toc {
display: none;
}

/* Right sidebar */
ul.md-nav__list > li.md-nav__item > a.md-nav__link > span.md-ellipsis {
font-size: 0.7rem;
}

.md-nav__link--active > span.md-ellipsis {
font-weight: 600;
}

/* Footer */

.md-footer {
background-color: #EFF2FC;
color: black;
}

.md-footer-meta {
background-color: black;
color: white;
max-height: fit-content;
}

html .md-footer-meta.md-typeset a {
color: var(--md-footer-fg-color--light);
text-decoration: underline;
}

.wy-nav-content-wrap {
background: white;
}

.wy-nav-content {
max-width: 1200px;
background: white;
}

/* Custom colors */

.rst-content .admonition,.rst-content .admonition-todo,.rst-content .attention,.rst-content .caution,.rst-content .danger,.rst-content .error,.rst-content .hint,.rst-content .important,.rst-content .note,.rst-content .seealso,.rst-content .tip,.rst-content .warning,.wy-alert{
padding:12px;
line-height:24px;
margin-bottom:24px;
background:#e0f0ff
}

.rst-content .note,.rst-content .seealso,.rst-content .wy-alert-info.admonition,.rst-content .wy-alert-info.admonition-todo,.rst-content .wy-alert-info.attention,.rst-content .wy-alert-info.caution,.rst-content .wy-alert-info.danger,.rst-content .wy-alert-info.error,.rst-content .wy-alert-info.hint,.rst-content .wy-alert-info.important,.rst-content .wy-alert-info.tip,.rst-content .wy-alert-info.warning,.wy-alert.wy-alert-info{
background:#e0f0ff
}

html.writer-html4 .rst-content dl:not(.docutils)>dt,html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple)>dt{
display:table;
margin:6px 0;
font-size:90%;
line-height:normal;
background:#e0f0ff;
color:#0073ff;
border-top:3px solid #8cc3ff;
padding:6px;
position:relative
}

.rst-content .guilabel{
border:1px solid #7fbbe3;
background:#e0f0ff;
font-size:80%;
font-weight:700;
border-radius:4px;
padding:2.4px 6px;
margin:auto 2px
}

.rst-content .wy-alert-neutral.admonition-todo a,.rst-content .wy-alert-neutral.admonition a,.rst-content .wy-alert-neutral.attention a,.rst-content .wy-alert-neutral.caution a,.rst-content .wy-alert-neutral.danger a,.rst-content .wy-alert-neutral.error a,.rst-content .wy-alert-neutral.hint a,.rst-content .wy-alert-neutral.important a,.rst-content .wy-alert-neutral.note a,.rst-content .wy-alert-neutral.seealso a,.rst-content .wy-alert-neutral.tip a,.rst-content .wy-alert-neutral.warning a,.wy-alert.wy-alert-neutral a{ color:#0073ff}
.wy-tray-container li.wy-tray-item-info{ background:#0073ff}
.btn-info{ background-color:#0073ff!important}
.btn-link{ background-color:transparent!important; color:#0073ff; box-shadow:none; border-color:transparent!important}
.wy-dropdown-menu>dd>a:hover{ background:#0073ff; color:#fff}
.wy-dropdown.wy-dropdown-bubble .wy-dropdown-menu a:hover{ background:#0073ff; color:#fff}
.wy-inline-validate.wy-inline-validate-info .wy-input-context{ color:#0073ff}
a{ color:#0073ff; text-decoration:none; cursor:pointer}
.wy-text-info{ color:#0073ff!important}
.wy-menu-vertical a:active{ background-color:#0073ff; cursor:pointer; color:#fff}
.wy-side-nav-search{ display:block; width:300px; padding:.809em; margin-bottom:.809em; z-index:200; background-color:#0073ff; text-align:center; color:#fcfcfc}
.wy-side-nav-search img{ display:block; margin:auto auto .809em; height:45px; width:45px; background-color:#0073ff; padding:5px; border-radius:100%}
.wy-nav .wy-menu-vertical header{ color:#0073ff}
.wy-nav .wy-menu-vertical a:hover{ background-color:#0073ff; color:#fff}
.wy-nav-top{ display:none; background:#0073ff; color:#fff; padding:.4045em .809em; position:relative; line-height:50px; text-align:center; font-size:100%; *zoom:1}
.wy-nav-top img{ margin-right:12px; height:45px; width:45px; background-color:#0073ff; padding:5px; border-radius:100%}
.rst-versions a{ color:#0073ff; text-decoration:none}
.rst-content a code,.rst-content a tt{ color:#0073ff}
html.writer-html4 .rst-content dl:not(.docutils)>dt,html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple)>dt{ display:table; margin:6px 0; font-size:90%; line-height:normal; background:#e7f2fa; color:#0073ff; border-top:3px solid #8cc3ff; padding:6px; position:relative}

.rst-content .admonition-title,.wy-alert-title{ font-weight:700; display:block; color:#fff; background:#8cc3ff; padding:6px 12px; margin:-12px -12px 12px}
.rst-content .note .admonition-title,.rst-content .note .wy-alert-title,.rst-content .seealso .admonition-title,.rst-content .seealso .wy-alert-title,.rst-content .wy-alert-info.admonition-todo .admonition-title,.rst-content .wy-alert-info.admonition-todo .wy-alert-title,.rst-content .wy-alert-info.admonition .admonition-title,.rst-content .wy-alert-info.admonition .wy-alert-title,.rst-content .wy-alert-info.attention .admonition-title,.rst-content .wy-alert-info.attention .wy-alert-title,.rst-content .wy-alert-info.caution .admonition-title,.rst-content .wy-alert-info.caution .wy-alert-title,.rst-content .wy-alert-info.danger .admonition-title,.rst-content .wy-alert-info.danger .wy-alert-title,.rst-content .wy-alert-info.error .admonition-title,.rst-content .wy-alert-info.error .wy-alert-title,.rst-content .wy-alert-info.hint .admonition-title,.rst-content .wy-alert-info.hint .wy-alert-title,.rst-content .wy-alert-info.important .admonition-title,.rst-content .wy-alert-info.important .wy-alert-title,.rst-content .wy-alert-info.tip .admonition-title,.rst-content .wy-alert-info.tip .wy-alert-title,.rst-content .wy-alert-info.warning .admonition-title,.rst-content .wy-alert-info.warning .wy-alert-title,.rst-content .wy-alert.wy-alert-info .admonition-title,.wy-alert.wy-alert-info .rst-content .admonition-title,.wy-alert.wy-alert-info .wy-alert-title{ background:#8cc3ff}
html.writer-html4 .rst-content dl:not(.docutils)>dt,html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple)>dt{ display:table; margin:6px 0; font-size:90%; line-height:normal; background:#e7f2fa; color:#0073ff; border-top:3px solid #8cc3ff; padding:6px; position:relative}
html.writer-html4 .rst-content dl:not(.docutils)>dt:before,html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple)>dt:before{ color:#8cc3ff}
.md-footer-meta__inner {
color: black;
flex-direction: column;
max-width: 80%;
padding-left: 1.35rem;
padding-right: 1.35rem;
}

.czi {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.czi-inner {
display: flex;
flex-direction: row;
padding-top: 0.4rem;
align-items: center;
color: white;
}

/* Vertical line in footer */
.vl {
border-left: 1px solid white;
height: 34px;
opacity: 0.4;
margin-right: 22px;
margin-left: 22px;
margin-bottom: 4px;
}

.md-copyright {
margin-left: 0rem;
}

/* Footer mobile display */
@media (max-width: 1024px) {
.vl, .hv {
display: none;
}
.czi-footer {
display: flex;
flex-direction: column;
align-items: baseline;
}

.czi-inner {
display: flex;
flex-direction: column;
align-items: baseline;
}

.czi {
display: flex;
flex-direction: column;
align-items: baseline;
}
}
1 change: 1 addition & 0 deletions docs/_static/img/beta.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/_static/img/favicon-cryoet-data-portal.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/_static/img/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 5d549dc

Please sign in to comment.