Browse Source

Reformat about.html, embed vimeo demo video.

Add:
        templates/about.html. static/(sass/about.sass, js/about.js)
                -Embed our Vimeo video, and add the Javascript necessary to make
                it fluid-width.

Ref:
        templates/about.html
                -The file's indented formatting was completely mangled in a
                previous commit; reformat.
tags/v1.0^2
Severyn Kozak 10 years ago
parent
commit
54cbd29e42
3 changed files with 102 additions and 64 deletions
  1. +31
    -0
      static/js/about.js
  2. +8
    -4
      static/sass/about.sass
  3. +63
    -60
      templates/about.html

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

@@ -4,6 +4,10 @@

var lastVertPos = $(window).scrollTop();

/*
* Scroll `div#img-[1-4]` at a greater speed than the text, producing a
* parallax effect.
*/
$(window).scroll(function(e){
var currVertPos = $(window).scrollTop();
var delta = currVertPos - lastVertPos;
@@ -13,3 +17,30 @@ $(window).scroll(function(e){
});
lastVertPos = currVertPos;
});

/*
* Make the dimensions of the vimeo video fluid.
*/
(function adjustVimeoDimensions(){
var iframe = $("iframe#vimeo")[0];
var videoRatio = (iframe.height / iframe.width) * 100;

iframe.style.position = "absolute";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.width = "100%";
iframe.height = "100%";

iframe.style.height = "";
iframe.style.width = "";

var wrap = document.createElement("div");
wrap.className = "fluid-vids";
wrap.style.width = "100%";
wrap.style.position = "relative";
wrap.style.paddingTop = videoRatio + "%";

var iframeParent = iframe.parentNode;
iframeParent.insertBefore(wrap, iframe);
wrap.appendChild(iframe);
}());

+ 8
- 4
static/sass/about.sass View File

@@ -25,32 +25,36 @@ div.bg
background: url(../img/about/bg2.png) no-repeat
background-size: cover
height: $img-height + 300
top: 450px
top: 1150px

&#img-3
background: url(../img/about/bg3.png) no-repeat
background-size: cover
height: $img-height + 300
top: 1250px
top: 2050px

&#img-4
background: url(../img/about/bg4.png) no-repeat
background-size: cover
height: $img-height + 400
top: 2500px
top: 3200px

div.section
background-color: white
border: 1px solid $baseColor2
margin-bottom: 200px
margin-top: 300px
padding-bottom: 50px
padding-bottom: 80px
padding-top: 20px
overflow: hidden

&#top
margin-top: 0px

iframe#vimeo
border: 1px solid $baseColor3
margin-top: 40px

div.centered
font-size: 110%
line-height: 150%


+ 63
- 60
templates/about.html View File

@@ -8,7 +8,6 @@
{{ assets.tag("lib/jquery.min.js") }}
{{ assets.tag("main.css") }}
{{ assets.tag("about.css") }}
{{ assets.tag("about.js") }}
= endblock

= block after_body
@@ -18,70 +17,74 @@
<div id="img-4" class="bg" speed="1.4"></div>

<div id="top" class="section">
<div class="centered">
<h1><span>&raquo;</span> What</h1>
<span id="title">bitshift</span> is an <a href="https://github.com/earwig/bitshift">open-source</a>
online source-code search engine, developed by programmers, for programmers. The engine currently aggregates
publicly-available code from two online frameworks &#8211; <a href="https://github.com/">GitHub</a> and <a
href="https://bitbucket.org/">Bitbucket</a> &#8211; but has the necessary infrastructure to quickly incorporate
others, like <a href="http://stackoverflow.com/">StackOverflow</a> and
<a href="https://gitorious.org/">Gitorious</a>. <span id="title">bitshift</span> supports a robust query
language, which allows users to search for specific languages, files, dates of creation and last modifcation,
and symbols (function, class, and variable names), amongst other attributes.
</div>
<div class="centered">
<h1><span>&raquo;</span> What</h1>
<span id="title">bitshift</span> is an <a href="https://github.com/earwig/bitshift">open-source</a>
online source-code search engine, developed by programmers, for programmers. The engine currently aggregates
publicly-available code from two online frameworks &#8211; <a href="https://github.com/">GitHub</a> and <a
href="https://bitbucket.org/">Bitbucket</a> &#8211; but has the necessary infrastructure to quickly incorporate
others, like <a href="http://stackoverflow.com/">StackOverflow</a> and
<a href="https://gitorious.org/">Gitorious</a>. <span id="title">bitshift</span> supports a robust query
language, which allows users to search for specific languages, files, dates of creation and last modifcation,
and symbols (function, class, and variable names), amongst other attributes.

