Diagonal layouts in Source

I would like to recreate this screen for a home page, the background with 3 colors, with gradient at the top (the colors will be decided, I think from the top green white and red), and in the middle an image with transparency.
I would like to update a friend’s site using only SOURCE to bring the PageSpeed Insights value from 40 to a minimum of 90.

If I want to use only SOURCE components, can I recreate the page?
How could I do?

2 Likes

Here is a very simple demo of 1 way to do it.

7 Likes

Thank you

To get that white to transparent fade on the heading, this will do it (to the document Stuart provided, anyway):

h1.stacks_in_22 span {
	background-image:linear-gradient(to top, transparent, white);
	background-clip:text;
	color:transparent;
	}

5 Likes

And… Source Rocks!

2 Likes

Nice! I’d go with this to make it a bit more robust / re-usable:

.grad-text h1 {
    background-image:linear-gradient(to top, transparent, white);
    background-clip:text;
    color:transparent;
}

Just add the grad-text class name to either the header stack or the grid item (and switch the header colour back to ‘Base colour’ so that the above css can override it)

2 Likes

And maybe pop a cheeky font size clamp in there to scale the heading size with the width.

1 Like

I’m liking sizing headlines with vw — I’ll have some things to share showing this in due course. vw also produces nice, responsive behaviour with line-height and margins and letter and word spacing and all sorts of other things (including positioning). It’s good for heights, too, as using it in both x and y dimensions keeps everything in proportion. And I’m wondering if it’s really necessary to clamp headlines, because even at 320px something that is 5 vw or more is big enough to have some presence. But I suspect that I’ll be swapping vw for qw when there is enough browser support for container queries.

I use this useful scaled text font size min max calculator at https://xgkft.csb.app

Which is the calculator found on this page at Linearly Scale font-size with CSS clamp() Based on the Viewport | CSS-Tricks - CSS-Tricks

1 Like

Thank you all