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.

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

Update small card headline styles for mobile #12555

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

jamesmockett
Copy link
Contributor

@jamesmockett jamesmockett commented Oct 15, 2024

What does this change?

Updates small card headline styles for mobile. headlineMedium15 is applied up to the tablet breakpoint where it switches to headlineMedium17. The existing small style added for the highlights container has been renamed to tiny to reflect the smaller font size.

Mapping

Before After
size="small" size="small" sizeOnMobile="tiny"
size="medium" sizeOnMobile="small" size="medium" sizeOnMobile="tiny"

Before

size="small

< mobileMedium: 14
> mobileMedium < desktop: 17
desktop: 17

size="medium"

< desktop: 17
desktop: 20

size="medium sizeOnMobile="small"

< mobileMedium: 14
> mobileMedium < desktop: 17
desktop: 20

After

size="small"

< tablet: 15
> tablet < desktop: 17
desktop: 17

size="tiny"

< mobileMedium: 14
> mobileMedium < desktop: 17
desktop: 14

size="small" sizeOnMobile="tiny"

< mobileMedium: 14
> mobileMedium < desktop: 17
desktop: 17

size="medium" sizeOnMobile="small"

< tablet: 15
> tablet < desktop: 17
desktop: 20

size="medium" sizeOnMobile="tiny"

< mobileMedium: 14
> mobileMedium < desktop: 17
default: 20

Why?

This is required for the scrollable small container.

Screenshots

Mobile Tabet
mobile tablet

@jamesmockett jamesmockett added run_chromatic Runs chromatic when label is applied fairground labels Oct 15, 2024
@jamesmockett jamesmockett self-assigned this Oct 15, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 15, 2024
Copy link

github-actions bot commented Oct 15, 2024

Size Change: +30 B (0%)

