Skip to content
This repository was archived by the owner on May 31, 2024. It is now read-only.

Commit 41666eb

Browse files
janelxjduss4
janelx
authored and
jduss4
committed
added full-width layout and service blueprint scss
updated uswds custom styles for full-width layout
1 parent 78d9382 commit 41666eb

10 files changed

+269
-106
lines changed

‎.jekyll-metadata

44.9 KB
Binary file not shown.

‎_layouts/page-full-width.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang='en'>
3+
{% include head.html %}
4+
<body class="layout--page-full-width layout--{{ page.title | slugify }}">
5+
{% include category-setup.html %}
6+
{% include header.html %}
7+
<main id="main" role="main" class="usa-prose">
8+
{{ content }}
9+
</main>
10+
{% include footer.html %}
11+
</body>
12+
</html>

‎_sass/service-blueprint.scss

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* @group .service-blueprint-example */
2+
table.service-blueprint th, table.service-blueprint td {
3+
border: none;
4+
vertical-align: top;
5+
min-width: 280px;
6+
padding-top: 62px;
7+
}
8+
9+
.service-blueprint tbody td {
10+
font-size: 0.7em;
11+
}
12+
13+
.service-blueprint tbody th {
14+
font-size: 0.9em;
15+
}
16+
17+
.service-blueprint ul {
18+
margin-left: 0;
19+
padding-inline-start: 10px;
20+
}
21+
22+
.service-blueprint img {
23+
display: block;
24+
margin-bottom: 4px;
25+
}
26+
27+
tr.blue th, tr.blue td {
28+
background: #e7f1f9;
29+
}
30+
31+
tr.pink th, tr.pink td {
32+
background: #fdf5f6;
33+
}
34+
35+
table.service-blueprint th.role {
36+
border-top: solid #58B84F;
37+
border-width: 8px;
38+
}
39+
40+
.service-blueprint tbody th.steps {
41+
border-top: solid 8px #aeddaa;
42+
}
43+
.service-blueprint tbody th:first-child {
44+
padding-right: 40px;
45+
padding-top: 20px;
46+
min-width: 380px;
47+
}
48+
49+
//optional styling
50+
.example-card {
51+
background: white;
52+
border-radius: 6px;
53+
box-shadow: 1px 1px 0 rgba(0,0,0,0.08);
54+
padding: 30px 0px 30px 30px;
55+
}
56+
57+
body.layout--page-full-width.layout--service-blueprint-example {
58+
background-color: #58B84F;
59+
}
60+
61+
@media screen and (min-width: 800px) {
62+
p {
63+
width: 50%;
64+
}
65+
}

‎assets/uswds/scss/theme/_uswds-theme-custom-styles.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ i.e.
2929
margin: 0 0 units(4) 0;
3030
}
3131

32-
.layout--page main {
32+
.layout--page main,
33+
.layout--page-full-width main {
3334
max-width: 1024px;
3435
margin: 0 auto;
3536
box-sizing: border-box;
@@ -41,16 +42,14 @@ i.e.
4142
max-width: none;
4243
}
4344

44-
4545
@media screen and (min-width: 853.33px) {
4646

4747
.layout--page main { padding-right: 25%; }
48-
.layout--page.layout--methods main { padding-right: 0; }
48+
.layout--page.layout--methods main,
49+
.layout--page-full-width main { padding-right: 0; }
4950

5051
}
5152

52-
53-
5453
// general
5554
iframe:focus,
5655
[href]:focus,

‎css/styles.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@import 'interview-checklist';
1010
@import 'interview-debrief';
1111
@import 'interview-script';
12+
@import 'service-blueprint';
1213
@import 'category';
1314
@import 'method';
1415
@import 'sticky';

‎images/18f-icons/list-to-do-checked--c.svg

Lines changed: 17 additions & 0 deletions
Loading

‎images/18f-icons/settings.svg

Lines changed: 17 additions & 0 deletions
Loading

‎images/18f-icons/user-check.svg

Lines changed: 17 additions & 0 deletions
Loading

‎images/18f-icons/user-network--c.svg

Lines changed: 17 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)