Skip to content

Commit

Permalink
Made updates to the homepage and main top menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@natashapl
natashapl committed May 15, 2024
1 parent 92b1b48 commit cafcbee
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 100 deletions.
4 changes: 2 additions & 2 deletions _data/assetPaths.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,6 @@
"admin.map": "/assets/js/admin-GBLI77MO.js.map",
"app.js": "/assets/js/app-34WFVF7Q.js",
"app.map": "/assets/js/app-34WFVF7Q.js.map",
"index.css": "/assets/styles/index-PDJNSGFN.css",
"index.map": "/assets/styles/index-PDJNSGFN.css.map"
"index.css": "/assets/styles/index-BMDJFQUB.css",
"index.map": "/assets/styles/index-BMDJFQUB.css.map"
}
2 changes: 0 additions & 2 deletions _data/site.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,6 @@ ga:

# Site Navigation
primary_navigation:
- name: Find assistance
url: /posts/find-assistance/
- name: Training & resources
url: /posts/training/
- name: FAQs
Expand Down
6 changes: 3 additions & 3 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h4>FEMA resources</h4>
<li><a href="/about/privacy-policy" class="survey-processed">Privacy</a></li>
</ul>
</div>
<div class="tablet:grid-col">
<div class="tablet:grid-col last-column">
<h4>Partner sites</h4>
<ul class="add-list-reset">
<li><a href="https://www.ready.gov/" target="_blank" class="survey-processed">Ready.gov</a></li>
Expand All @@ -29,15 +29,15 @@ <h4>Partner sites</h4>
<li><a href="https://usa.gov" target="_blank" class="survey-processed">USA.gov</a>
</ul>
</div>
<div class="tablet:grid-col">
<div class="tablet:grid-col mobile:margin-top-2">
<div class="logo-links">
<a class="footer-logo media_link" href="{{ '/' | url }}">
<div class="usa-logo">
<img alt="10x Bring Mutual Aid logo" src="{{ '/assets/img/bm-logo.svg' | url }}" width="300" height="67">
</div>
</a>
</div>
<div style="font-size: smaller;">
<div class="font-body-3xs">
DEMO website of the<br>
<a style="color: white;" href="https://www.dhs.gov/">Department of Homeland Security</a>
</div>
Expand Down
8 changes: 4 additions & 4 deletions _includes/hero.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section class="usa-hero" aria-label="Introduction">
<section class="usa-hero" id="mutual-aid-search" aria-label="Introduction">
<img fetchpriority="high" src="{{ '/assets/img/hero.webp' | url }}" alt="" width="0" height="0"
style="display: none !important;" />
<div class="grid-container">
Expand All @@ -18,15 +18,15 @@ <h1 class="usa-hero__heading margin-bottom-4">
State or Territory
</label>
<div class="grid-row grid-gap-2">
<span class="desktop:grid-col-7 mobile:grid-col-12 margin-bottom-2">
<select class="usa-select" id="state" name="state">
<span class="tablet:grid-col-8 mobile:grid-col-12 margin-bottom-2">
<select class="usa-select" id="state" name="state" required>
<option value>- Select -</option>
{% for item in csvData.stantecMABD %}
<option value="{{ item.Abbr | slug }}">{{ item.Abbr }} - {{ item.State }}</option>
{% endfor %}
</select>
</span>
<span class="desktop:grid-col-5 mobile:grid-col-12">
<span class="tablet:grid-col-4 mobile:grid-col-12 desktop:text-right">
<input class="usa-button" type="submit" value="View aid options" />
</span>
</div>
Expand Down
71 changes: 14 additions & 57 deletions _includes/highlights.html
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,43 @@
<section class="usa-graphic-list home-highlights usa-section usa-section--dark">
<div class="grid-container">
<h2 class="font-family-serif">How can mutual aid help?</h2>
<ul class="usa-card-group grid-row grid-gap">
<li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
<li class="usa-card usa-card--flag grid-col-12">
<div class="usa-card__container card-1">
<div class="usa-card__header">
<h3 class="usa-card__heading">
Credentialed experts
How can mutual aid resources help your building department?
</h3>
</div>
<div class="usa-card__media">
<div class="usa-card__img">
<img class="usa-media-block__img" src="{{ '/assets/img/experts.svg' | url }}" alt="" width="71" height="71" />
<img class="usa-media-block__img" src="{{ '/assets/img/help-icon.webp' | url }}" alt="" width="180" height="180" />
</div>
</div>
<div class="usa-card__body">
<p>Access organizations and individuals with needed certifications, licenses, and decades of post-disaster rebuilding experience. </p>
</div>
<div class="usa-card__footer">
<a href="{{ '/posts/experts' | url }}" class="usa-button">Learn More <span class="usa-sr-only"> about how access organizations and individuals with needed credentials.</span> </a>
<ul>
<li>Following a disaster, many local building departments struggle to handle the increased demand for post-disaster inspections, permitting, and building code enforcement tasks.</li>
<li>Mutual aid agreements allow building departments to request public or private sector personnel for short-term deployments to their community to assist rebuilding efforts.</li>
</ul>
</div>
</div>
</li>
<li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
<li class="usa-card usa-card--flag grid-col-12">
<div class="usa-card__container card-2">
<div class="usa-card__header">
<h3 class="usa-card__heading">
Inspections & permits
</h3>
</div>
<div class="usa-card__media">
<div class="usa-card__img">
<img class="usa-media-block__img" src="{{ '/assets/img/inspections.svg' | url }}" alt="" width="92" height="92" />
</div>
</div>
<div class="usa-card__body">
<p> Find certified personnel that can rapidly deploy to help your community inspect structures and issue building permits. </p>
</div>
<div class="usa-card__footer">
<a href="{{ '/posts/inspections' | url }}" class="usa-button">
Learn More <span class="usa-sr-only"> about how to find certified personnel that can be rapidly deployed to help your community.</span>
</a>
</div>
</div>
</li>
<li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container card-3">
<div class="usa-card__header">
<h3 class="usa-card__heading">
Building code knowledge
Who can use mutual aid assistance for rebuilding?
</h3>
</div>
<div class="usa-card__media">
<div class="usa-card__img">
<img class="usa-media-block__img" src="{{ '/assets/img/codes.svg' | url }}" alt="" width="87" height="87" />
<img class="usa-media-block__img" src="{{ '/assets/img/build-icon.webp' | url }}" alt="" width="180" height="180" />
</div>
</div>
<div class="usa-card__body">
<p>Get connected with experts that understand the most up-to-date building codes to ensure community safety and resiliency.</p>
</div>
<div class="usa-card__footer">
<a href="{{ '/posts/codes' | url }}" class="usa-button">Learn More <span class="usa-sr-only"> about how to get connected with experts that understand the most up-to-date building codes.</span></a>
</div>
</div>
</li>
<li class="usa-card usa-card--flag desktop:grid-col-6 mobile:grid-col-12">
<div class="usa-card__container card-4">
<div class="usa-card__header">
<h3 class="usa-card__heading">
Navigating disaster recovery
</h3>
</div>
<div class="usa-card__media">
<div class="usa-card__img">
<img class="usa-media-block__img" src="{{ '/assets/img/recovery.svg' | url }}" alt="" width="84" height="84" />
</div>
</div>
<div class="usa-card__body">
<p>Learn the process of applying for grants, loans, and other forms of assistance available to communities recovering from disasters.</p>
</div>
<div class="usa-card__footer">
<a href="{{ '/posts/recovery' | url }}" class="usa-button">Learn More <span class="usa-sr-only"> about the process of applying for grants, loans, and other forms of assistance.</span></a>
<ul>
<li>States and territories have a variety of agreements with differing rules and regulations on how building departments may request assistance and expense reimbursement.</li>
<li>Use our <a class="usa-link" href="#mutual-aid-search">mutual aid resource search</a> to start identifying what assistance options are available in your location and to connect with organizations that can provide help to your community.</li>
</ul>
</div>
</div>
</li>
Expand Down
Binary file added theme/img/build-icon.webp
View file
Binary file not shown.
Binary file added theme/img/help-icon.webp
View file
Binary file not shown.
98 changes: 66 additions & 32 deletions theme/styles/_templates.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,15 @@ body {
height: 100%;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}