Total Size: 907 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1000.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B 0 B
dotcom-rendering/dist/1156.client.web.********************.js 3.97 kB +18 B (+0.46%)
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1417.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/146.client.web.********************.js 5.29 kB -1 B (-0.02%)
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1628.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/1884.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/1888.client.web.********************.js 2.92 kB -5 B (-0.17%)
dotcom-rendering/dist/1904.client.web.********************.js 12.6 kB 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/2123.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/2182.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/2249.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/3006.client.web.********************.js 4.48 kB -1 B (-0.02%)
dotcom-rendering/dist/3109.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3234.client.web.********************.js 5.2 kB 0 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/3364.client.web.********************.js 3.97 kB +1 B (+0.03%)
dotcom-rendering/dist/346.client.web.********************.js 3.24 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3921.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/408.client.web.********************.js 10.9 kB 0 B
dotcom-rendering/dist/4122.client.web.********************.js 1.86 kB 0 B
dotcom-rendering/dist/4149.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4769.client.web.********************.js 4.28 kB 0 B
dotcom-rendering/dist/4820.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/4866.client.web.********************.js 6.32 kB 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/5087.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/5340.client.web.********************.js 3.32 kB +2 B (+0.06%)
dotcom-rendering/dist/5371.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/5538.client.web.********************.js 6.18 kB +1 B (+0.02%)
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/5761.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/5937.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/5944.client.web.********************.js 4.97 kB +1 B (+0.02%)
dotcom-rendering/dist/5982.client.web.********************.js 3.78 kB -1 B (-0.03%)
dotcom-rendering/dist/6044.client.web.********************.js 726 B 0 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B 0 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/6261.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/6291.client.web.********************.js 4.27 kB +2 B (+0.05%)
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/661.client.web.********************.js 3.21 kB -4 B (-0.12%)
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/6665.client.web.********************.js 5.05 kB 0 B
dotcom-rendering/dist/6738.client.web.********************.js 6.01 kB +10 B (+0.17%)
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/6915.client.web.********************.js 22.7 kB -1 B (0%)
dotcom-rendering/dist/7072.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/7081.client.web.********************.js 20.2 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7242.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/7341.client.web.********************.js 4 kB +1 B (+0.03%)
dotcom-rendering/dist/7407.client.web.********************.js 3.7 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/7713.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/7780.client.web.********************.js 2.27 kB -1 B (-0.04%)
dotcom-rendering/dist/7962.client.web.********************.js 3.58 kB +2 B (+0.06%)
dotcom-rendering/dist/8103.client.web.********************.js 4.02 kB 0 B
dotcom-rendering/dist/823.client.web.********************.js 16.4 kB +1 B (+0.01%)
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/8318.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/840.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/8426.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/8437.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/8483.client.web.********************.js 14.1 kB +2 B (+0.01%)
dotcom-rendering/dist/8504.client.web.********************.js 827 B 0 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/8671.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8730.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/8746.client.web.********************.js 3.01 kB 0 B
dotcom-rendering/dist/8815.client.web.********************.js 3.89 kB 0 B
dotcom-rendering/dist/8822.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/8903.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/8990.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/9080.client.web.********************.js 3.72 kB -1 B (-0.03%)
dotcom-rendering/dist/9122.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/9132.client.web.********************.js 4.2 kB +1 B (+0.02%)
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9216.client.web.********************.js 3.45 kB -1 B (-0.03%)
dotcom-rendering/dist/9373.client.web.********************.js 4.4 kB 0 B
dotcom-rendering/dist/940.client.web.********************.js 10.2 kB +1 B (+0.01%)
dotcom-rendering/dist/9493.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/9608.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/9696.client.web.********************.js 5.91 kB 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9736.client.web.********************.js 44.2 kB 0 B
dotcom-rendering/dist/9835.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.96 kB -1 B (-0.02%)
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB -1 B (-0.04%)
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB -1 B (-0.03%)
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB +1 B (+0.02%)
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.72 kB +2 B (+0.03%)
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.26 kB +1 B (+0.01%)
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.97 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.69 kB +2 B (+0.03%)
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.52 kB -2 B (-0.04%)
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.77 kB -1 B (-0.03%)
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 2.73 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 970 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.74 kB +1 B (+0.03%)
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.65 kB -1 B (-0.01%)
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.62 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB -1 B (-0.05%)
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.9 kB +1 B (+0.01%)
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.1 kB +1 B (+0.01%)
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 45.9 kB +2 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB +1 B (+0.04%)
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.28 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.24 kB +2 B (+0.05%)
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.77 kB +1 B (+0.02%)
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.61 kB -2 B (-0.06%)
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 4.47 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.78 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.28 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 5.84 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.95 kB -2 B (-0.04%)
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4 kB +2 B (+0.05%)
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.22 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.21 kB +2 B (+0.04%)
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB +1 B (+0.03%)
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.29 kB -1 B (-0.02%)
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 4.99 kB +3 B (+0.06%)
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.23 kB -5 B (-0.15%)
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.61 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 792 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 482 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 733 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB +1 B (+0.06%)
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.63 kB -1 B (-0.02%)
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB +1 B (+0.02%)
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.21 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB -1 B (-0.01%)
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB -2 B (-0.07%)
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.25 kB -1 B (-0.01%)
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.74 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB +1 B (+0.09%)
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB -1 B (-0.04%)
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.96 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.63 kB +1 B (+0.04%)
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 5.94 kB 0 B

compressed-size-action

@jamesmockett jamesmockett force-pushed the jm/scrollable-small-headline-size branch from 1dc6e55 to 2895fc7 Compare October 15, 2024 20:15
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Oct 15, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 15, 2024
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Oct 15, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 15, 2024
@jamesmockett jamesmockett force-pushed the jm/scrollable-small-headline-size branch from 6798bb6 to a92c95d Compare October 16, 2024 11:52
@jamesmockett jamesmockett force-pushed the jm/scrollable-small-headline-size branch from a92c95d to c40e3a9 Compare October 16, 2024 12:00
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Oct 16, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 16, 2024
@jamesmockett jamesmockett marked this pull request as ready for review October 16, 2024 13:31
@jamesmockett jamesmockett requested a review from a team as a code owner October 16, 2024 13:31
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@jamesmockett
Copy link
Contributor Author

#12571 will make this much easier to achieve so this will likely be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant