BitGoblin/website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added some parallax to the footer - the footer now gets revealed as you scroll down instead of moving with the page

Browse Source
This commit is contained in:
Gregory Ballantine 2021-08-20 22:52:10 -04:00
parent 1904e631e6
commit 4abc629afa
2 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/_layouts/default.html
View File

@ -10,25 +10,27 @@
<script src="/assets/scripts/varrock.js"></script> <script src="/assets/scripts/varrock.js"></script>
</head> </head>
<body> <body>
<header id="header-box"> <div id="wrapper">
<div id="header-logo"> <header id="header-box">
<h1>Bit Goblin</h1> <div id="header-logo">
</div> <h1>Bit Goblin</h1>
</header> </div>
</header>
<nav id="navigation"> <nav id="navigation">
<ul> <ul>
<li><a href="{% link index.markdown %}">Home</a></li> <li><a href="{% link index.markdown %}">Home</a></li>
<li><a href="{% link blog.markdown %}">Blog Posts</a></li> <li><a href="{% link blog.markdown %}">Blog Posts</a></li>
<li><a href="{% link support.markdown %}">Support</a></li> <li><a href="{% link support.markdown %}">Support</a></li>
<li><a href="{% link contact.markdown %}">Contact</a></li> <li><a href="{% link contact.markdown %}">Contact</a></li>
</ul> </ul>
</nav> </nav>
<div id="main-content" class="container"> <div id="main-content" class="container">
<div class="row"> <div class="row">
<div class="columns twelve"> <div class="columns twelve">
{{ content }} {{ content }}
</div>
</div> </div>
</div> </div>
</div> </div>

17
src/assets/stylesheets/lumbridge.sass
View File

@ -5,6 +5,7 @@ body
font-family: "Gill Sans", sans-serif font-family: "Gill Sans", sans-serif
font-size: 2rem font-size: 2rem
margin: 0 margin: 0
padding-bottom: 125px
a a
color: #1e76d1 color: #1e76d1
@ -21,8 +22,19 @@ hr
.u-text-center .u-text-center
text-align: center text-align: center
// this wrapper is only used to hide the footer
#wrapper
position: relative
z-index: 10
width: 100%
height: 100%
margin: 0
padding: 0
background: white
#header-box #header-box
position: relative position: relative
z-index: 2
height: 500px height: 500px
background: background:
image: url(/assets/images/bg-banner.jpg) image: url(/assets/images/bg-banner.jpg)
@ -113,7 +125,12 @@ hr
// footer section // footer section
#footer #footer
position: fixed
z-index: -1
bottom: 0
width: 100% width: 100%
margin-top: 25px margin-top: 25px
padding-top: 15px padding-top: 15px
background: #212121
border-top: 2px solid #999 border-top: 2px solid #999
color: white