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.
10 år sedan · dcf9c283dc
--- a/Binär
+++ b/Binär
--- a/Binär
+++ b/Binär
--- a/Binär
+++ b/Binär
--- a/static/js/about.js
+++ b/static/js/about.js
@@ -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();
 });
--- a/static/sass/about.sass
+++ b/static/sass/about.sass
@@ -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
--- a/templates/about.html
+++ b/templates/about.html
@@ -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>
--- a/templates/index.html
+++ b/templates/index.html
@@ -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">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">?</span> <span class="seperator">:</span> toggle help</li>
    </ul>
  </div>
 = endblock