From 54cbd29e4208d062ab621c869ad1447c9da6786b Mon Sep 17 00:00:00 2001 From: Severyn Kozak Date: Tue, 24 Jun 2014 14:09:45 -0400 Subject: [PATCH] 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. --- static/js/about.js | 31 +++++++++++++ static/sass/about.sass | 12 +++-- templates/about.html | 123 +++++++++++++++++++++++++------------------------ 3 files changed, 102 insertions(+), 64 deletions(-) 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: -
    -
  • indexer : finds and downloads code from online frameworks
    • -
  • parser : parses newly crawled code, identifying its symbols
    • -
  • database : interprets and compiles user searches into database queries
    • -
- - 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: +
    +
  • indexer : finds and downloads code from online frameworks
    • +
  • parser : parses newly crawled code, identifying its symbols
    • +
  • database : interprets and compiles user searches into database queries
    • +
+ 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