Skip to content

Commit e9c00c2

Browse files
nprimaknprimak
authored
Merge pull request #367 from 18F/np/LG-10765/dev-doc-layout
LG-10765 dev doc layout updates
2 parents f65a6bb + ed9830a commit e9c00c2

File tree

4 files changed

+180
-120
lines changed

4 files changed

+180
-120
lines changed

‎_includes/snippets/oidc/snippets.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
{% if page.path == "_pages/oidc.md" %}
3+
<button data-example="private_key_jwt">private_key_jwt</button><button data-example="pkce">PKCE</button>
4+
5+
<div markdown="1" data-example="private_key_jwt">
6+
```bash
7+
https://idp.int.identitysandbox.gov/openid_connect/authorize?
8+
acr_values=http%3A%2F%2Fidmanagement.gov%2Fns%2Fassurance%2Fial%2F1&
9+
client_id=${CLIENT_ID}&
10+
nonce=${NONCE}&
11+
prompt=select_account&
12+
redirect_uri=${REDIRECT_URI}&
13+
response_type=code&
14+
scope=openid+email&
15+
state=abcdefghijklmnopabcdefghijklmnop
16+
```
17+
</div>
18+
<div markdown="1" data-example="pkce" hidden="true">
19+
```bash
20+
https://idp.int.identitysandbox.gov/openid_connect/authorize?
21+
acr_values=http%3A%2F%2Fidmanagement.gov%2Fns%2Fassurance%2Fial%2F1&
22+
client_id=${CLIENT_ID}&
23+
code_challenge=${CODE_CHALLENGE}&
24+
code_challenge_method=S256&
25+
nonce=${NONCE}&
26+
prompt=select_account&
27+
redirect_uri=${REDIRECT_URI}&
28+
response_type=code&
29+
scope=openid+email&
30+
state=abcdefghijklmnopabcdefghijklmnop
31+
```
32+
</div>
33+
34+
{% endif %}

‎_layouts/base.html‎

Lines changed: 94 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -49,36 +49,38 @@
4949
</div>
5050
</header>
5151
<div class="usa-banner__content usa-accordion__content" id="gov-banner">
52-
<div class="grid-row grid-gap-lg">
53-
<div class="usa-banner__guidance tablet:grid-col-6">
54-
<img src="{{ site.baseurl }}/assets/img/icon-dot-gov.svg"
55-
class="usa-banner__icon usa-media-block__img"
56-
alt="Dot gov"
57-
role="img">
58-
<div class="usa-media-block__body">
59-
<p>
60-
<strong>Official websites use .gov</strong>
61-
<br>
62-
A <strong>.gov</strong> website belongs to an official government organization in the United States.
63-
</p>
52+
<div class="grid-container">
53+
<div class="grid-row grid-gap-lg">
54+
<div class="usa-banner__guidance tablet:grid-col-6">
55+
<img src="{{ site.baseurl }}/assets/img/icon-dot-gov.svg"
56+
class="usa-banner__icon usa-media-block__img"
57+
alt="Dot gov"
58+
role="img">
59+
<div class="usa-media-block__body">
60+
<p>
61+
<strong>Official websites use .gov</strong>
62+
<br>
63+
A <strong>.gov</strong> website belongs to an official government organization in the United States.
64+
</p>
65+
</div>
6466
</div>
65-
</div>
66-
<div class="usa-banner__guidance tablet:grid-col-6">
67-
<img src="{{ site.baseurl }}/assets/img/icon-https.svg"
68-
class="usa-banner__icon usa-media-block__img"
69-
alt="Https"
70-
role="img">
71-
<div class="usa-media-block__body">
72-
<p>
73-
<strong>Secure .gov websites use HTTPS</strong>
74-
<br>
75-
A <strong>lock (
76-
<img src="{{ site.baseurl }}/assets/img/lock.svg"
77-
class="usa-banner__lock-image"
78-
alt="Https"
79-
role="img">
80-
)</strong> or <strong>https://</strong> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.
81-
</p>
67+
<div class="usa-banner__guidance tablet:grid-col-6">
68+
<img src="{{ site.baseurl }}/assets/img/icon-https.svg"
69+
class="usa-banner__icon usa-media-block__img"
70+
alt="Https"
71+
role="img">
72+
<div class="usa-media-block__body">
73+
<p>
74+
<strong>Secure .gov websites use HTTPS</strong>
75+
<br>
76+
A <strong>lock (
77+
<img src="{{ site.baseurl }}/assets/img/lock.svg"
78+
class="usa-banner__lock-image"
79+
alt="Https"
80+
role="img">
81+
)</strong> or <strong>https://</strong> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.
82+
</p>
83+
</div>
8284
</div>
8385
</div>
8486
</div>
@@ -87,75 +89,76 @@
8789
</section>
8890

