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

19
src/hero/index.html
View file

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

17
src/hero/index.scss
View file

@ -9,26 +9,25 @@ html {
$content-width: 85ch;
$content-padding: 16px;
$bleed-ratio: 0.2;
$details-padding: 1rem;
.hero {
height: 45vh;
height: 50vh;
background-color: red;
display: flex;
align-items: flex-end;
.details {
padding: $details-padding;
.details-wrapper {
padding: 1rem;
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;
width: 100%;
}
.details {
width: $content-width;
margin: 0 auto;
h1 {
margin: 0;
margin-bottom: 0.75rem;