diff --git a/static/js/about.js b/static/js/about.js index 78c9ccf..4540369 100644 --- a/static/js/about.js +++ b/static/js/about.js @@ -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); +}()); diff --git a/static/sass/about.sass b/static/sass/about.sass index 1d93dca..8dbb670 100644 --- a/static/sass/about.sass +++ b/static/sass/about.sass @@ -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% diff --git a/templates/about.html b/templates/about.html index 426be57..44683b7 100644 --- a/templates/about.html +++ b/templates/about.html @@ -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 @@
-
-

» What

- bitshift is an open-source - online source-code search engine, developed by programmers, for programmers. The engine currently aggregates - publicly-available code from two online frameworks – GitHub and Bitbucket – but has the necessary infrastructure to quickly incorporate - others, like StackOverflow and - Gitorious. bitshift 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. -
+
+

» What

+ bitshift is an open-source + online source-code search engine, developed by programmers, for programmers. The engine currently aggregates + publicly-available code from two online frameworks – GitHub and Bitbucket – but has the necessary infrastructure to quickly incorporate + others, like StackOverflow and + Gitorious. bitshift 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: + +
-
-

» How

- bitshift has an extensive back-end, roughly divided into three sections: - - - The engine was developed over the span of four months, and is primarily implemented in Python, but has - parsers in Ruby, Java, and a number of other languages. -
+
+

» How

+ bitshift has an extensive back-end, roughly divided into three sections: + + The engine was developed over the span of four months, and is primarily implemented in Python, but has + parsers in Ruby, Java, and a number of other languages. +
-
-

» Who

- bitshift was developed by three seniors from New York City's Stuyvesant High School. - -
-
- Benjamin Attal's photo. -
-

Benjamin Attal

- Benjamin Attal hacked together bitshift'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. -
-
-
-
- Ben Kurtovic's photo. -
-

Ben Kurtovic

- Ben Kurtovic designed bitshift’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. -
-
-
-
- Severyn Kozak's photo. -
-

Severyn Kozak

- Severyn developed bitshift's crawlers and its front-end. He loves skiing, mathematics - that he doesn't understand, and the art of good software development. -
-
-
+
+

» Who

+ bitshift was developed by three seniors from New York City's Stuyvesant High School. +
+
+ Benjamin Attal's photo. +
+
+

Benjamin Attal

+ Benjamin Attal hacked together bitshift'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. +
+
+
+
+ Benjamin Kurtovic's photo. +
+
+

Benjamin Kurtovic

Ben Kurtovic designed bitshift’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. +
+
+
+
+ Severyn Kozak's photo. +
+
+

Severyn Kozak

+ Severyn developed bitshift's crawlers and its front-end. He loves skiing, mathematics + that he doesn't understand, and the art of good software development. +
+
+
+ + {{ assets.tag("about.js") }} = endblock