repos/website
1
Fork 0
Code Issues 1 Pull requests 27 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; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
margin-top: 2.5rem; margin-top: 3rem;
padding-top: 0.5rem; padding-top: 0.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
background-color: $white; background-color: $white;
display: block;
.hero-body { .hero-body {
padding: 0; padding: 0;
@ -46,4 +47,8 @@ section.hero {
.subtitle { .subtitle {
margin-bottom: 0.5rem; 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 %}"> <img class="hero" src="{% image_url page.hero_image page.HERO_IMAGE_SIZE %}">
{% endif %} {% endif %}
<section class="hero container"> <section class="hero">
<div class="hero-body"> <div class="container">
<div class="columns"> <div class="hero-body">
<div class="column"> <div class="columns">
<h1 class="title is-1">{{ page.title }}</h1> <div class="column">
{% if page.subtitle %} <h1 class="title is-1">{{ page.title }}</h1>
<h2 class="subtitle">{{ page.subtitle }}</h2> {% if page.subtitle %}
{% endif %} <h2 class="subtitle">{{ page.subtitle }}</h2>
</div> {% endif %}
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped"> </div>
<div class="dropdown is-hoverable is-right"> <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
<div class="dropdown-trigger"> <div class="dropdown is-hoverable is-right">
<button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu"> <div class="dropdown-trigger">
<span>Table of Contents</span> <button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
<span class="icon is-small"> <span>Table of Contents</span>
<i class="fas fa-angle-down" aria-hidden="true"></i> <span class="icon is-small">
</span> <i class="fas fa-angle-down" aria-hidden="true"></i>
</button> </span>
</div> </button>
<div class="dropdown-menu" id="dropdown-menu" role="menu"> </div>
<div class="dropdown-content menu"> <div class="dropdown-menu" id="dropdown-menu" role="menu">
<ul class="menu-list"> <div class="dropdown-content menu">
<li><a>Dashboard</a></li> <ul class="menu-list">
</ul> <li><a>Dashboard</a></li>
</ul>
</div>
</div> </div>
</div> </div>
<button class="button is-radiusless">Top</button>
</div> </div>
<button class="button is-radiusless">Top</button>
</div> </div>
</div> </div>
</div> </div>