Change hero details size
This commit is contained in:
parent
9e7567ab25
commit
2ee0108d97
2 changed files with 30 additions and 14 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue