Skip to content

Commit 0a9d983

Browse files
johnmhoranjohnmhoran
committed
Update CSS to widen page and handle mobile #84
Reference: aboutcode-org/skeleton#84 Signed-off-by: John M. Horan <[email protected]>
1 parent af7e542 commit 0a9d983

File tree

3 files changed

+380
-351
lines changed

3 files changed

+380
-351
lines changed

‎docs/source/_static/theme_overrides.css

+18-345
Original file line numberDiff line numberDiff line change
@@ -1,353 +1,26 @@
1-
body {
2-
color: #000000;
3-
}
4-
5-
p {
6-
margin-bottom: 10px;
7-
}
8-
9-
.wy-plain-list-disc, .rst-content .section ul, .rst-content .toctree-wrapper ul, article ul {
10-
margin-bottom: 10px;
11-
}
12-
13-
.custom_header_01 {
14-
color: #cc0000;
15-
font-size: 22px;
16-
font-weight: bold;
17-
line-height: 50px;
18-
}
19-
20-
h1, h2, h3, h4, h5, h6 {
21-
margin-bottom: 20px;
22-
margin-top: 20px;
23-
}
24-
25-
h5 {
26-
font-size: 18px;
27-
color: #000000;
28-
font-style: italic;
29-
margin-bottom: 10px;
30-
}
31-
32-
h6 {
33-
font-size: 15px;
34-
color: #000000;
35-
font-style: italic;
36-
margin-bottom: 10px;
37-
}
38-
39-
/* custom admonitions */
40-
/* success */
41-
.custom-admonition-success .admonition-title {
42-
color: #000000;
43-
background: #ccffcc;
44-
border-radius: 5px 5px 0px 0px;
45-
}
46-
div.custom-admonition-success.admonition {
47-
color: #000000;
48-
background: #ffffff;
49-
border: solid 1px #cccccc;
50-
border-radius: 5px;
51-
box-shadow: 1px 1px 5px 3px #d8d8d8;
52-
margin: 20px 0px 30px 0px;
53-
}
54-
55-
/* important */
56-
.custom-admonition-important .admonition-title {
57-
color: #000000;
58-
background: #ccffcc;
59-
border-radius: 5px 5px 0px 0px;
60-
border-bottom: solid 1px #000000;
61-
}
62-
div.custom-admonition-important.admonition {
63-
color: #000000;
64-
background: #ffffff;
65-
border: solid 1px #cccccc;
66-
border-radius: 5px;
67-
box-shadow: 1px 1px 5px 3px #d8d8d8;
68-
margin: 20px 0px 30px 0px;
69-
}
70-
71-
/* caution */
72-
.custom-admonition-caution .admonition-title {
73-
color: #000000;
74-
background: #ffff99;
75-
border-radius: 5px 5px 0px 0px;
76-
border-bottom: solid 1px #e8e8e8;
77-
}
78-
div.custom-admonition-caution.admonition {
79-
color: #000000;
80-
background: #ffffff;
81-
border: solid 1px #cccccc;
82-
border-radius: 5px;
83-
box-shadow: 1px 1px 5px 3px #d8d8d8;
84-
margin: 20px 0px 30px 0px;
85-
}
86-
87-
/* note */
88-
.custom-admonition-note .admonition-title {
89-
color: #ffffff;
90-
background: #006bb3;
91-
border-radius: 5px 5px 0px 0px;
92-
}
93-
div.custom-admonition-note.admonition {
94-
color: #000000;
95-
background: #ffffff;
96-
border: solid 1px #cccccc;
97-
border-radius: 5px;
98-
box-shadow: 1px 1px 5px 3px #d8d8d8;
99-
margin: 20px 0px 30px 0px;
100-
}
101-
102-
/* todo */
103-
.custom-admonition-todo .admonition-title {
104-
color: #000000;
105-
background: #cce6ff;
106-
border-radius: 5px 5px 0px 0px;
107-
border-bottom: solid 1px #99ccff;
108-
}
109-
div.custom-admonition-todo.admonition {
110-
color: #000000;
111-
background: #ffffff;
112-
border: solid 1px #99ccff;
113-
border-radius: 5px;
114-
box-shadow: 1px 1px 5px 3px #d8d8d8;
115-
margin: 20px 0px 30px 0px;
116-
}
117-
118-
/* examples */
119-
.custom-admonition-examples .admonition-title {
120-
color: #000000;
121-
background: #ffe6cc;
122-
border-radius: 5px 5px 0px 0px;
123-
border-bottom: solid 1px #d8d8d8;
124-
}
125-
div.custom-admonition-examples.admonition {
126-
color: #000000;
127-
background: #ffffff;
128-
border: solid 1px #cccccc;
129-
border-radius: 5px;
130-
box-shadow: 1px 1px 5px 3px #d8d8d8;
131-
margin: 20px 0px 30px 0px;
132-
}
133-
1+
/* this is the container for the pages */
1342
.wy-nav-content {
1353
max-width: 100%;
136-
padding-right: 100px;
137-
padding-left: 100px;
138-
background-color: #f2f2f2;
139-
}
140-
141-
div.rst-content {
142-
background-color: #ffffff;
143-
border: solid 1px #e5e5e5;
144-
padding: 20px 40px 20px 40px;
145-
}
146-
147-
.rst-content .guilabel {
148-
border: 1px solid #ffff99;
149-
background: #ffff99;
150-
font-size: 100%;
151-
font-weight: normal;
152-
border-radius: 4px;
153-
padding: 2px 0px;
154-
margin: auto 2px;
155-
vertical-align: middle;
156-
}
157-
158-
.rst-content kbd {
159-
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
160-
border: solid 1px #d8d8d8;
161-
background-color: #f5f5f5;
162-
padding: 0px 3px;
163-
border-radius: 3px;
164-
}
165-
166-
.wy-nav-content-wrap a {
167-
color: #0066cc;
168-
text-decoration: none;
169-
}
170-
.wy-nav-content-wrap a:hover {
171-
color: #0099cc;
172-
text-decoration: underline;
173-
}
174-
175-
.wy-nav-top a {
176-
color: #ffffff;
177-
}
178-
179-
/* Based on numerous similar approaches e.g., https://github.com/readthedocs/sphinx_rtd_theme/issues/117 and https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html -- but remove form-factor limits to enable table wrap on full-size and smallest-size form factors */
180-
.wy-table-responsive table td {
181-
white-space: normal !important;
182-
}
183-
184-
.rst-content table.docutils td,
185-
.rst-content table.docutils th {
186-
padding: 5px 10px 5px 10px;
187-
}
188-
.rst-content table.docutils td p,
189-
.rst-content table.docutils th p {
190-
font-size: 14px;
191-
margin-bottom: 0px;
192-
}
193-
.rst-content table.docutils td p cite,
194-
.rst-content table.docutils th p cite {
195-
font-size: 14px;
196-
background-color: transparent;
197-
}
198-
199-
.colwidths-given th {
200-
border: solid 1px #d8d8d8 !important;
201-
}
202-
.colwidths-given td {
203-
border: solid 1px #d8d8d8 !important;
204-
}
205-
206-
/*handles single-tick inline code*/
207-
.wy-body-for-nav cite {
208-
color: #000000;
209-
background-color: transparent;
210-
font-style: normal;
211-
font-family: "Courier New";
212-
font-size: 13px;
213-
padding: 3px 3px 3px 3px;
214-
}
215-
216-
.rst-content pre.literal-block, .rst-content div[class^="highlight"] pre, .rst-content .linenodiv pre {
217-
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
218-
font-size: 13px;
219-
overflow: visible;
220-
white-space: pre-wrap;
221-
color: #000000;
222-
}
223-
224-
.rst-content pre.literal-block, .rst-content div[class^='highlight'] {
225-
background-color: #f8f8f8;
226-
border: solid 1px #e8e8e8;
227-
}
228-
229-
/* This enables inline code to wrap. */
230-
code, .rst-content tt, .rst-content code {
231-
white-space: pre-wrap;
232-
padding: 2px 3px 1px;
233-
border-radius: 3px;
234-
font-size: 13px;
235-
background-color: #ffffff;
236-
}
237-
238-
/* use this added class for code blocks attached to bulleted list items */
239-
.highlight-top-margin {
240-
margin-top: 20px !important;
241-
}
242-
243-
/* change color of inline code block */
244-
span.pre {
245-
color: #e01e5a;
246-
}
247-
248-
.wy-body-for-nav blockquote {
249-
margin: 1em 0;
250-
padding-left: 1em;
251-
border-left: 4px solid #ddd;
252-
color: #000000;
253-
}
254-
255-
/* Fix the unwanted top and bottom padding inside a nested bulleted/numbered list */
256-
.rst-content .section ol p, .rst-content .section ul p {
257-
margin-bottom: 0px;
258-
}
259-
260-
/* add spacing between bullets for legibility */
261-
.rst-content .section ol li, .rst-content .section ul li {
262-
margin-bottom: 5px;
263-
}
264-
265-
.rst-content .section ol li:first-child, .rst-content .section ul li:first-child {
266-
margin-top: 5px;
267-
}
268-
269-
/* but exclude the toctree bullets */
270-
.rst-content .toctree-wrapper ul li, .rst-content .toctree-wrapper ul li:first-child {
4+
padding: 0px 40px 0px 0px;
2715
margin-top: 0px;
272-
margin-bottom: 0px;
2736
}
2747