8991
<div class="usa-overlay"></div>
90-
91-
<header class="usa-header usa-header--extended" role="banner">
92-
<div class="usa-navbar">
93-
<div class="usa-logo" id="basic-logo">
94-
<a href="{{ site.baseurl }}/" title="Home" aria-label="Home">
95-
<img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg"
96-
class="usa-logo__img"
97-
alt="Login.gov"
98-
role="img">
99-
<em class="usa-logo__text">Developers</em>
100-
</a>
101-
</div>
102-
<button class="usa-menu-btn">Menu</button>
103-
</div>
104-
<nav role="navigation" class="usa-nav border-top-none">
105-
<div class="usa-nav__inner">
106-
<button class="usa-nav__close">
107-
<img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close" role="img">
108-
</button>
109-
<div class="usa-nav__secondary">
110-
<ul class="usa-nav__secondary-links"></ul>
111-
<section aria-label="Search component">
112-
{% include search.html id="header-nav" %}
113-
</section>
92+
<header class="usa-header usa-header--extended" role="banner">
93+
<div class="usa-navbar">
94+
<div class="usa-logo" id="basic-logo">
95+
<a href="{{ site.baseurl }}/" title="Home" aria-label="Home">
96+
<img src="{{ site.baseurl }}/assets/img/login-gov-logo.svg"
97+
class="usa-logo__img"
98+
alt="Login.gov"
99+
role="img">
100+
<em class="usa-logo__text">Developers</em>
101+
</a>
102+
</div>
103+
<button class="usa-menu-btn">Menu</button>
114104
</div>
115-
<ul class="usa-nav__primary usa-accordion">
116-
{% include nav/list.html
117-
links = site.data.nav.primary
118-
li_class = 'usa-nav__primary-item'
119-
subnav_ul_class = 'desktop:display-none usa-sidenav__sublist'
120-
%}
121-
</ul>
122-
</div>
123-
</nav>
124-
</header>
105+
<nav role="navigation" class="usa-nav border-top-none">
106+
<div class="usa-nav__inner">
107+
<button class="usa-nav__close">
108+
<img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close" role="img">
109+
</button>
110+
<div class="usa-nav__secondary">
111+
<ul class="usa-nav__secondary-links"></ul>
112+
<section aria-label="Search component">
113+
{% include search.html id="header-nav" %}
114+
</section>
115+
</div>
116+
<ul class="usa-nav__primary usa-accordion">
117+
{% include nav/list.html
118+
links = site.data.nav.primary
119+
li_class = 'usa-nav__primary-item'
120+
subnav_ul_class = 'desktop:display-none usa-sidenav__sublist'
121+
%}
122+
</ul>
123+
</div>
124+
</nav>
125+
</header>
126+
{% if page.sidenav %}
127+
<header aria-label="hero" class="usa-dark-background usa-section usa-section--dark">
128+
<div class="grid-container">
129+
<div class="grid-row">
130+
<div class="grid-col-12">
131+
<h1 class="usa-display">{{ page.title }}</h1>
132+
<div class="usa-intro">{{ page.lead | markdownify }}</div>
133+
</div>
134+
</div>
135+
</div>
136+
</header>
137+
{% endif %}
125138

