Skip to content

Commit 1a9ea27

Browse files
ascholerChemeketaascholerChemeketa
committed
2 parents 3ecbdb7 + 27e9959 commit 1a9ea27

18 files changed

+1201
-225
lines changed

‎banner_crc.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,7 @@
211211
grid-gap: 1em;
212212
grid-template-columns: 50px 1fr;
213213
grid-template-areas:
214-
"ptx-logobox ptx-title-byline-box"
215-
". ptx-searchbox";
214+
"ptx-logobox ptx-title-byline-box";
216215
background-color: #fff; /* #fafafa; */
217216
padding: 0px 20px 0px 20px;
218217
/*

‎banner_wide.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@import url("banner_default.css");
2+
3+
:root {
4+
--banner-background-color: #ffffff;
5+
}
6+
7+
.pretext .ptx-masthead {
8+
max-width: var(--page-width);
9+
background-color: var(--banner-background-color);
10+
margin: 0 auto;
11+
}
12+
13+
.pretext .ptx-masthead .ptx-banner {
14+
margin: 0 auto;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
max-width: var(--page-width);
19+
padding: 8px 0;
20+
}

‎colors_default.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,12 @@
4848
(The second condition will guarantee an adequate contrast with white.)
4949
*/
5050

51+
/* Part colors are not used in non-focused TOC */
52+
--parttoc: #932c1c;
53+
--parttoctext: white;
54+
--parttocactive: var(--documenttitle);
55+
--parttoctextactive: white;
56+
5157
--chaptertoc: #3572a0;
5258
--chaptertoctext: white;
5359
--chaptertocactive: var(--documenttitle); /* often the same as documenttitle */

‎colors_focused_gray_aqua.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
Sample bolder focused TOC color scheme
3+
See colors_default for general color tips
4+
*/
5+
6+
7+
:root {
8+
/* -------- general -------- */
9+
--documenttitle: #343b48;
10+
--bodytitle: #2B5F82;
11+
--bodysubtitle: #1d686e;
12+
--bodytitlehighlight: #e0e9ff;
13+
--bodysubtitlehighlight: #fce5e4;
14+
15+
--videoplay: var(--bodytitle);
16+
--assemblageborder: #343b48;
17+
--assemblagebackground: #f5f8ff;
18+
19+
--knowlborder: var(--bodytitlehighlight);
20+
--knowlbackground: var(--assemblagebackground);
21+
22+
/* -------- TOC -------- */
23+
--toc-text-dark: #343b48;
24+
--toc-text-light: white;
25+
--tocborder: var(--toc-text-dark);
26+
--active-toc-item: #e5ca34;
27+
28+
--parttoc: var(--toc-text-dark);
29+
--parttoctext: var(--toc-text-light);
30+
--parttocactive: var(--active-toc-item);
31+
--parttoctextactive: var(--toc-text-dark);
32+
33+
--chaptertoc: #1d686e;
34+
--chaptertoctext: var(--toc-text-light);
35+
--chaptertocactive: var(--active-toc-item);
36+
--chaptertoctextactive: var(--toc-text-dark);
37+
38+
--sectiontoc: #fffffd;
39+
--sectiontoctext: var(--toc-text-dark);
40+
--sectiontocactive: var(--active-toc-item);
41+
--sectiontoctextactive: var(--toc-text-dark);
42+
43+
44+
--highlighttoc: var(--active-toc-item);
45+
--highlighttoctext: var(--toc-text-dark);
46+
--highlighttocborder: var(--chaptertoc);
47+
}

‎colors_focused_light.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Sample light, non-distracting focused TOC color scheme
3+
See colors_default for general color tips
4+
*/
5+
6+
:root {
7+
/* -------- general -------- */
8+
--documenttitle: #343b48;
9+
--bodytitle: #2B5F82;
10+
--bodysubtitle: #A62E1C;
11+
--bodytitlehighlight: #e0e9ff;
12+
--bodysubtitlehighlight: #fce5e4;
13+
14+
--videoplay: var(--bodytitle);
15+
--assemblageborder: #1100aa;
16+
--assemblagebackground: #f5f8ff;
17+
18+
--knowlborder: var(--bodytitlehighlight);
19+
--knowlbackground: var(--assemblagebackground);
20+
21+
/* -------- TOC -------- */
22+
--toc-text-dark: #333;
23+
--tocborder: var(--toc-text-dark);
24+
--active-toc-item: #dbebf1;
25+
26+
--parttoc: #e8e8e8;
27+
--parttoctext: var(--toc-text-dark);
28+
--parttocactive: var(--active-toc-item);
29+
--parttoctextactive: var(--toc-text-dark);
30+
31+
--chaptertoc: #f2f2f2;
32+
--chaptertoctext: var(--toc-text-dark);
33+
--chaptertocactive: var(--active-toc-item);
34+
--chaptertoctextactive: var(--toc-text-dark);
35+
36+
--sectiontoc: #fdfdfd;
37+
--sectiontoctext: var(--toc-text-dark);
38+
--sectiontocactive: var(--active-toc-item);
39+
--sectiontoctextactive: var(--toc-text-dark);
40+
41+
--highlighttoc: #c2e5f2;
42+
--highlighttoctext: var(--toc-text-dark);
43+
--highlighttocborder: var(--chaptertoc);
44+
}

