lab/website-components
1
Fork 0
Code Activity

Add hero with bleeding images

Browse source
This commit is contained in:
Jake Howard 2024-06-19 23:58:29 +01:00
parent 9e045570b8
commit 9e7567ab25
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 100 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/hero/index.html Normal file
View file

@ -0,0 +1,22 @@
<html>
<head>
<link rel="stylesheet" href="./index.scss" />
</head>
<body>
<div class="hero">
<div class="details">
<small>Breadcrumb</small>
<h1>Title</h1>
<p>Details</p>
</div>
</div>
<div class="content-wrapper">
<p>Content</p>
<img src="https://placehold.co/2000x200" />
<img src="https://placehold.co/2000x200" class="bleed" />
<img src="https://placehold.co/2000x200" class="inset" />
<img src="https://placehold.co/2000x200" class="half-bleed" />
<img src="https://placehold.co/2000x200" class="full-bleed" />
</div>
</body>
</html>

78
src/hero/index.scss Normal file
View file

@ -0,0 +1,78 @@
@import "normalize.css";
body,
html {
height: 100%;
font-size: 18px;
}
$content-width: 85ch;
$content-padding: 16px;
$bleed-ratio: 0.2;
$details-padding: 1rem;
.hero {
height: 45vh;
background-color: red;
display: flex;
align-items: flex-end;
.details {
padding: $details-padding;
background-color: rgba(0, 0, 0, 0.4);
color: white;
line-height: 1;
width: calc(#{$content-width} - 2 * $details-padding);
margin: 0 auto;
&:hover {
opacity: 1;
}
h1 {
margin: 0;
margin-bottom: 0.75rem;
margin-top: 0.5rem;
font-size: 3.5rem;
}
p {
margin: 0;
}
}
}
.content-wrapper {
display: grid;
width: 100%;
max-width: 100vw;
grid-template-columns: 1fr min($content-width, calc(100% - #{$content-padding} * 2)) 1fr;
& > * {
grid-column: 2;
width: 100%;
}
.full-bleed {
grid-column: 1 / -1;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
}
.bleed {
@extend .full-bleed;
max-width: calc($content-width * (1 + $bleed-ratio));
}
.inset {
max-width: calc($content-width * (1 - $bleed-ratio));
margin-left: auto;
margin-right: auto;
}
.half-bleed {
@extend .full-bleed;
max-width: calc(#{$content-width} + (100vw - #{$content-width}) * 0.5);
}
}