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
li
a.inlbutton href="/settings" target="_self"
img.icon src="/icons/settings.svg" alt="cog"
img.icon src="/icons/settings.svg" alt="Settings"
li
a href="/profile" target="_self"
img.avatar src="#{session_user.avatar}" alt="Your avatar"
img.avatar src="#{session_user.avatar}" alt="Profile"
.content-container
==yield
script src="/js/sticky.js"

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

Loading…
Cancel
Save