ben
/
bitshift
mirror of https://github.com/earwig/bitshift
1
1
Fork 0
Code Releases 1 Activity
Browse Source

Add prototype about page. 

Add:
        templates/index.html, static/(sass/about.sass, js/about.js, img/about/)
                -Add first iteration of the about page, with basic parallax
                scrolling and filler text.
tags/v1.0^2
Severyn Kozak 10 years ago
parent
06012910b7
commit
dcf9c283dc
7 changed files with 98 additions and 9 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
     
  2. BIN
     
  3. BIN
     
  4. +17
    -0
      static/js/about.js
  5. +37
    -0
      static/sass/about.sass
  6. +43
    -9
      templates/about.html
  7. +1
    -0
      templates/index.html

BIN
View File


BIN
View File


BIN
View File


+ 17
- 0
static/js/about.js View File

@@ -0,0 +1,17 @@
var lastVertPos = $(window).scrollTop();

function parallax(){
var currVertPos = $(window).scrollTop();
var delta = currVertPos - lastVertPos;
$(".bg").each(function(){
$(this).css("top", parseFloat($(this).css("top")) - delta * 1.35 + "px");
});
$(".bg#img-1").each(function(){
console.log($(this).css("top"));
});
lastVertPos = currVertPos;
}

$(window).scroll(function(e){
parallax();
});

+ 37
- 0
static/sass/about.sass View File

@@ -0,0 +1,37 @@
body
// background-color: red

.bg
$img-height: 600px

position: fixed
width: 100%
left: 0
z-index: -1

&#img-1
background: url("../img/about/bg1.png") no-repeat
background-size: cover
height: $img-height
top: 0px

&#img-2
background: url("../img/about/bg2.png") no-repeat
height: $img-height + 200
top: $img-height

&#img-3
background: url("../img/about/bg3.png") no-repeat
background-size: cover
height: $img-height + 100
top: 2 * $img-height + 200

div.section
background-color: white
color: black
height: 250px
font-family: arial
margin-bottom: 35px
margin-top: 365px
line-height: 20px
font-size: 16px

+ 43
- 9
templates/about.html View File

@@ -1,11 +1,45 @@
= extends "layout.html"
<!DOCTYPE html>
<!-- Global layout template, to be inherited by other project HTML files. -->


= block title
About
= endblock
<html>
<head>
<title>
bitshift &laquo;
= filter lower
= block title
= endblock
= endfilter
</title>


= block body
<div>
About us, son.
</div>
= endblock
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="description" content="bitshift is a source code search engine."/>
<meta name="keywords" content="source code language search engine"/>
<meta name="author" content="Benjamin Attal Ben Kurtovic Severyn Kozak"/>

{{ assets.tag("lib/jquery.min.js") }}
{{ assets.tag("main.css") }}
{{ assets.tag("about.css") }}
{{ assets.tag("about.js") }}

= block head
= endblock
</head>
<body>
<div id="img-1" class="bg"></div>
<div id="img-2" class="bg"></div>
<div id="img-3" class="bg"></div>

<div id="top" class="section">
<h1>Section one</h1>
Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
</div>
<div class="section">
<h1>Section two</h1>
Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
</div>
<div class="section">
<h1>Section three</h1>
Having done this, our code is complete. If you test the file you’ll see it working. To change the speed, we need to change the fraction in the function; smaller fractions reduce the speed and higher fractions increase it. You can see the final result of this code in this pen I created.
</div>
</body>
</html>

+ 1
- 0
templates/index.html View File

@@ -108,6 +108,7 @@
<li><span class="hotkey">j</span> <span class="seperator">:</span> move window down to the next result</li> <li><span class="hotkey">j</span> <span class="seperator">:</span> move window down to the next result</li>
<li><span class="hotkey">h</span> <span class="seperator">:</span> move to the previous symbol match</li> <li><span class="hotkey">h</span> <span class="seperator">:</span> move to the previous symbol match</li>
<li><span class="hotkey">l</span> <span class="seperator">:</span> move to the next symbol match</li> <li><span class="hotkey">l</span> <span class="seperator">:</span> move to the next symbol match</li>
<li><span class="hotkey">?</span> <span class="seperator">:</span> toggle help</li>
</ul> </ul>
</div> </div>
= endblock = endblock

Write Preview
Loading…
Cancel
Save