lab/website-components
1
Fork 0
Code Activity

Change hero details size

Browse source
This commit is contained in:
Jake Howard 2024-06-20 15:37:58 +01:00
parent 9e7567ab25
commit 2ee0108d97
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/hero/index.html
View file

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

17
src/hero/index.scss
View file

@ -9,25 +9,24 @@ html {
$content-width: 85ch; $content-width: 85ch;
$content-padding: 16px; $content-padding: 16px;
$bleed-ratio: 0.2; $bleed-ratio: 0.2;
$details-padding: 1rem;
.hero { .hero {
height: 45vh; height: 50vh;
background-color: red; background-color: red;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.details { .details-wrapper {
padding: $details-padding; padding: 1rem;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
color: white; color: white;
line-height: 1; line-height: 1;
width: calc(#{$content-width} - 2 * $details-padding); width: 100%;
margin: 0 auto; }
&:hover { .details {
opacity: 1; width: $content-width;
} margin: 0 auto;
h1 { h1 {
margin: 0; margin: 0;