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

📝(content) Add LumaFusion Beta announcement post #499

Merged
merged 18 commits into from
Nov 9, 2022
Merged

📝(content) Add LumaFusion Beta announcement post #499

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
39f9d7b
Update homepage stat
Oct 21, 2022
ee86a3d
Rearrange stats
Oct 21, 2022
259b544
Rearrange background import to let overrides happen
Oct 24, 2022
56a5e84
Update homepage banner to allow for fallbacks
Oct 24, 2022
303692c
Add LumaFusion announcement post
Oct 24, 2022
d66c6c0
WIP: Hero updates and LumaFusion theme
Oct 24, 2022
b362a17
Merge branch 'main' into content/lumafusion-beta
Snugug Oct 24, 2022
b713ff9
Update title and short description
Oct 24, 2022
9c355d7
Improve handling of theme colors
Oct 24, 2022
ca95087
Add custom circles for theme
Oct 24, 2022
29a1ff2
Less excite
Oct 25, 2022
5c7dd29
Update wording for large-screen devices
Nov 1, 2022
f860679
Merge branch 'main' into content/lumafusion-beta
Snugug Nov 1, 2022
3cc7cd6
Merge branch 'main' into content/lumafusion-beta
Snugug Nov 3, 2022
b4c66e9
Add link to Play
Nov 3, 2022
b4155d3
Merge branch 'main' into content/lumafusion-beta
Snugug Nov 4, 2022
b6c2ff2
Merge branch 'content/lumafusion-beta' of github.com:chromeos/chromeo…
Snugug Nov 4, 2022
e2460f8
Update publish date
Snugug Nov 4, 2022
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
Prev Previous commit
Next Next commit
Update homepage banner to allow for fallbacks
  • Loading branch information
Sam Richard committed Oct 24, 2022
commit 56a5e8483dd6893d8fb8403a0465c3f5fe3cd023
6 changes: 3 additions & 3 deletions site/_components/banner-interstitial.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
#}-->
{% from 'icon.njk' import icon %} {% macro bannerInterstitial(content, microcopy) %}
<article class="banner-interstitial {{'banner-interstitial--no-cta' if not content.cta}}">
<div class="banner-interstitial__inner {{'theme theme__' + content.theme.theme if content.theme}}">
<div class="banner-interstitial__inner {% if content.theme.theme %}theme theme__{{content.theme.theme}}{% elif content.tag %}background-color--{{content.normalizedTag}}{% endif %}">
<div class="banner-interstitial__content">
<div class="banner-interstitial__text">
<small class="banner-interstitial__eyebrow type--h2">{{microcopy.featured.eyebrow}}</small>
Expand All @@ -36,8 +36,8 @@
<img class="banner-interstitial--background-pattern" src="{{content.theme.background}}" alt="" />
{% endif %} {% else %}
<picture>
<source media="(min-width: 720px)" srcset="ix:https://landings/news/top/banner-{{tagSlug}}.svg" />
<img class="banner-interstitial--background-pattern" src="ix:https://landings/news/banner-{{tagSlug}}.svg" alt="" />
<source media="(min-width: 720px)" srcset="ix:https://landings/news/top/banner-{{content.normalizedTag}}.svg" />
<img class="banner-interstitial--background-pattern" src="ix:https://landings/news/banner-{{content.normalizedTag}}.svg" alt="" />
</picture>
{% endif %}
</div>
Expand Down
12 changes: 11 additions & 1 deletion site/sass/components/_banner-interstitial.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
&__eyebrow,
&__title,
&__copy {
color: var(--white);
color: inherit;
}

&__copy {
Expand All @@ -59,12 +59,16 @@
}

&__cta {
border-color: currentColor;
color: inherit;
display: inline-flex;
margin-top: 1.75rem;
}

&__image-wrapper {
height: 100%;
max-width: pxRem(746px);
overflow: hidden;
// Stretch image wrapper outside of the banner's wrapper.
width: math.percentage(math.div(456px, 327px));

Expand All @@ -81,4 +85,10 @@
&__image {
object-fit: cover;
}

&--background-pattern {
float: right;
max-height: 100%;
width: auto;
}
}