1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
.. COPY FROM PYDATA THEME DOCS
Colors
******
This theme specifies color variables for the primary and secondary colors (``--pst-color-primary`` and ``--pst-color-secondary``, respectively).
These are meant to complement one another visually across the theme, if you modify these, choose colors that look good when paired with one another.
There are also several other color variables that control the color for admonitions, links, menu items, etc.
Each color variable has two values, one corresponding to the "light" and one for the "dark" theme.
These are used throughout many of the theme elements to define text color, background color, etc.
Here is an overview of the colors available in the theme (change theme mode to switch from light to dark versions).
.. raw:: html
<style>
span.pst-primary {background-color: var(--pst-color-primary);}
span.pst-secondary {background-color: var(--pst-color-secondary);}
span.pst-accent {background-color: var(--pst-color-accent);}
span.pst-success {background-color: var(--pst-color-success);}
span.pst-info {background-color: var(--pst-color-info);}
span.pst-warning {background-color: var(--pst-color-warning);}
span.pst-danger {background-color: var(--pst-color-danger);}
span.pst-background {background-color: var(--pst-color-background);}
span.pst-on-background {background-color: var(--pst-color-on-background);}
span.pst-surface {background-color: var(--pst-color-surface);}
span.pst-on-surface {background-color: var(--pst-color-on-surface);}
span.pst-target {background-color: var(--pst-color-target);}
</style>
<p>
<span class="sd-sphinx-override sd-badge pst-badge pst-primary sd-bg-text-primary">primary</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-secondary sd-bg-text-secondary">secondary</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-accent sd-bg-text-secondary">accent</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-success sd-bg-text-success">success</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-info sd-bg-text-info">info</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-warning sd-bg-text-warning">warning</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-danger sd-bg-text-danger">danger</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-background">background</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-on-background">on-background</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-surface">surface</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-on-surface sd-bg-text-primary">on-surface</span>
<span class="sd-sphinx-override sd-badge pst-badge pst-target">target</span>
</p>
This theme uses shadows to convey depth in the light theme mode and opacity in the dark one.
It defines 4 color variables that help build overlays in your documentation.
- :code:`background`: color of the back-most surface of the documentation
- :code:`on-background` elements that are set on top of this background (e.g. the header navbar on dark mode).
- :code:`surface` elements set on the background with a light-grey color in the light theme mode. This color has been kept in the dark theme (e.g. code-block directives).
- :code:`on-surface` elements that are on top of :code:`surface` elements (e.g. sidebar directives).
The following image should help you understand these overlays:
.. raw:: html
<style>
/* use https://unminify.com to check the indented version of the overlay component */
.overlay-container {margin-top: 10%; left: 20%; --width: 80%; --height: 200px; width: var(--width); height: var(--height); position: relative;}
.overlay-container .pst-overlay {position: absolute; border: 2px solid var(--pst-color-border);}
.overlay-container .pst-background {background-color: var(--pst-color-background); width: var(--width); transform: skew(-45deg); height: var(--height);}
.overlay-container .pst-on-background {background-color: var(--pst-color-on-background); height: var(--height); width: calc(var(--width) / 3); transform: skew(-45deg) translate(-2rem, -2rem);}
.overlay-container .pst-surface {background-color: var(--pst-color-surface); height: var(--height); width: calc(var(--width) / 3); transform: skew(-45deg) translate(-2rem, -2rem); left: calc(var(--width) / 3 * 2);}
.overlay-container .pst-on-surface {background-color: var(--pst-color-on-surface); width: calc(var(--width) / 3); height: calc(var(--height) * 0.66); transform: skew(-45deg) translate(-2rem, -4rem); left: calc(var(--width) / 3 * 2);}
.overlay-container .label {position: absolute; bottom: 0.5rem; left: 50%; transform: skew(45deg) translateX(-50%); white-space: nowrap;}
</style>
<div class="overlay-container">
<div class="pst-overlay pst-background">
<p class="label">background</p>
</div>
<div class="pst-overlay pst-on-background">
<p class="label">on-background</p>
</div>
<div class="pst-overlay pst-surface">
<p class="label">surface</p>
</div>
<div class="pst-overlay pst-on-surface">
<p class="label sd-bg-text-primary">on-surface</p>
</div>
</div>
Admonitions
-----------
.. admonition:: Generic Admonition
Generic admonition needs content apparently
.. attention:: attention
.. caution:: caution
.. danger:: danger
.. error:: error
.. hint:: hint
.. important:: important
.. note:: note
.. tip:: tip
.. warning:: warning
Snippets
--------
Documentation :any:`index <genindex>` and :any:`Module <modindex>` index.
Some code:
.. code-block:: python
"""
Parameters
----------
x : `type`
Description of parameter x.
"""
import numpy as np
def func(x):
return np.mean(x)
# This is a comment
return func
It's good to have your upstream remote have a scary name [#]_, to remind you that it's a read-write remote:
.. code-block:: bash
$ git remote add upstream-rw git@github.com:sunpy/sunpy.git
$ git fetch upstream-rw
.. [#] Text of the first footnote.
``:func:``
:func:`numpy.mean`
``:meth:``
:meth:`numpy.mean`
``:class:``
:class:`numpy.mean`
Normal
`numpy.mean`
``:func:``
:func:`numpy.ndarray.mean`
``:meth:``
:meth:`numpy.ndarray.mean`
``:class:``
:class:`numpy.ndarray.mean`
Normal
`numpy.ndarray.mean`
Sometimes you need a URL: `bbc.com <https://www.bbc.com>`__
Contributing to ``sunraster``
|
