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

Only stick header on desktop

Browse source 
On mobile, it takes up a huge amount of the viewport
This commit is contained in:
Jake Howard 2022-10-31 14:09:48 +00:00
parent 128e51b4d2
commit 0069af1233
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,8 +11,6 @@ section.hero {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
background-color: $white; background-color: $white;
display: block; display: block;
position: sticky;
top: 0;
@include dark-mode { @include dark-mode {
background-color: $dark-mode-background; background-color: $dark-mode-background;
@ -30,10 +28,6 @@ section.hero {
} }
} }
&.stuck {
box-shadow: $shadow;
}
.hero-body { .hero-body {
padding: 0; padding: 0;
} }
@ -108,6 +102,21 @@ section.hero {
.content-details { .content-details {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@include mobile {
.hero-buttons {
display: none;
}
}
@include tablet {
position: sticky;
top: 0;
&.stuck {
box-shadow: $shadow;
}
}
} }
#view-restriction-banner { #view-restriction-banner {

2
website/common/templates/wagtail_base.html
View file

@ -30,7 +30,7 @@
{% include "common/content-details.html" %} {% include "common/content-details.html" %}
</div> </div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped"> <div class="column is-narrow dropdown-wrapper hero-buttons is-grouped">
{% block hero_buttons %} {% block hero_buttons %}
{% if page.show_table_of_contents %} {% if page.show_table_of_contents %}
<div class="dropdown is-hoverable is-right" id="table-of-contents"> <div class="dropdown is-hoverable is-right" id="table-of-contents">