HAML
#options
#burger{:title => 'Options'}
%li.R1
%li.L1
%li.R2
%li.L2
%li.R3
%li.L3
%a{:href => '#top'}
#arrow{:title => 'Jump to Top'}
%li.stem
%li.branchL
%li.branchR
%a{:href => '#'}
#bright
%li.ray
%li.ray
%li.ray
%li.ray
%li.ray
%li.dimtext
%li.dimtext
%li.dimtext
%li.dimtext
%li.dimtext
%li.dimtext
%li.dimtext
%li.dimtext
%li.dimtext
%li.surface
SASS
$headline: 'Montserrat', sans-serif
$intra: 'Roboto Slab', sans-serif
$tag: 'Roboto Slab', sans-serif
$accent: #bbbbbb
$darkaccent: #444444
$speed: .2s
*.dim
color: #ddd
* a
color: inherit
text-decoration: none
&:visited
color: inherit
text-decoration: none
::-webkit-scrollbar
display: none
::-moz-scrollbar
display: none
::-o-scrollbar
display: none
body.dim
background: #222
color: #ddd
body
font-size: 24px
padding: 24px
margin: 24px
cursor: default
min-height: 100%
position: relative
padding-bottom: 64px
background: white
#top
z-index: 100
position: absolute
margin: -24px
top: 0
left: 0
width: 10px
height: 10px
background: none
#options
z-index: 15
position: fixed
background: transparent
right: 0
top: 0
bottom: 0
margin: auto
width: 132px
height: 100%
-webkit-transition: $speed
&:hover
background: rgba(0,0,0,.05)
body.dim #options:hover
background: rgba(255,255,255,.05)
#options:hover #arrow
opacity: 1
#options:hover #bright
opacity: 1
body.dim #burger .R1, body.dim #burger .L1, body.dim #burger .R2, body.dim #burger .L2, body.dim #burger .R3, body.dim #burger .L3
background: #ddd
#burger
z-index: 15
position: fixed
background: none
/* background: rgba(0,0,0,.2) */
top: 48px
right: 48px
width: 36px
height: 36px
box-sizing: border-box
padding: 6px
padding-top: 12px
-webkit-transition: $speed
#options:hover #burger
.R1
display: block
width: 8px
height: 2px
margin-top: 0
margin-left: 16px
.L1
display: block
width: 14px
height: 2px
margin-top: -2px
margin-left: 0px
.R2
display: block
width: 4px
height: 2px
margin-top: 3px
margin-left: 20px
.L2
display: block
width: 18px
height: 2px
margin-top: -2px
margin-left: 0px
.R3
display: block
width: 18px
height: 2px
margin-top: 3px
margin-left: 6px
.L3
display: block
width: 4px
height: 2px
margin-top: -2px
margin-left: 0px
li
-webkit-transition: $speed
.R1
display: block
width: 18px
height: 2px
background: black
margin-bottom: 0px
margin-left: 6px
.L1
display: block
width: 4px
height: 2px
background: black
margin-top: -2px
.R2
display: block
width: 11px
height: 2px
background: black
margin-top: 3px
margin-left: 13px
.L2
display: block
width: 11px
height: 2px
background: black
margin-top: -2px
.R3
display: block
width: 4px
height: 2px
background: black
margin-top: 3px
margin-left: 20px
.L3
display: block
width: 18px
height: 2px
background: black
margin-top: -2px
margin-left: 0px
#arrow
-webkit-transition: $speed
z-index: 15
margin: auto
position: fixed
right: 48px
top: 120px
width: 36px
height: 36px
padding: 6px
box-sizing: border-box
opacity: 0
.stem
background: black
display: block
width: 2px
height: 24px
margin: 0px
margin-top: 0px
margin-left: 11px
.branchL
display: block
position: absolute
width: 2px
height: 12px
background: black
margin: 6px
top: -1px
margin-left: 6px
-webkit-transform: rotate(45deg)
.branchR
display: block
position: absolute
width: 2px
height: 12px
background: black
margin: 6px
top: -1px
margin-left: 15.5px
-webkit-transform: rotate(-45deg)
body.dim #arrow .stem, body.dim #arrow .branchL, body.dim #arrow .branchR
background: #ddd
#arrow:hover
.branchL
display: block
position: absolute
width: 2px
height: 12px
margin: 6px
top: -1px
margin-left: 15.5px
-webkit-transform: rotate(-45deg)
.branchR
display: block
position: absolute
width: 2px
height: 12px
margin: 6px
top: -1px
margin-left: 6px
-webkit-transform: rotate(45deg)
#bright
background: none
margin: auto
position: fixed
right: 48px
top: 192px
width: 36px
height: 36px
padding: 6px
box-sizing: border-box
opacity: 0
-webkit-transition: .2s
#bright .ray
-webkit-transition: .2s
background: black
position: absolute
display: block
width: 6px
height: 2px
margin: 0px
top: 18px
#bright .dimtext
-webkit-transition: .2s
background: black
position: absolute
display: block
margin: 0px
opacity: 0
top: 7px
li
-webkit-transition: .2s
#bright li:nth-child(1)
-webkit-transform: rotate(-45deg)
right: 6px
top: 13px
#bright li:nth-child(2)
-webkit-transform: rotate(-70deg)
left: 20px
top: 10px
#bright li:nth-child(3)
top: 7px
left: 17px
width: 2px
height: 6px
#bright li:nth-child(4)
-webkit-transform: rotate(70deg)
left: 10px
top: 10px
#bright li:nth-child(5)
-webkit-transform: rotate(45deg)
left: 6px
top: 13px
#bright li:nth-child(6)
width: 2px
height: 9px
left: 17px
#bright li:nth-child(7)
width: 2px
height: 9px
left: 21px
#bright li:nth-child(8)
width: 2px
height: 5px
left: 23px
-webkit-transform: rotate(-45deg)
#bright li:nth-child(9)
width: 2px
height: 5px
left: 25px
-webkit-transform: rotate(45deg)
#bright li:nth-child(10)
width: 2px
height: 9px
left: 27px
#bright li:nth-child(11)
width: 2px
height: 5px
top: 9px
left: 13px
#bright li:nth-child(12)
width: 2px
height: 5px
top: 9px
left: 7px
#bright li:nth-child(13)
width: 6px
height: 2px
top: 7px
left: 7px
#bright li:nth-child(14)
width: 6px
height: 2px
top: 14px
left: 7px
.surface
background: black
position: absolute
display: block
width: 24px
height: 2px
margin: 0px
top: 18px
left: 6px
#bright:hover
li:nth-child(1)
-webkit-transform: rotate(0)
right: 6px
top: 18px
li:nth-child(2)
-webkit-transform: rotate(0)
right: 6px
top: 18px
li:nth-child(3)
width: 2px
height: 2px
right: 6px
top: 18px
li:nth-child(4)
-webkit-transform: rotate(0)
right: 6px
top: 18px
li:nth-child(5)
-webkit-transform: rotate(0)
right: 6px
top: 18px
.dimtext
-webkit-transition: .2s
opacity: 1
/* BODY.DIM */
/* BODY.DIM */
/* BODY.DIM */
body.dim #bright
background: none
margin: auto
position: fixed
right: 48px
top: 192px
width: 36px
height: 36px
padding: 6px
box-sizing: border-box
opacity: 0
-webkit-transition: .2s
body.dim #bright .ray
-webkit-transition: .2s
background: #ddd
position: absolute
display: block
width: 6px
height: 2px
margin: 0px
top: 18px
body.dim #bright .dimtext
-webkit-transition: .2s
background: #ddd
position: absolute
display: block
margin: 0px
opacity: 1
top: 7px
body.dim #bright li:nth-child(1)
-webkit-transform: rotate(0)
right: 6px
top: 18px
body.dim #bright li:nth-child(2)
-webkit-transform: rotate(0)
right: 6px
top: 18px
body.dim #bright li:nth-child(3)
-webkit-transform: rotate(0)
width: 2px
height: 2px
right: 6px
top: 18px
body.dim #bright li:nth-child(4)
-webkit-transform: rotate(0)
right: 6px
top: 18px
body.dim #bright li:nth-child(5)
-webkit-transform: rotate(0)
right: 6px
top: 18px
body.dim #bright li:nth-child(6)
width: 2px
height: 9px
left: 17px
body.dim #bright li:nth-child(7)
width: 2px
height: 9px
left: 21px
body.dim #bright li:nth-child(8)
width: 2px
height: 5px
left: 23px
-webkit-transform: rotate(-45deg)
body.dim #bright li:nth-child(9)
width: 2px
height: 5px
left: 25px
-webkit-transform: rotate(45deg)
body.dim #bright li:nth-child(10)
width: 2px
height: 9px
left: 27px
body.dim #bright li:nth-child(11)
width: 2px
height: 5px
top: 9px
left: 13px
body.dim #bright li:nth-child(12)
width: 2px
height: 5px
top: 9px
left: 7px
body.dim #bright li:nth-child(13)
width: 6px
height: 2px
top: 7px
left: 7px
body.dim #bright li:nth-child(14)
width: 6px
height: 2px
top: 14px
left: 7px
body.dim #bright .surface
background: #ddd
position: absolute
display: block
width: 24px
height: 2px
margin: 0px
top: 18px
left: 6px
body.dim #bright:hover
li:nth-child(1)
-webkit-transform: rotate(-45deg)
top: 13px
li:nth-child(2)
-webkit-transform: rotate(-70deg)
top: 10px
li:nth-child(3)
-webkit-transform: rotate(-deg)
top: 7px
left: 17px
width: 2px
height: 6px
li:nth-child(4)
-webkit-transform: rotate(70deg)
top: 10px
li:nth-child(5)
-webkit-transform: rotate(45deg)
top: 13px
.dimtext
-webkit-transition: .2s
opacity: 0
JAVASCRIPT
/* Dim Mode (including button)*/
$("#bright").click(function() {
$('body').toggleClass("dim");
});
/* Scroll-animate */
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
1 Response