126139
{{ content }}
127140

128-
<footer class="usa-footer usa-footer--slim" role="contentinfo" aria-label="GSA footer">
129-
<div class="grid-container usa-footer__return-to-top">
130-
<div class="grid-row flex-align-center">
131-
<div class="grid-col flex-1">
132-
<a href="{{ site.github_repo_url }}/edit/main/{{ page.path }}" class="usa-button usa-button--outline">Edit this page</a>
133-
</div>
134-
<div class="grid-col flex-auto">
135-
<a href="#" class="usa-button usa-button--outline return-to-top-button mobile:display-none desktop:display-block position-fixed bottom-205 right-105 z-500">Return to top</a>
136-
<a href="#" class="usa-button usa-button--outline return-to-top-button desktop:display-none position-fixed bottom-205 right-105 width-5 height-5 text-middle radius-pill z-500 shadow-2"><img alt="Return to top" class="display-inline maxw-3 width-3 height-3 position-absolute left-1 top-1" src="{{ site.baseurl }}/assets/img/material-icons/expand_less.svg"/></a>
137-
</div>
138-
</div>
139-
</div>
140-
<div class="usa-footer__secondary-section">
141-
<div class="grid-container">
142-
<div class="usa-footer__logo grid-row grid-gap-2">
143-
<div class="grid-col-auto">
144-
<img src="{{ site.baseurl }}/assets/img/gsa-logo-rev.svg"
145-
alt="U.S. General Services Administration logo"
146-
class="usa-footer__logo-img usa-footer__slim usa-footer__medium"
147-
role="img">
148-
</div>
149-
<div class="grid-col-auto">
150-
<h3 class="usa-footer__logo-heading">U.S. General Services Administration</h3>
151-
</div>
152-
<div class="grid-col-fill text-right">
153-
<a href="https://status.login.gov/">System Status</a>
141+
<footer class="usa-footer usa-footer--slim" role="contentinfo" aria-label="GSA footer">
142+
<div class="usa-footer__secondary-section">
143+
<div class="grid-container">
144+
<div class="usa-footer__logo grid-row grid-gap-2">
145+
<div class="grid-col-auto">
146+
<img src="{{ site.baseurl }}/assets/img/gsa-logo-rev.svg"
147+
alt="U.S. General Services Administration logo"
148+
class="usa-footer__logo-img usa-footer__slim usa-footer__medium"
149+
role="img">
150+
</div>
151+
<div class="grid-col-auto">
152+
<h3 class="usa-footer__logo-heading">U.S. General Services Administration</h3>
153+
</div>
154+
<div class="grid-col-fill text-right">
155+
<a href="https://status.login.gov/">System Status</a>
156+
</div>
154157
</div>
155158
</div>
156159
</div>
157-
</div>
158-
</footer>
160+
</footer>
161+
159162

160163
<script src="{{ site.baseurl }}/assets/js/main.js"></script>
161164
<script src="{{ site.baseurl }}/assets/js/anchor.js"></script>

‎_layouts/documentation.html‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,37 @@
66
<div class="grid-container">
77
{% if page.sidenav %}
88
<div class="grid-row grid-gap">
9-
<aside class="usa-layout-docs__sidenav desktop:grid-col-3 position-sticky tablet-lg:height-viewport">
10-
<nav>
11-
<ul class="usa-sidenav">
12-
{% include nav/list.html
13-
links = page.sidenav
14-
li_class = 'usa-sidenav__item'
15-
ul_class = 'usa-sidenav__sublist'
16-
%}
17-
</ul>
18-
</nav>
19-
</aside>
20-
21-
<div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
9+
<div class="desktop:grid-col-2 desktop:display-block mobile:display-none">
10+
<aside class="position-sticky tablet-lg:height-viewport usa-layout-docs__sidenav">
11+
<nav>
12+
<ul class="usa-sidenav">
13+
{% include nav/list.html
14+
links = page.sidenav
15+
li_class = 'usa-sidenav__item'
16+
ul_class = 'usa-sidenav__sublist'
17+
%}
18+
</ul>
19+
</nav>
20+
</aside>
21+
</div>
22+
23+
<div class="usa-layout-docs__main desktop:grid-col-7 usa-prose">
2224

