Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: use pre-loaded WebP background image on homepage #2523

Merged
merged 8 commits into from
Nov 16, 2024
Merged

Feat: use pre-loaded WebP background image on homepage #2523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b5a8ea0
refactor: preload JPEG background image based on media query
angela-tran Nov 13, 2024
526abe4
refactor: use WebP image as background instead of JPEG
angela-tran Nov 13, 2024
d8e85c7
refactor: preload WebP background image based on media query
angela-tran Nov 13, 2024
a6cd029
chore: delete JPEG versions of homepage background image
angela-tran Nov 14, 2024
48995b3
style(homepage): set background-color for better contrast with text
angela-tran Nov 14, 2024
be5a45d
fix: preload desktop image only once browser width is 992px and over
angela-tran Nov 15, 2024
c2f1769
chore: use single quotes to reference static image files
angela-tran Nov 15, 2024
fb1b473
Feat: fallback background color (#2524)
angela-tran Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions benefits/core/templates/core/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
<title>{% block page-title %}{% endblock page-title %}| {% translate "Cal-ITP Benefits" %}</title>
{# djlint:on #}

{% block preload %}{% endblock preload %}

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">

{% comment %}
Expand Down
6 changes: 6 additions & 0 deletions benefits/core/templates/core/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{% extends "core/base.html" %}
{% load i18n %}
{% load static %}

{% block classes %}
{{ block.super | add:" landing" }}
Expand All @@ -10,6 +11,11 @@
{% endblock title %}
{% endblock page-title %}

{% block preload %}
<link rel="preload" as="image" href="{% static 'img/benefits-bg-mobile.webp' %}" media="(width < 992px)" />
<link rel="preload" as="image" href="{% static 'img/benefits-bg-desktop.webp' %}" media="(width >= 992px)">
{% endblock preload %}
thekaveman marked this conversation as resolved.
Show resolved Hide resolved

{% block main-content %}
<div class="container">
<div class="row align-items-end align-items-lg-center">
Expand Down
6 changes: 4 additions & 2 deletions benefits/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -841,8 +841,9 @@ a.card:focus-visible {

:root {
--landing-main-height: calc(100vh - 80px); /* Header Height (80px) */
--landing-background: url("/static/img/benefits-bg-mobile.jpg") no-repeat
--landing-background: url("/static/img/benefits-bg-mobile.webp") no-repeat
var(--primary-color);
--landing-background-fallback-color: #1a1b16; /* same color the left side of the background image */
--landing-box-background: var(--bs-white);
--landing-box-border: 12px solid var(--primary-color);
--landing-text-color: var(--text-primary-color);
Expand All @@ -854,7 +855,7 @@ a.card:focus-visible {
--landing-main-height: calc(
100vh - 130px
); /* 130px = Header Height (80px) + (Footer Link (50px) */
--landing-background: url("/static/img/benefits-bg-desktop.jpg") no-repeat;
--landing-background: url("/static/img/benefits-bg-desktop.webp") no-repeat;
--landing-box-background: transparent;
--landing-box-border: none;
--landing-text-color: var(--bs-white);
Expand All @@ -865,6 +866,7 @@ a.card:focus-visible {
.landing main#main-content {
background: var(--landing-background);
background-size: cover;
background-color: var(--landing-background-fallback-color);
}

.landing main#main-content .container .row:first-child {
Expand Down
Binary file removed benefits/static/img/benefits-bg-desktop.jpg
View file
Open in desktop
Binary file not shown.
Binary file added benefits/static/img/benefits-bg-desktop.webp
View file
Open in desktop
Binary file not shown.
Binary file removed benefits/static/img/benefits-bg-mobile.jpg
View file
Open in desktop
Binary file not shown.
Binary file added benefits/static/img/benefits-bg-mobile.webp
View file
Open in desktop
Binary file not shown.
Loading