repos/website
1
Fork 0
Code Issues 1 Pull requests 23 Activity

Ensure sticky hero is full width

Browse source
This commit is contained in:
Jake Howard 2022-06-19 16:11:53 +01:00
parent dae91f9279
commit 4685faa361
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 33 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/src/scss/_hero.scss
View file

@ -8,10 +8,11 @@ section.hero {
position: sticky;
top: 0;
z-index: 10;
margin-top: 2.5rem;
margin-top: 3rem;
padding-top: 0.5rem;
margin-bottom: 1.5rem;
background-color: $white;
display: block;
.hero-body {
padding: 0;
@ -46,4 +47,8 @@ section.hero {
.subtitle {
margin-bottom: 0.5rem;
}
.column {
padding: unset;
}
}

52
website/common/templates/common/hero.html
View file

@ -4,34 +4,36 @@
<img class="hero" src="{% image_url page.hero_image page.HERO_IMAGE_SIZE %}">
{% endif %}
<section class="hero container">
<div class="hero-body">
<div class="columns">
<div class="column">
<h1 class="title is-1">{{ page.title }}</h1>
{% if page.subtitle %}
<h2 class="subtitle">{{ page.subtitle }}</h2>
{% endif %}
</div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
<div class="dropdown is-hoverable is-right">
<div class="dropdown-trigger">
<button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Table of Contents</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content menu">
<ul class="menu-list">
<li><a>Dashboard</a></li>
</ul>
<section class="hero">
<div class="container">
<div class="hero-body">
<div class="columns">
<div class="column">
<h1 class="title is-1">{{ page.title }}</h1>
{% if page.subtitle %}
<h2 class="subtitle">{{ page.subtitle }}</h2>
{% endif %}
</div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
<div class="dropdown is-hoverable is-right">
<div class="dropdown-trigger">
<button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Table of Contents</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content menu">
<ul class="menu-list">
<li><a>Dashboard</a></li>
</ul>
</div>
</div>
</div>
<button class="button is-radiusless">Top</button>
</div>
<button class="button is-radiusless">Top</button>
</div>
</div>
</div>