275-
/* remove extra space at bottom of multine list-table cell */
276-
.rst-content .line-block {
277-
margin-left: 0px;
278-
margin-bottom: 0px;
279-
line-height: 24px;
8+
.wy-nav-content-wrap {
9+
border-right: solid 1px;
28010
}
28111

282-
/* fix extra vertical spacing in page toctree */
283-
.rst-content .toctree-wrapper ul li ul, article ul li ul {
284-
margin-top: 0;
285-
margin-bottom: 0;
286-
}
287-
288-
/* this is used by the genindex added via layout.html (see source/_templates/) to sidebar toc */
289-
.reference.internal.toc-index {
290-
color: #d9d9d9;
291-
}
292-
293-
.reference.internal.toc-index.current {
294-
background-color: #ffffff;
295-
color: #000000;
296-
font-weight: bold;
297-
}
298-
299-
.toc-index-div {
300-
border-top: solid 1px #000000;
301-
margin-top: 10px;
302-
padding-top: 5px;
303-
}
304-
305-
.indextable ul li {
306-
font-size: 14px;
307-
margin-bottom: 5px;
308-
}
309-
310-
/* The next 2 fix the poor vertical spacing in genindex.html (the alphabetized index) */
311-
.indextable.genindextable {
312-
margin-bottom: 20px;
313-
}
314-
315-
div.genindex-jumpbox {
316-
margin-bottom: 10px;
317-
}
318-
319-
/* rst image classes */
320-
321-
.clear-both {
322-
clear: both;
323-
}
324-
325-
.float-left {
326-
float: left;
327-
margin-right: 20px;
328-
}
329-
330-
img {
331-
border: solid 1px #e8e8e8;
332-
}
333-
334-
/* These are custom and need to be defined in conf.py to access in all pages, e.g., '.. role:: red' */
335-
.img-title {
336-
color: #000000;
337-
/* neither padding nor margin works for vertical spacing bc it's a span -- line-height does, sort of */
338-
line-height: 3.0;
339-
font-style: italic;
340-
font-weight: 600;
341-
}
342-
343-
.img-title-para {
344-
color: #000000;
345-
margin-top: 20px;
346-
margin-bottom: 0px;
347-
font-style: italic;
348-
font-weight: 500;
349-
}
350-
351-
.red {
352-
color: red;
12+
div.rst-content {
13+
max-width: 1300px;
14+
border: 0;
15+
padding: 0px 80px 10px 80px;
16+
margin-left: 50px;
17+
}
18+
19+
@media (max-width: 768px) {
20+
div.rst-content {
21+
max-width: 1300px;
22+
border: 0;
23+
padding: 0px 10px 10px 10px;
24+
margin-left: 0px;
25+
}
35326
}

0 commit comments

Comments
 (0)