guides_style_18f 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,13 @@
1
+ <aside class="usa-width-one-third usa-layout-docs-sidenav">
2
+ <ul class="usa-sidenav-list">
3
+ {% for link in site.navigation %}{% capture parent_url %}/{{ link.url }}{% endcapture %}
4
+ <li>
5
+ <a href="{% if link.internal == true %}{{ site.baseurl }}/{% endif %}{{ link.url }}"
6
+ class="{% if page.url == parent_url %}usa-current{% endif %}"
7
+ title="{% if page.url == parent_url %}Current Page
8
+ {% else %}{{ link.text }}{% endif %}">{{ link.text }}</a>
9
+ {% assign parent = link %}
10
+ {% include sidebar-children.html %}
11
+ </li>{% endfor %}
12
+ </ul>
13
+ </aside>
@@ -0,0 +1,28 @@
1
+ <!DOCTYPE html>
2
+ <html lang="{{ page.lang | default: site.lang | default: 'en-US' }}">
3
+
4
+ {% include head.html %}
5
+
6
+ <body>
7
+
8
+ <div class="container">
9
+ {% include header.html %}
10
+ <div class="usa-grid">
11
+
12
+ {% include sidebar.html %}
13
+ <main id="main" class="usa-width-two-thirds usa-layout-docs-main_content" role="main">
14
+ <h1>{{ page.title }}</h1>
15
+ {{ content }}
16
+ </main>
17
+
18
+
19
+ </div><!-- /.wrap content -->
20
+
21
+ {% include footer.html %}
22
+
23
+ </div> <!-- /.container -->
24
+
25
+ {% include analytics.html %}
26
+ {% include scripts.html %}
27
+ </body>
28
+ </html>
@@ -0,0 +1,6 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head><meta http-equiv="refresh" content="0;URL='{{ site.baseurl }}/#{{ page.title | slugify }}'">
4
+ </head>
5
+ <body></body>
6
+ </html>
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {% jekyll_pages_api_search_results %}
@@ -0,0 +1,50 @@
1
+ /*
2
+ This is where custom styles for your guide should live.
3
+ */
4
+
5
+ div.skip-nav a {
6
+ position: absolute;
7
+ left: -10000;
8
+ top: 0;
9
+ width: 1px;
10
+ height: auto;
11
+ overflow: hidden;
12
+ }
13
+ div.skip-nav a:focus {
14
+ position: absolute;
15
+ top: 5px;
16
+ left: 5px;
17
+ width: auto;
18
+ height: auto;
19
+ z-index: 999999;
20
+ background-color: white;
21
+ padding-left: 2px;
22
+ padding-right: 2px;
23
+ overflow: visible;
24
+ }
25
+
26
+ .mainContent:focus {
27
+ outline: none;
28
+ }
29
+
30
+ table, th, td {
31
+ border: 1px solid black;
32
+ padding: 5px;
33
+ margin:5px;
34
+ }
35
+ th {
36
+ background: #767576;
37
+ color:white;
38
+ }
39
+ li.active > a{
40
+ background-color: #317ab9;
41
+ }
42
+
43
+ div.back-link {
44
+ display: block;
45
+ padding-top: .5em;
46
+ }
47
+
48
+ header {
49
+ padding-bottom: 1.5em;
50
+ }
@@ -0,0 +1,645 @@
1
+ @import "jekyll_pages_api_search";
2
+ @import "variables";
3
+
4
+ /*
5
+ Main.css
6
+ ==================================
7
+ Begin with generic 'mobile first' styles
8
+ */
9
+
10
+ /*
11
+ Normalize the box model
12
+ ==================================
13
+ */
14
+
15
+ *,
16
+ *:before,
17
+ *:after {
18
+ -webkit-box-sizing: border-box;
19
+ -moz-box-sizing: border-box;
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ /*
24
+ global styles
25
+ ==================================
26
+ */
27
+
28
+ html, body {
29
+ height: 100%;
30
+ }
31
+
32
+ /*
33
+ Typography
34
+ ==================================
35
+ */
36
+
37
+ body {
38
+ font-family: "Open Sans", Arial, sans-serif;
39
+ font-weight: 400;
40
+ font-style: normal;
41
+ line-height: 1.466666667;
42
+ margin: 0;
43
+ }
44
+
45
+ h1,
46
+ h2,
47
+ h3,
48
+ h4,
49
+ h5 {
50
+ font-family: "Raleway", Arial, sans-serif;
51
+ font-weight: 600;
52
+ }
53
+
54
+ .site-title {
55
+ font-size: 1.9em;
56
+ color: #919395;
57
+ margin: 0;
58
+ line-height: 1.2941176470588236;
59
+ display: inline-block;
60
+ }
61
+
62
+ h2 {
63
+ font-size: 1.375em;
64
+ margin: 1.4em 0 0 0;
65
+ }
66
+
67
+ h3 {
68
+ margin-top: 30px;
69
+ a {
70
+ border-bottom: 1px dotted #0072ce;
71
+ }
72
+ }
73
+
74
+ h4 {
75
+ font-size: 1em;
76
+ text-transform: uppercase;
77
+ }
78
+
79
+ .page-title {
80
+ margin-top: .727272727em; /* 16/22 */
81
+ }
82
+
83
+ /*
84
+ Lists
85
+ --------------------------------
86
+ */
87
+
88
+ .main-content ul {
89
+ padding-left: 1.1em;
90
+ }
91
+
92
+ .main-content li {
93
+ margin-bottom: 1em;
94
+ }
95
+
96
+ li h3,
97
+ li h4 {
98
+ margin: 0;
99
+ }
100
+
101
+ li p {
102
+ margin-top: 0;
103
+ }
104
+
105
+ /*
106
+ Links
107
+ ==================================
108
+ */
109
+
110
+ a {
111
+ -webkit-transition: .2s;
112
+ -moz-transition: .2s;
113
+ transition: .2s;
114
+ }
115
+
116
+ a,
117
+ a:link,
118
+ a:visited {
119
+ color: #006FC9;
120
+ text-decoration: none;
121
+ }
122
+
123
+ a:hover {
124
+ color: #7eb8dd;
125
+ text-decoration: none;
126
+ }
127
+
128
+ a:active {
129
+ color: #002d72;
130
+ text-decoration: none;
131
+ }
132
+
133
+ a:focus {
134
+ color: #006FC9;
135
+ outline: thin dotted;
136
+ text-decoration: none;
137
+ }
138
+
139
+ a.title-link {
140
+ color: #75787B;
141
+ }
142
+
143
+ a.title-link:hover,
144
+ a.title-link:active,
145
+ a.title-link:focus {
146
+ color: #7eb8dd;
147
+ }
148
+
149
+ a.skip-link {
150
+ color: #fff;
151
+ padding: .25em;
152
+ }
153
+
154
+ a.skip-link:hover,
155
+ a.skip-link:active,
156
+ a.skip-link:focus {
157
+ background-color: #006FC9;
158
+ color: #fff;
159
+ }
160
+
161
+ p {
162
+ a,
163
+ a:link,
164
+ a:visited {
165
+ border-bottom: 1px dotted #0072ce;
166
+
167
+ }
168
+ }
169
+
170
+ /*
171
+ Navigation
172
+ ==================================
173
+ */
174
+
175
+ .sidebar-nav a {
176
+ display: block;
177
+ padding: 10px;
178
+ -webkit-transition: .4s;
179
+ transition: .4s;
180
+ width: 80%;
181
+ float: left;
182
+ }
183
+
184
+ .sidebar-nav a,
185
+ .sidebar-nav a:link,
186
+ .sidebar-nav a:visited {
187
+ border-bottom: none;
188
+ border-left: 4px solid transparent;
189
+ color: #74767B;
190
+ }
191
+
192
+ .sidebar-nav a:hover,
193
+ .sidebar-nav a:focus,
194
+ .sidebar-nav a:active,
195
+ .sidebar-nav .sidebar-nav-active > a {
196
+ color: #74767B;
197
+ border-left: 4px solid #1188ff;
198
+ background-color: transparent;
199
+ }
200
+
201
+ .sidebar-nav ul {
202
+ margin: 0;
203
+ padding: 0;
204
+ }
205
+
206
+ .sidebar-nav li {
207
+ list-style: none;
208
+ border-bottom: 1px solid #babbbd;
209
+ line-height: 1.4;
210
+ overflow: hidden;
211
+ }
212
+
213
+ .sidebar-nav li:last-child {
214
+ border-bottom: none;
215
+ }
216
+
217
+ .nav-children[aria-hidden=true] {
218
+ max-height: 0;
219
+ }
220
+
221
+ .nav-children {
222
+ clear: both;
223
+ display: block;
224
+ font-size: 14px;
225
+ max-height: initial;
226
+ max-height: 4000px;
227
+ overflow: auto;
228
+ opacity: 1;
229
+ position: relative;
230
+ -webkit-transition: max-height .2s, opacity .2s;
231
+ -moz-transition: max-height .2s, opacity .2s;
232
+ -o-transition: max-height .2s, opacity .2s;
233
+ transition: max-height .2s, opacity .2s;
234
+ }
235
+
236
+ .nav-children li {
237
+ border-bottom: none;
238
+ padding-left: 0;
239
+ }
240
+
241
+ .nav-children a {
242
+ padding: 5px 5px 5px 20px;
243
+ }
244
+
245
+ .nav-children li:last-child a {
246
+ padding-bottom: 10px;
247
+ }
248
+
249
+ .expand-subnav {
250
+ background: none;
251
+ border: none;
252
+ border-radius: 30px;
253
+ color: #0072ce;
254
+ cursor: pointer;
255
+ display: block;
256
+ float: right;
257
+ font-size: 20px;
258
+ height: 30px;
259
+ line-height: 1;
260
+ margin: 8px;
261
+ padding-bottom: 5px;
262
+ position: relative;
263
+ width: 30px;
264
+ -webkit-appearance: none;
265
+ -moz-appearance: none;
266
+ -o-appearance: none;
267
+ appearance: none;
268
+ -webkit-transition: -webkit-transform .2s;
269
+ -moz-transition: -moz-transform .2s;
270
+ -o-transition: -o-transform .2s;
271
+ transition: transform .2s;
272
+ }
273
+
274
+ .expand-subnav:hover,
275
+ .expand-subnav:focus {
276
+ background-color: #0072ce;
277
+ color: #fff;
278
+ outline: none;
279
+ }
280
+
281
+ .expand-subnav[aria-expanded=true] {
282
+ -webkit-transform: rotate(45deg);
283
+ -moz-transform: rotate(45deg);
284
+ -o-transform: rotate(45deg);
285
+ transform: rotate(45deg);
286
+ }
287
+
288
+ /*
289
+ Layout
290
+ ==================================
291
+ */
292
+
293
+ .logo {
294
+ display: block;
295
+ }
296
+
297
+ .content {
298
+ padding-top: 2em;
299
+ padding-bottom: 2em;
300
+ }
301
+
302
+ /* offset the fixed position header for jump links */
303
+ section:before {
304
+ display: block;
305
+ content: "";
306
+ height: 60px;
307
+ margin: -60px 0 0;
308
+ }
309
+
310
+ .wrap {
311
+ max-width: 1200px;
312
+ margin: 0 auto;
313
+ padding-left: 20px;
314
+ padding-right: 20px;
315
+ }
316
+
317
+ header {
318
+ border-bottom: 4px solid #1188ff;
319
+ background-color: #fff;
320
+ padding: 2em 0;
321
+ }
322
+
323
+ header div.wrap{
324
+ position: relative;
325
+ padding-top: 2.4em;
326
+ }
327
+
328
+ header div.wrap::after{
329
+ content: "";
330
+ display: table;
331
+ clear: both;
332
+ }
333
+
334
+ header h1.site-title{
335
+ margin-bottom: 0.4em;
336
+ }
337
+
338
+ header div.wrap div.back-link{
339
+ position: absolute;
340
+ left: 20px;
341
+ top: -1em;
342
+ font-size: 14px;
343
+ color: #555;
344
+ }
345
+
346
+ header div.wrap div.back-link a{
347
+ color: inherit;
348
+ text-decoration: underline;
349
+ }
350
+
351
+ header div.wrap div.back-link a:hover{ text-decoration: none; }
352
+
353
+ @media screen and (min-width: 45em){
354
+ header h1.site-title{
355
+ float: left;
356
+ width: 67%;
357
+ text-overflow: ellipsis;
358
+ overflow: hidden;
359
+ white-space: nowrap;
360
+ }
361
+ }
362
+
363
+ .main-content img {
364
+ max-width: 100%;
365
+ }
366
+
367
+ /*
368
+ Footer
369
+ ==================================
370
+ */
371
+
372
+ /* for sticky footer */
373
+ .container {
374
+ display: table;
375
+ height: 100%;
376
+ width: 100%;
377
+ }
378
+
379
+ footer {
380
+ display: table-row; /* for sticky footer */
381
+ height: 1px; /* for sticky footer */
382
+ border-top: 2px solid #babbbd;
383
+ background: #f1f2f2;
384
+ width: 100%;
385
+ font-size: 0.875em;
386
+ }
387
+
388
+ footer .wrap {
389
+ padding-top: 2em;
390
+ padding-bottom: 2em;
391
+ }
392
+
393
+
394
+ /*
395
+ Helpers
396
+ ==================================
397
+ */
398
+
399
+ /* Hide from both screenreaders and browsers: h5bp.com/u */
400
+ .hidden {
401
+ display: none !important;
402
+ visibility: hidden;
403
+ }
404
+
405
+ /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
406
+ .visuallyhidden {
407
+ border: 0;
408
+ clip: rect(0 0 0 0);
409
+ height: 1px;
410
+ margin: -1px;
411
+ overflow: hidden;
412
+ padding: 0;
413
+ position: absolute;
414
+ width: 1px;
415
+ }
416
+
417
+ /* Extends the .visuallyhidden class to allow the element to be focusable
418
+ * when navigated to via the keyboard: h5bp.com/p */
419
+ .visuallyhidden.focusable:active,
420
+ .visuallyhidden.focusable:focus {
421
+ clip: auto;
422
+ height: auto;
423
+ margin: 0;
424
+ overflow: visible;
425
+ position: static;
426
+ width: auto;
427
+ }
428
+
429
+ /* Hide visually and from screenreaders, but maintain layout */
430
+ .invisible {
431
+ visibility: hidden;
432
+ }
433
+
434
+
435
+ /*
436
+ Style
437
+ ==================================
438
+ */
439
+
440
+ .intro {
441
+ color: #75787B;
442
+ }
443
+
444
+ li h4 {
445
+ margin: 0;
446
+ }
447
+
448
+ .license {
449
+ font-family: "Avenir Next Demi", Arial, sans-serif;
450
+ font-weight: normal;
451
+ font-style: normal;
452
+ }
453
+
454
+ pre {
455
+ max-width: 100%;
456
+ font-size: 0.875em;
457
+ overflow-y: scroll;
458
+ background-color: #f1f2f2;
459
+ padding: 10px;
460
+ }
461
+
462
+ /*
463
+ Post list
464
+ ----------------------------------
465
+ */
466
+
467
+ ul.posts {
468
+ padding: 0;
469
+ }
470
+
471
+ .posts li {
472
+ list-style: none;
473
+ }
474
+
475
+ .post-date {
476
+ color: #75787B;
477
+ }
478
+
479
+ /*
480
+ Repo list
481
+ ----------------------------------
482
+ */
483
+
484
+ ul.repo-list {
485
+ margin: .5em 0 1em 0;
486
+ padding: 0;
487
+ }
488
+
489
+ .repo-list li {
490
+ list-style: none;
491
+ }
492
+
493
+ .repo-list p {
494
+ margin: 0;
495
+ font-size: 0.875em;
496
+ }
497
+
498
+ .repo-list h4 {
499
+ text-transform: none;
500
+ }
501
+
502
+ /*
503
+ Helper Classes
504
+ ==================================
505
+ */
506
+
507
+ /*
508
+ Clearfix list
509
+ ----------------------------------
510
+ */
511
+
512
+ .group:before,
513
+ .group:after {
514
+ content: " ";
515
+ display: table;
516
+ }
517
+
518
+ .group:after {
519
+ clear: both;
520
+ }
521
+
522
+ .group {
523
+ *zoom: 1;
524
+ }
525
+
526
+ /*
527
+ Desktop Styles
528
+ ==================================
529
+ */
530
+
531
+ @media screen and (min-width: 45em) {
532
+
533
+ /*
534
+ Typography
535
+ ==============================
536
+ */
537
+
538
+ /*
539
+ Layout
540
+ ==============================
541
+ */
542
+
543
+ .logo {
544
+ max-width: 30%;
545
+ padding-right: 20px;
546
+ margin-top: -12px;
547
+ float: right;
548
+ }
549
+
550
+ aside {
551
+ width: 30%;
552
+ float: left;
553
+ }
554
+
555
+ .main-content {
556
+ width: 67%;
557
+ float: right;
558
+ margin-bottom: 120px;
559
+ }
560
+
561
+ .main-content img {
562
+ max-width: 100%;
563
+ }
564
+
565
+ /*
566
+ Navigation
567
+ ==============================
568
+ */
569
+
570
+ .anchorjs-link {
571
+ border: none;
572
+ }
573
+
574
+ /*
575
+ Style
576
+ ==============================
577
+ */
578
+
579
+ /*
580
+ Repo list
581
+ ------------------------------
582
+ */
583
+
584
+ .repo-list li {
585
+ list-style: none;
586
+ display: block;
587
+ float: left;
588
+ height: 4.0625em;
589
+ max-height: 4.0625em;
590
+ background-color: #E7E7E6;
591
+ border-left: 1px solid #BABBBD;
592
+ width: 30%;
593
+ }
594
+
595
+ .repo-list a:link,
596
+ .repo-list a:visited {
597
+ display: block;
598
+ max-height: 4.0625em;
599
+ background-color: #E7E7E6;
600
+ border-bottom: none;
601
+ padding: .625em 1em 1em 1em;
602
+ }
603
+
604
+ .repo-list a:hover {
605
+ color: #4D5F87;
606
+ background-color: #CDE3F1;
607
+ }
608
+
609
+ .repo-list li:first-child {
610
+ text-align: center;
611
+ border-left: none;
612
+ line-height: 60px;
613
+ padding: .625em 1em;
614
+ width: 10%;
615
+ }
616
+
617
+ }
618
+
619
+ @media screen and (max-width: 54.375em) {
620
+
621
+ /* keep the repo list containers the same height, but account for the need for more height */
622
+
623
+ .repo-list li {
624
+ height: 6em;
625
+ max-height: 6em;
626
+ }
627
+
628
+ .repo-list a:link,
629
+ .repo-list a:visited {
630
+ max-height: 6em;
631
+ }
632
+ }
633
+
634
+ /*
635
+ Mobile Styles
636
+ ==================================
637
+ */
638
+
639
+ @media screen and (max-width: 40.5em) {
640
+
641
+ .main-content {
642
+ margin-top: 1.5em;
643
+ }
644
+
645
+ }