Skip to content

Commit

Permalink
add specific image size on load.
Browse files Browse the repository at this point in the history
  • Loading branch information
@john-labbate
john-labbate committed Jun 21, 2024
1 parent 452c33a commit 3260806
Show file tree
Hide file tree
Showing 6 changed files with 245 additions and 162 deletions.
119 changes: 62 additions & 57 deletions src/components/Banner.astro
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,104 @@
---
// this component is for very top banner section that has USA flag, included in BaseLayout and used for all pages.
import us_flag_small from "@assets/images/us_flag_small.png"
import icon_dot_gov from "@assets/images/icon-dot-gov.svg"
import icon_https from "@assets/images/icon-https.svg"
import us_flag_small from "@assets/images/us_flag_small.png";
import icon_dot_gov from "@assets/images/icon-dot-gov.svg";
import icon_https from "@assets/images/icon-https.svg";
---
<section
class="usa-banner"
aria-label="Official website of the United States government"
>
<div class="usa-accordion">

<section
class="usa-banner"
aria-label="Official website of the United States government"
>
<div class="usa-accordion">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<img
<img
aria-hidden="true"
class="usa-banner__header-flag"
src={us_flag_small.src}
alt=""
/>
/>
</div>
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
<p class="usa-banner__header-text">
<p class="usa-banner__header-text">
An official website of the United States government
</p>
<p class="usa-banner__header-action">Here’s how you know</p>
</p>
<p class="usa-banner__header-action">Here’s how you know</p>
</div>
<button
type="button"
class="usa-accordion__button usa-banner__button"
aria-expanded="false"
aria-controls="gov-banner-default-default"
type="button"
class="usa-accordion__button usa-banner__button"
aria-expanded="false"
aria-controls="gov-banner-default-default"
>
<span class="usa-banner__button-text">Here’s how you know</span>
<span class="usa-banner__button-text">Here’s how you know</span>
</button>
</div>
</div>
</header>
<div
class="usa-banner__content usa-accordion__content"
id="gov-banner-default-default"
class="usa-banner__content usa-accordion__content"
id="gov-banner-default-default"
>
<div class="grid-row grid-gap-lg">
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
<img
<img
class="usa-banner__icon usa-media-block__img"
src={icon_dot_gov.src}
role="img"
alt=""
aria-hidden="true"
/>
<div class="usa-media-block__body">
/>
<div class="usa-media-block__body">
<p>
<strong>Official websites use .gov</strong><br />A
<strong>.gov</strong> website belongs to an official government
organization in the United States.
<strong>Official websites use .gov</strong><br />A
<strong>.gov</strong> website belongs to an official government organization
in the United States.
</p>
</div>
</div>
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
<img
<img
width="16"
height="11"
class="usa-banner__icon usa-media-block__img"
src={ icon_https.src }
src={icon_https.src}
role="img"
alt=""
aria-hidden="true"
/>
<div class="usa-media-block__body">
/>
<div class="usa-media-block__body">
<p>
<strong>Secure .gov websites use HTTPS</strong><br />A
<strong>lock</strong> (
<span class="icon-lock"
<strong>Secure .gov websites use HTTPS</strong><br />A
<strong>lock</strong> (
<span class="icon-lock"
><svg
xmlns="http://www.w3.org/2000/svg"
width="52"
height="64"
viewBox="0 0 52 64"
class="usa-banner__lock-image"
role="img"
aria-labelledby="banner-lock-description-default"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
width="52"
height="64"
viewBox="0 0 52 64"
class="usa-banner__lock-image"
role="img"
aria-labelledby="banner-lock-description-default"
focusable="false"
>
<title id="banner-lock-title-default">Lock</title>
<desc id="banner-lock-description-default">Locked padlock icon</desc>
<path
<title id="banner-lock-title-default">Lock</title>
<desc id="banner-lock-description-default"
>Locked padlock icon</desc
>
<path
fill="#000000"
fill-rule="evenodd"
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
/>
</svg> </span
>) or <strong>https://</strong> means you’ve safely connected to
the .gov website. Share sensitive information only on official,
secure websites.
></path>
</svg>
</span>) or <strong>https://</strong> means you’ve safely connected
to the .gov website. Share sensitive information only on official,
secure websites.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
8 changes: 8 additions & 0 deletions src/components/Businesslines.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ import yellowcard from "@assets/images/yellow-card.png";
}about/business-lines/#purchase`}
>
<img
width="216"
height="136.5"
src={redcard.src}
class="usa-media-block__img"
alt="Red charge card with the word Purchase and numbers 1234 5678 9012 3456 and the name John Smith, with a bird in the background"
Expand All @@ -55,6 +57,8 @@ import yellowcard from "@assets/images/yellow-card.png";
href={`${import.meta.env.BASE_URL}about/business-lines/#travel`}
>
<img
width="216"
height="136.5"
src={bluecard.src}
class="usa-media-block__img"
alt="Blue charge card with the word Travel and numbers 1234 5678 9012 3456 and the name John Smith, with an airplane in the background"
Expand All @@ -78,6 +82,8 @@ import yellowcard from "@assets/images/yellow-card.png";
href={`${import.meta.env.BASE_URL}about/business-lines/#fleet`}
>
<img
width="216"
height="136.5"
src={greencard.src}
class="usa-media-block__img"
alt="Green charge card with the word Fleet and numbers 1234 5678 9012 3456 and the name John Smith, with a road in the background"
Expand All @@ -104,6 +110,8 @@ import yellowcard from "@assets/images/yellow-card.png";
}about/business-lines/#integrated`}
>
<img
width="216"
height="136.5"
src={yellowcard.src}
class="usa-media-block__img"
alt="Yellow charge card with the word Intergrated and numbers 1234 5678 9012 3456 and the name John Smith, with a globe outline in the background"
Expand Down
6 changes: 6 additions & 0 deletions src/components/Callout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ const baseUrl = import.meta.env.BASE_URL;
<div class="tablet:grid-col-6 margin-top-1">
<a href="https://889.smartpay.gsa.gov/">
<img
width="464"
height="286.5"
src={callout_889.src}
alt="Three panels from a screen, the first panel has a magnifying glass and reads use the 889 search to find your vendor, the second panel has a green check mark and reads in compliance with Section 889, and third panel has a red exclamation mark and reads not in compliance with Section 889."
/>
Expand All @@ -35,6 +37,8 @@ const baseUrl = import.meta.env.BASE_URL;
<div class="tablet:grid-col-6 margin-top-1">
<a href={`${baseUrl}smarttax/tax-information-by-state/`}>
<img
width="464"
height="256"
src={callout_map.src}
alt="A map of the contiguous United States with Utah highlighted in a darker color than the rest of the states, with Alaska, Hawaii, and U.S territories also shown."
/>
Expand All @@ -56,6 +60,8 @@ const baseUrl = import.meta.env.BASE_URL;
<div class="tablet:grid-col-6 margin-top-1">
<a href={`${baseUrl}smarttax/recognizing-your-account/`}>
<img
width="464"
height="286.5"
src={callout_cards.src}
alt="A series of yellow, silver, green, blue, and red GSA SmartPay charge cards stacked on each other, descending towards the bottom left."
/>
Expand Down
10 changes: 9 additions & 1 deletion src/components/GSAHeader.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@ import PrimaryMenu from '@components/PrimaryMenu.astro';
<div class="usa-navbar">
<div class="usa-logo" id="header-logo">
<a href={`${import.meta.env.BASE_URL}`}>
<img class="usa-logo-img" src={GSALogo.src} alt="GSA SmartPay Logo" title="U.S. General Services Administration">
<img
width="207.5"
height="80"
class="usa-logo-img"
src={GSALogo.src}
alt="GSA SmartPay Logo"
title="U.S. General Services Administration">
</a>
</div>
<button type="button" class="usa-menu-btn cursor-pointer">Menu</button>
Expand Down Expand Up @@ -48,6 +54,8 @@ import PrimaryMenu from '@components/PrimaryMenu.astro';
/>
<button class="usa-button" type="submit">
<img
width="48"
height="48"
src={searchIcon.src}
class="usa-search__submit-icon"
alt="Search"
Expand Down
Loading

0 comments on commit 3260806

Please sign in to comment.