Watch our introductory video:
<iframe id="vimeo" src="//player.vimeo.com/video/98697078" width="317" height="180" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>

<div class="section">
<div id="how" class="centered">
<h1><span>&raquo;</span> How</h1>
<span id="title">bitshift</span> has an extensive back-end, roughly divided into three sections:
<ul>
<li><span>indexer</span> : finds and downloads code from online frameworks</li>
<li><span>parser</span> : parses newly crawled code, identifying its symbols</li>
<li><span>database</span> : interprets and compiles user searches into database queries</li>
</ul>

The engine was developed over the span of four months, and is primarily implemented in <b>Python</b>, but has
parsers in <b>Ruby</b>, <b>Java</b>, and a number of other languages.
</div>
<div id="how" class="centered">
<h1><span>&raquo;</span> How</h1>
<span id="title">bitshift</span> has an extensive back-end, roughly divided into three sections:
<ul>
<li><span>indexer</span> : finds and downloads code from online frameworks</li>
<li><span>parser</span> : parses newly crawled code, identifying its symbols</li>
<li><span>database</span> : interprets and compiles user searches into database queries</li>
</ul>
The engine was developed over the span of four months, and is primarily implemented in <b>Python</b>, but has
parsers in <b>Ruby</b>, <b>Java</b>, and a number of other languages.
</div>
</div>

<div class="section">
<div class="centered">
<h1><span>&raquo;</span> Who</h1>
<span id="title">bitshift</span> was developed by three seniors from New York City's Stuyvesant High School.

<div id="top" class="person">
<div class="photo">
<a href="https://github.com/breuckelen"><img src="img/about/bio1.jpg" alt="Benjamin Attal's photo."></a>
</div
><div class="bio">
<a href="https://github.com/breuckelen"><h1>Benjamin Attal</a></h1>
Benjamin Attal hacked together <span id="title">bitshift</span>'s parsers and is working on data-visualization
for bitshift's statistics page. He is a software developer and entrepreneur who enjoys listening to and playing
country music, as well as working with smart people.
</div>
</div>
<div class="person">
<div class="photo">
<a href="https://github.com/earwig"><img src="img/about/bio2.jpg" alt="Ben Kurtovic's photo."></a>
</div
><div class="bio">
<h1><a href="https://github.com/earwig">Ben Kurtovic</a></h1>
Ben Kurtovic designed <span id="title">bitshift</span>’s database and acts as its server admin. In his free time,
he edits Wikipedia and invents new ways of confusing the hell out of people through source code obfuscation.
</div>
</div>
<div class="person">
<div class="photo">
<a href="https://github.com/sevko"><img src="img/about/bio3.jpg" alt="Severyn Kozak's photo."></a>
</div
><div class="bio">
<h1><a href="https://github.com/sevko">Severyn Kozak</a></h1>
Severyn developed <span id="title">bitshift</span>'s crawlers and its front-end. He loves skiing, mathematics
that he doesn't understand, and the art of good software development.
</div>
</div>
</div>
<div class="centered">
<h1><span>&raquo;</span> Who</h1>
<span id="title">bitshift</span> was developed by three seniors from New York City's Stuyvesant High School.
<div id="top" class="person">
<div class="photo">
<a href="https://github.com/breuckelen"><img src="img/about/bio1.jpg" alt="Benjamin Attal's photo."></a>
</div>
<div class="bio">
<h1><a href="https://github.com/breuckelen">Benjamin Attal</a></h1>
Benjamin Attal hacked together <span id="title">bitshift</span>'s parsers and is working on
data-visualization for bitshift's statistics page. He is a software developer and entrepreneur who enjoys
listening to and playing country music, as well as working with smart people.
</div>
</div>
<div class="person">
<div class="photo">
<a href="https://github.com/earwig"><img src="img/about/bio2.jpg" alt="Benjamin Kurtovic's photo."></a>
</div>
<div class="bio">
<h1><a href="https://github.com/earwig">Benjamin Kurtovic</a></h1> Ben Kurtovic designed <span
id="title">bitshift</span>’s database and acts as its server admin. In his free time, he edits Wikipedia
and invents new ways of confusing the hell out of people through source code obfuscation.
</div>
</div>
<div class="person">
<div class="photo">
<a href="https://github.com/sevko"><img src="img/about/bio3.jpg" alt="Severyn Kozak's photo."></a>
</div>
<div class="bio">
<h1><a href="https://github.com/sevko">Severyn Kozak</a></h1>
Severyn developed <span id="title">bitshift</span>'s crawlers and its front-end. He loves skiing, mathematics
that he doesn't understand, and the art of good software development.
</div>
</div>
</div>
</div>

{{ assets.tag("about.js") }}
= endblock

Loading…
Cancel
Save