html {
scroll-behavior: smooth;
}

body {
min-width: 320px;
}

img {
Expand Down Expand Up @@ -93,17 +102,17 @@ iframe:focus,
line-height: lh('heading', 4);

@include at-media(desktop) {
font-size: size('body', 12);
font-size: size('heading', 12);
}
}

.grid-container {
max-width: 40rem;
max-width: 42rem;
}

.usa-hero__callout {
margin: 1em auto;
max-width: 32rem;
max-width: 100%;
background: color('gray-cool-60');

.grid-container {
Expand All @@ -112,24 +121,32 @@ iframe:focus,

.usa-form {
max-width: 100%;
}

.usa-button {
border-radius: 0;
border: 1px solid white;
background: color('green-60v');
font-weight: 400;
font-size: size('body', 8);
line-height: line-height('body', 2);
padding: units(1.5) units(1.5) units(1.5) units(5);
text-align: center;
background: color('green-60v') url('../img/help-icon.svg') no-repeat units(1) center;
.usa-legend {
font-size: size('body', 8);
max-width: 100%;
}

@include at-media(desktop) {
font-size: size('body', 5);
.usa-button {
border-radius: 0;
border: 1px solid white;
background: color('green-60v');
font-weight: 400;
font-size: size('body', 7);
line-height: line-height('body', 2);
padding: units(1.5) units(1.5) units(1.5) units(5);
text-align: center;
background: color('green-60v') url('../img/help-icon.svg') no-repeat units(1) center;
width: 100%;

@include at-media(desktop) {
font-size: size('body', 5);
}
}
}



select,
input {
margin: 0;
Expand Down Expand Up @@ -160,6 +177,7 @@ iframe:focus,
.usa-card__container {
background: color('gray-cool-10');
color: black;
min-height: 206px;

a,
p,
Expand All @@ -172,7 +190,7 @@ iframe:focus,
font-size: size('body', 10);
text-align: center;

@include at-media(desktop) {
@include at-media(tablet) {
text-align: left;
}
}
Expand All @@ -182,32 +200,26 @@ iframe:focus,
.usa-card__footer {
margin-left: 0;

@include at-media(desktop) {
margin-left: 6rem;
@include at-media(tablet) {
margin-left: 14rem;
}
}

.usa-card__img {
background: none;
padding: units(1.5) units(1);
padding: units(4);

img {
height: auto;
-o-object-fit: unset;
object-fit: unset;
max-width: 40%;
min-width: 140px;
margin: 0 auto;

@include at-media(desktop) {
max-width: 100%;
}

}
}

&.card-2 {
.usa-card__img {
padding-top: units(1);
@include at-media(tablet) {
max-width: 100%;
}
}
}

Expand All @@ -217,11 +229,24 @@ iframe:focus,

.usa-card__header {
padding-top: 0;
padding-bottom: units(2);

@include at-media(desktop) {
padding-top: units(3);
@include at-media(tablet) {
padding-top: units(4);

}
}

.usa-card__body {
ul {
list-style: disc;
padding-left: units(2);

li {
margin-bottom: units(2);
}
}
}

.usa-card__footer {
position: relative;
Expand Down Expand Up @@ -406,4 +431,13 @@ iframe:focus,
}
}
}

.last-column {
margin-bottom: units(2);
}

.usa-logo {
margin-top: units(2);
}

}

0 comments on commit cafcbee

Please sign in to comment.