2325
{% if site.temporary_alert %}
2426
{% include alert.html content=site.temporary_alert %}
2527
{% endif %}
26-
27-
<h1 class="usa-display">{{ page.title }}</h1>
28-
29-
{% if page.lead %}
30-
<div class="usa-intro">{{ page.lead | markdownify }}</div>
31-
{% endif %}
28+
3229

3330
{{ content }}
34-
</div>
31+
32+
<a href="{{ site.github_repo_url }}/edit/main/{{ page.path }}" class="usa-button usa-button--outline margin-top-9">Edit this page</a>
33+
</div>
34+
<div class="usa-layout-docs__main desktop:grid-col-3">
35+
<section class="return-to-top-section">
36+
<a href="#" class="usa-button usa-button--outline return-to-top-button mobile:display-none desktop:display-block position-sticky">Return to top</a>
37+
</section>
38+
</div>
39+
<a href="#" class="usa-button usa-button--outline return-to-top-button desktop:display-none position-fixed bottom-205 right-105 width-5 height-5 text-middle radius-pill z-500 shadow-2"><img alt="Return to top" class="display-inline maxw-3 width-3 height-3 position-absolute left-1 top-1" src="{{ site.baseurl }}/assets/img/material-icons/expand_less.svg"/></a>
3540
</div>
3641
{% else %}
3742
<div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
@@ -43,10 +48,14 @@ <h1 class="usa-display">{{ page.title }}</h1>
4348
<h1 class="usa-display">{{ page.title }}</h1>
4449

4550
{% if page.lead %}
46-
<div class="usa-intro">{{ page.lead | markdownify }}</div>
51+
<div class="usa-intro">{{ page.lead | markdownify }}</div>
4752
{% endif %}
4853

54+
55+
4956
{{ content }}
57+
58+
5059
</div>
5160
{% endif %}
5261
</div>

‎assets/scss/main.css.scss‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
@use "uswds-core" as * with (
22
$theme-utility-breakpoints: (
3-
"tablet": true,
4-
"desktop": true,
53
"mobile": true,
6-
)
4+
"tablet": true,
5+
"desktop": true
6+
),
7+
$theme-grid-container-max-width: 'widescreen',
8+
$theme-footer-max-width: 'widescreen',
9+
$theme-header-max-width: 'widescreen',
10+
$theme-banner-max-width: 'widescreen',
11+
$theme-identifier-max-width: 'widescreen',
12+
$theme-in-page-nav-main-content-max-width: 'widescreen'
13+
714
);
815
@forward "uswds";
916

@@ -38,17 +45,24 @@ main.usa-layout-docs {
3845
@include u-font-family("mono");
3946
}
4047

48+
4149
.usa-layout-docs__sidenav {
4250
top: 2rem;
4351
}
4452

45-
@media (min-width: 880px) {
46-
.tablet-lg\:height-viewport {
47-
height: 100vh;
48-
}
53+
.return-to-top-section {
54+
display: flex;
55+
flex-direction: column;
56+
align-items: end;
57+
height: 100%;
58+
}
59+
60+
.return-to-top-button {
61+
max-width: 160px;
62+
top: 90%;
4963
}
5064

5165
.return-to-top-button > img {
5266
// Change the chevron to #0071bb from #000000
5367
filter: invert(21%) sepia(72%) saturate(4106%) hue-rotate(190deg) brightness(95%) contrast(101%);
54-
}
68+
}

0 commit comments

Comments
 (0)