E. Almqvist 3 years ago
parent 081f0780a3
commit a3dd286deb
  1. 12
      src/public/js/sticky.js
  2. 6
      src/views/layout.slim
  3. 16
      src/views/stylesheets/style.sass

@ -0,0 +1,12 @@
window.onscroll = function() {toggleStickyHeader()};
var header = document.querySelector("header");
var sticky = header.offsetTop;
function toggleStickyHeader() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}

@ -22,10 +22,12 @@ html lang="en"
- else - else
li li
a.inlbutton href="/settings" target="_self" a.inlbutton href="/settings" target="_self"
img.icon src="/icons/settings.svg" alt="cog" img.icon src="/icons/settings.svg" alt="Settings"
li li
a href="/profile" target="_self" a href="/profile" target="_self"
img.avatar src="#{session_user.avatar}" alt="Your avatar" img.avatar src="#{session_user.avatar}" alt="Profile"
.content-container .content-container
==yield ==yield
script src="/js/sticky.js"

@ -48,7 +48,7 @@ body
header header
height: 48px height: 48px
background-color: $bg_alt_clr background-color: $bg_clr
border-bottom: $border_size solid $shadow_clr border-bottom: $border_size solid $shadow_clr
padding: .1rem .8rem padding: .1rem .8rem
white-space: nowrap white-space: nowrap
@ -105,9 +105,17 @@ header
.inlbutton .inlbutton
transition: opacity .2s transition: opacity .2s
.inlbutton:hover .inlbutton:hover
opacity: .6 opacity: .6
.sticky
position: fixed
width: 100%
top: 0
.sticky + .sticky_content
padding-top: 102px
a.button a.button
display: inline-block display: inline-block
font-size: .8rem font-size: .8rem
@ -255,8 +263,8 @@ ul.button-container
padding: 0 1rem padding: 0 1rem
.card .card
background-color: $bg_alt_clr background-color: $bg_clr
border: $border_size solid $shadow_clr //border: $border_size solid $shadow_clr
border-radius: $border_radius border-radius: $border_radius
h2 h2
text-align: left text-align: left
@ -274,12 +282,12 @@ ul.button-container
width: 250px width: 250px
word-wrap: wrap word-wrap: wrap
h2 h2
margin: 1rem 0 0 0
padding: 0 padding: 0
text-align: center text-align: center
font-size: 100% font-size: 100%
font-weight: bold font-weight: bold
border-bottom: none border-bottom: none
border-bottom: $border_size solid $shadow_clr
h3 h3
text-align: center text-align: center
font-size: .8rem font-size: .8rem

Loading…
Cancel
Save