lab/website-components
1
Fork 0
Code Activity

Reduce size of title banner on narrow hero demo

Browse source
This commit is contained in:
Jake Howard 2024-09-21 16:48:18 +01:00
parent e7f0431239
commit fe50fc73c8
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/narrow-hero/index.html
View file

@ -4,13 +4,15 @@
</head> </head>
<body> <body>
<div id="banner-wrapper"> <div id="banner-wrapper">
<img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="banner" /> <img
src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="banner"
/>
</div> </div>
<div class="details-wrapper" id="details"> <div class="details-wrapper" id="details">
<div class="details"> <div class="details">
<small>Breadcrumb</small> <small>Breadcrumb</small>
<h1>Title</h1> <h1>Title</h1>
<p>Details</p>
</div> </div>
<div id="scroll-indicator-container"> <div id="scroll-indicator-container">
<div id="scroll-indicator"></div> <div id="scroll-indicator"></div>

7
src/narrow-hero/index.scss
View file

@ -27,6 +27,13 @@ $max-content-width: calc(100% - 2rem);
width: $content-width; width: $content-width;
max-width: $max-content-width; max-width: $max-content-width;
margin: 0 auto; margin: 0 auto;
h1 {
margin: 0;
margin-bottom: 0.75rem;
margin-top: 0.5rem;
font-size: 3.5rem;
}
} }
} }