‎navbar_crc.css

Lines changed: 75 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -22,34 +22,45 @@
2222

2323

2424
/* Generic and large screen layout */
25+
.ptx-navbar .toc-toggle, .ptx-navbar .index-button, .ptx-navbar .searchbox
26+
{
27+
}
28+
29+
.ptx-navbar .nav-other-controls
30+
{
31+
margin-left: 1em;
32+
}
33+
34+
.ptx-navbar .treebuttons {
35+
display: flex;
36+
justify-content: right;
37+
}
2538

2639
.ptx-navbar .button {
27-
padding: 0 24px 0 24px;
40+
padding: 0 10px 0 10px;
2841
}
2942

3043
.ptx-navbar .treebuttons .button {
31-
padding: 0 20px 0 20px;
3244
display: flex;
3345
justify-content: center;
3446
align-items: center;
3547
}
3648

37-
.ptx-navbar .treebuttons .previous-button { padding-left: 12px; }
38-
.ptx-navbar .treebuttons .next-button { padding-right: 12px; }
49+
.ptx-navbar .treebuttons .previous-button { padding-left: 0px; }
50+
.ptx-navbar .treebuttons .next-button { padding-right: 0px; }
3951

40-
.ptx-navbar .toc-toggle {
41-
padding: 0 10px 0 10px;
52+
.ptx-navbar .nav-runestone-controls {
53+
display: flex;
4254
}
4355

4456

4557
nav.ptx-navbar {
4658
display: grid;
4759
grid-column-gap: 0em;
4860

49-
grid-template-columns: .76fr 6em 6em 1fr; /* Even gaps */
61+
grid-template-columns: auto auto auto 1fr 1fr auto;
5062
grid-template-areas:
51-
"MH-toc-area MH-extras-area1 MH-extras-area2 MH-preferences-area MH-page-navigation-area";
52-
63+
"MH-toc-area MH-extras-area1 ptx-searchbox MH-extras-area2 MH-page-navigation-area MH-preferences-area";
5364
background-color: #fff;
5465
/*
5566
padding: 20px 0px 0px 0px;
@@ -65,7 +76,7 @@ nav.ptx-navbar {
6576
z-index: 20;
6677

6778
position: sticky;
68-
top: 1px;
79+
top: 0;
6980
align-items: end;
7081
min-height: unset; /* to thwart navbar.less */
7182
margin-bottom: 0; /* to thwart navbar.less */
@@ -95,6 +106,7 @@ nav.ptx-navbar::after {
95106
border: 1px solid #888;
96107
cursor: pointer;
97108
box-sizing: border-box;
109+
margin-right: 2em;
98110
}
99111

100112
.toc-toggle:hover {
@@ -123,7 +135,6 @@ nav.ptx-navbar::after {
123135
justify-self: left;
124136
}
125137
.user-preferences-button {
126-
grid-area: MH-preferences-area;
127138
justify-self: left;
128139
}
129140

@@ -132,11 +143,18 @@ nav.ptx-navbar::after {
132143
grid-area: MH-page-navigation-area;
133144
justify-self: end;
134145
display: flex;
146+
width: 100%;
135147
/*
136148
align-self: start;
137149
*/
138150
}
139151

152+
.nav-runestone-controls {
153+
grid-area: MH-preferences-area;
154+
justify-self: end;
155+
display: flex;
156+
padding-left: 4em;
157+
}
140158

141159
/* .ptx-navbar button, */
142160
.ptx-navbar .button {
@@ -159,30 +177,37 @@ nav.ptx-navbar::after {
159177
box-sizing: border-box;
160178
}
161179

180+
.ptx-navbar .searchbutton {
181+
display: flex;
182+
align-items: center;
183+
justify-content: center;
184+
}
185+
186+
.searchresultsplaceholder {
187+
left: calc(50vw - 300px);
188+
}
189+
162190

163191
/* Small screen layout */
164192
@media only screen and (max-width: 800px) {
165193
.pretext .ptx-navbar {
166-
display: block;
167194
position: fixed;
168195
top: auto;
169196
bottom: 0;
170197
left: 0;
171198
right: 0;
172199
padding: 0;
173200
background: #ededed;
201+
grid-template-columns: auto auto auto auto 1fr auto;
174202
/*
175203
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 5px;
176204
*/
177205
/* height: 44.2px; */
178206

179-
grid-template-columns: 1fr 1fr;
180-
grid-column-gap: 0;
181-
grid-template-areas: "MH-toc-area MH-page-navigation-area";
182207
align-items: end;
183208
}
184209

185-
.pretext .ptx-navbar .button {
210+
/* .pretext .ptx-navbar .button {
186211
width: 24.95%;
187212
height: 36px;
188213
line-height: 40px;
@@ -191,13 +216,31 @@ nav.ptx-navbar::after {
191216
.ptx-navbar .toc-toggle {
192217
width: 25%;
193218
margin: 0;
219+
} */
220+
221+
.ptx-navbar .toc-toggle {
222+
padding: 0 40px;
223+
}
224+
225+
.ptx-navbar .nav-runestone-controls {
226+
padding-left: 0;
194227
}
195228

196-
/* Kill some white space between toc-toggle and treebuttons */
197-
.ptx-navbar .treebuttons {
198-
margin: 0 0 0 -4px;
229+
.ptx-navbar .treebuttons {
230+
justify-content: center;
231+
}
232+
233+
.ptx-navbar :is(.toc-toggle, .previous-button, .up-button, .next-button, .calculator-toggle, .index-button) .name {
234+
display: none;
235+
}
236+
237+
.pretext .ptx-navbar :is(.calculator-toggle, .index-button) .icon {
238+
display: inline-block;
199239
}
200240

241+
.searchresultsplaceholder {
242+
left: 10vw;
243+
}
201244
}
202245

203246
.ptx-navbar .button:hover {
@@ -231,8 +274,6 @@ nav.ptx-navbar::after {
231274
}
232275
.ptx-navbar .toc-toggle .name {
233276
font-size: 1.0em;
234-
position: relative;
235-
bottom: 0.25em;
236277
}
237278

238279
.ptx-navbar .index-button .name {
@@ -257,21 +298,23 @@ nav.ptx-navbar::after {
257298
display: none;
258299
}
259300

260-
.ptx-navbar .dropdown {
261-
height: 35px;
301+
.pretext .ptx-navbar .dropdown {
302+
height: 32px;
303+
}
262304

263305
.ptx-navbar .up-button {
264306
text-align: center;
265307
}
266308

267309
.ptx-navbar .name {
268310
display: inline-block;
311+
}
312+
.ptx-navbar .searchbutton .name {
313+
display: none;
269314
position: relative;
270315
bottom: 0;
271316
}
272-
.ptx-navbar .treebuttons .name {
273-
bottom: 0.2em;
274-
}
317+
275318
.ptx-navbar .icon {
276319
display: inline-block;
277320
font-size: 1.5em;
@@ -284,9 +327,6 @@ nav.ptx-navbar::after {
284327
margin-left: 0;
285328
margin-right: 0.2em;
286329
}
287-
.ptx-navbar .up-button .name {
288-
bottom: 0.3em;
289-
}
290330
.ptx-navbar .next-button .icon {
291331
margin-left: 0.2em;
292332
margin-right: 0.3em;
@@ -299,23 +339,20 @@ nav.ptx-navbar::after {
299339
}
300340

301341
@media screen and (max-width: 800px) {
302-
.ptx-navbar .index-button,
303-
.ptx-navbar .user-preferences-button,
304-
.ptx-navbar .calculator-toggle {
305-
display: none;
306-
}
307-
308342
.ptx-navbar .toc-toggle .name,
309343
.ptx-navbar .previous-button .name,
310344
.ptx-navbar .up-button .name,
311345
.ptx-navbar .up-button .disabled .name,
312346
.ptx-navbar .next-button .name {
313-
display: none;
347+
display: none;
314348
}
315349

316-
.ptx-navbar .up-button .icon,
317-
.ptx-navbar .up-button .disabled .icon{
350+
.ptx-navbar .toc-toggle {
351+
margin: 0;
318352
}
319353

354+
.ptx-navbar .calculator-toggle .icon {
355+
padding-top: 5px;
356+
}
320357
}
321358

0 commit comments

Comments
 (0)