Skip to content
Browse files

fluid, some css, flexslider

  • Loading branch information...
1 parent 0cc845c commit 3831cb1549316be1eb51921b6c9198f0e93f363f @eknuth eknuth committed
View
16 _includes/themes/twitter/default.html
@@ -14,8 +14,10 @@
<!-- Le styles -->
<link href="{{ ASSET_PATH }}/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="{{ ASSET_PATH }}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
- <link href="{{ ASSET_PATH }}/css/font-awesome.css" rel="stylesheet" type="text/css" media="all">
+ <link href="assets/css/flexslider.css" rel="stylesheet" type="text/css" media="all">
<link href="{{ ASSET_PATH }}/css/style.css?body=1" rel="stylesheet" type="text/css" media="all">
+ <script src="assets/bootstrap/js/jquery.js"></script>
+ <script src="assets/js/jquery.flexslider.js"></script>
<!-- Le fav and touch icons -->
<!-- Update these with your own images
@@ -27,13 +29,12 @@
</head>
<body>
- <div class="container">
-
+ <div class="container-fluid">
<div class="content">
{{ content }}
</div>
<footer>
- <div class="row">
+ <div class="row-fluid">
<div class="span3">
<a href="http://www.ecotrust.org"><img class="ecotrust-logo" src="assets/img/ecotrust_logo08.png"/></a>
<ul class="unstyled">
@@ -59,8 +60,8 @@
</div>
<div class="span3">
<h3>Developer Community</h3>
- <div class="row">
- <div class="span2">
+ <div class="row-fluid">
+ <div class="span6">
<ul class="unstyled">
<li><a href="#">github</a></li>
<li><a href="#">download</a></li>
@@ -68,7 +69,7 @@
<li><a href="#">issue tracker</a></li>
</ul>
</div>
- <div class="span1">
+ <div class="span6">
<ul class="unstyled">
<li><a href="#">wiki</a></li>
<li><a href="#">road map</a></li>
@@ -82,6 +83,7 @@
{% include JB/analytics %}
</body>
</html>
+
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
View
19 _includes/themes/twitter/page.html
@@ -1,17 +1,20 @@
-<div class="row">
- <div class="span7">
+<div class="row-fluid logo-bar">
+ <div class="span2">
<img class="madrona-logo" src="assets/img/madrona-logo.png"/>
</div>
- <div class="span5 navbar">
+ <div class="span10 navbar">
+ <img class="ecotrust-logo" src="assets/img/ecotrust_logo08.png"/>
<div class="pull-right">
- <button class="btn btn-large">install</button>
- <button class="btn btn-large">case studies</button>
- <button class="btn btn-large">services</button>
- <button class="btn btn-large">help</button>
+ <div class="primary-nav">
+ <button class="btn btn-large">install</button>
+ <button class="btn btn-large">case studies</button>
+ <button class="btn btn-large">services</button>
+ <button class="btn btn-large">help</button>
+ </div>
</div>
</div>
</div>
-<div class="row">
+<div class="row-fluid">
<div class="span12">
{{ content }}
View
64 assets/css/flexslider.css
@@ -0,0 +1,64 @@
+/*
+ * jQuery FlexSlider v1.8
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+/* Browser Resets */
+.flex-container a:active,
+.flexslider a:active,
+.flex-container a:focus,
+.flexslider a:focus {outline: none;}
+.slides,
+.flex-control-nav,
+.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
+
+/* FlexSlider Necessary Styles
+*********************************/
+.flexslider {margin: 0; padding: 0;}
+.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
+.flexslider .slides img {max-width: 100%; display: block;}
+.flex-pauseplay span {text-transform: capitalize;}
+
+/* Clearfix for the .slides element */
+.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
+html[xmlns] .slides {display: block;}
+* html .slides {height: 1%;}
+
+/* No JavaScript Fallback */
+/* If you are not using another script, such as Modernizr, make sure you
+ * include js that eliminates this class on page load */
+.no-js .slides > li:first-child {display: block;}
+
+
+/* FlexSlider Default Theme
+*********************************/
+.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
+.flexslider .slides {zoom: 1;}
+.flexslider .slides > li {position: relative;}
+/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
+.flex-container {zoom: 1; position: relative;}
+
+/* Caption style */
+/* IE rgba() hack */
+.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
+filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
+.flex-caption {width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
+
+/* Direction Nav */
+.flex-direction-nav { height: 0; }
+.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
+.flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
+.flex-direction-nav li .prev {left: -20px;}
+.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
+
+/* Control Nav */
+.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
+.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
+.flex-control-nav li:first-child {margin: 0;}
+.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}
+.flex-control-nav li a:hover {background-position: 0 -13px;}
+.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
View
BIN assets/css/theme/bg_control_nav.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN assets/css/theme/bg_direction_nav.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
563 assets/js/jquery.flexslider.js
@@ -0,0 +1,563 @@
+/*
+ * jQuery FlexSlider v1.8
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Contributing Author: Tyler Smith
+ */
+
+;(function ($) {
+
+ //FlexSlider: Object Instance
+ $.flexslider = function(el, options) {
+ var slider = $(el);
+
+ // slider DOM reference for use outside of the plugin
+ $.data(el, "flexslider", slider);
+
+ slider.init = function() {
+ slider.vars = $.extend({}, $.flexslider.defaults, options);
+ $.data(el, 'flexsliderInit', true);
+ slider.container = $('.slides', slider).first();
+ slider.slides = $('.slides:first > li', slider);
+ slider.count = slider.slides.length;
+ slider.animating = false;
+ slider.currentSlide = slider.vars.slideToStart;
+ slider.animatingTo = slider.currentSlide;
+ slider.atEnd = (slider.currentSlide == 0) ? true : false;
+ slider.eventType = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
+ slider.cloneCount = 0;
+ slider.cloneOffset = 0;
+ slider.manualPause = false;
+ slider.vertical = (slider.vars.slideDirection == "vertical");
+ slider.prop = (slider.vertical) ? "top" : "marginLeft";
+ slider.args = {};
+
+ //Test for webbkit CSS3 Animations
+ slider.transitions = "webkitTransition" in document.body.style;
+ if (slider.transitions) slider.prop = "-webkit-transform";
+
+ //Test for controlsContainer
+ if (slider.vars.controlsContainer != "") {
+ slider.controlsContainer = $(slider.vars.controlsContainer).eq($('.slides').index(slider.container));
+ slider.containerExists = slider.controlsContainer.length > 0;
+ }
+ //Test for manualControls
+ if (slider.vars.manualControls != "") {
+ slider.manualControls = $(slider.vars.manualControls, ((slider.containerExists) ? slider.controlsContainer : slider));
+ slider.manualExists = slider.manualControls.length > 0;
+ }
+
+ ///////////////////////////////////////////////////////////////////
+ // FlexSlider: Randomize Slides
+ if (slider.vars.randomize) {
+ slider.slides.sort(function() { return (Math.round(Math.random())-0.5); });
+ slider.container.empty().append(slider.slides);
+ }
+ ///////////////////////////////////////////////////////////////////
+
+ ///////////////////////////////////////////////////////////////////
+ // FlexSlider: Slider Animation Initialize
+ if (slider.vars.animation.toLowerCase() == "slide") {
+ if (slider.transitions) {
+ slider.setTransition(0);
+ }
+ slider.css({"overflow": "hidden"});
+ if (slider.vars.animationLoop) {
+ slider.cloneCount = 2;
+ slider.cloneOffset = 1;
+ slider.container.append(slider.slides.filter(':first').clone().addClass('clone')).prepend(slider.slides.filter(':last').clone().addClass('clone'));
+ }
+ //create newSlides to capture possible clones
+ slider.newSlides = $('.slides:first > li', slider);
+ var sliderOffset = (-1 * (slider.currentSlide + slider.cloneOffset));
+ if (slider.vertical) {
+ slider.newSlides.css({"display": "block", "width": "100%", "float": "left"});
+ slider.container.height((slider.count + slider.cloneCount) * 200 + "%").css("position", "absolute").width("100%");
+ //Timeout function to give browser enough time to get proper height initially
+ setTimeout(function() {
+ slider.css({"position": "relative"}).height(slider.slides.filter(':first').height());
+ slider.args[slider.prop] = (slider.transitions) ? "translate3d(0," + sliderOffset * slider.height() + "px,0)" : sliderOffset * slider.height() + "px";
+ slider.container.css(slider.args);
+ }, 100);
+
+ } else {
+ slider.args[slider.prop] = (slider.transitions) ? "translate3d(" + sliderOffset * slider.width() + "px,0,0)" : sliderOffset * slider.width() + "px";
+ slider.container.width((slider.count + slider.cloneCount) * 200 + "%").css(slider.args);
+ //Timeout function to give browser enough time to get proper width initially
+ setTimeout(function() {
+ slider.newSlides.width(slider.width()).css({"float": "left", "display": "block"});
+ }, 100);
+ }
+
+ } else { //Default to fade
+ //Not supporting fade CSS3 transitions right now
+ slider.transitions = false;
+ slider.slides.css({"width": "100%", "float": "left", "marginRight": "-100%"}).eq(slider.currentSlide).fadeIn(slider.vars.animationDuration);
+ }
+ ///////////////////////////////////////////////////////////////////
+
+ ///////////////////////////////////////////////////////////////////
+ // FlexSlider: Control Nav
+ if (slider.vars.controlNav) {
+ if (slider.manualExists) {
+ slider.controlNav = slider.manualControls;
+ } else {
+ var controlNavScaffold = $('<ol class="flex-control-nav"></ol>');
+ var j = 1;
+ for (var i = 0; i < slider.count; i++) {
+ controlNavScaffold.append('<li><a>' + j + '</a></li>');
+ j++;
+ }
+
+ if (slider.containerExists) {
+ $(slider.controlsContainer).append(controlNavScaffold);
+ slider.controlNav = $('.flex-control-nav li a', slider.controlsContainer);
+ } else {
+ slider.append(controlNavScaffold);
+ slider.controlNav = $('.flex-control-nav li a', slider);
+ }
+ }
+
+ slider.controlNav.eq(slider.currentSlide).addClass('active');
+
+ slider.controlNav.bind(slider.eventType, function(event) {
+ event.preventDefault();
+ if (!$(this).hasClass('active')) {
+ (slider.controlNav.index($(this)) > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
+ slider.flexAnimate(slider.controlNav.index($(this)), slider.vars.pauseOnAction);
+ }
+ });
+ }
+ ///////////////////////////////////////////////////////////////////
+
+ //////////////////////////////////////////////////////////////////
+ //FlexSlider: Direction Nav
+ if (slider.vars.directionNav) {
+ var directionNavScaffold = $('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + slider.vars.prevText + '</a></li><li><a class="next" href="#">' + slider.vars.nextText + '</a></li></ul>');
+
+ if (slider.containerExists) {
+ $(slider.controlsContainer).append(directionNavScaffold);
+ slider.directionNav = $('.flex-direction-nav li a', slider.controlsContainer);
+ } else {
+ slider.append(directionNavScaffold);
+ slider.directionNav = $('.flex-direction-nav li a', slider);
+ }
+
+ //Set initial disable styles if necessary
+ if (!slider.vars.animationLoop) {
+ if (slider.currentSlide == 0) {
+ slider.directionNav.filter('.prev').addClass('disabled');
+ } else if (slider.currentSlide == slider.count - 1) {
+ slider.directionNav.filter('.next').addClass('disabled');
+ }
+ }
+
+ slider.directionNav.bind(slider.eventType, function(event) {
+ event.preventDefault();
+ var target = ($(this).hasClass('next')) ? slider.getTarget('next') : slider.getTarget('prev');
+
+ if (slider.canAdvance(target)) {
+ slider.flexAnimate(target, slider.vars.pauseOnAction);
+ }
+ });
+ }
+ //////////////////////////////////////////////////////////////////
+
+ //////////////////////////////////////////////////////////////////
+ //FlexSlider: Keyboard Nav
+ if (slider.vars.keyboardNav && $('ul.slides').length == 1) {
+ function keyboardMove(event) {
+ if (slider.animating) {
+ return;
+ } else if (event.keyCode != 39 && event.keyCode != 37){
+ return;
+ } else {
+ if (event.keyCode == 39) {
+ var target = slider.getTarget('next');
+ } else if (event.keyCode == 37){
+ var target = slider.getTarget('prev');
+ }
+
+ if (slider.canAdvance(target)) {
+ slider.flexAnimate(target, slider.vars.pauseOnAction);
+ }
+ }
+ }
+ $(document).bind('keyup', keyboardMove);
+ }
+ //////////////////////////////////////////////////////////////////
+
+ ///////////////////////////////////////////////////////////////////
+ // FlexSlider: Mousewheel interaction
+ if (slider.vars.mousewheel) {
+ slider.mousewheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
+ slider.bind(slider.mousewheelEvent, function(e) {
+ e.preventDefault();
+ e = e ? e : window.event;
+ var wheelData = e.detail ? e.detail * -1 : e.originalEvent.wheelDelta / 40,
+ target = (wheelData < 0) ? slider.getTarget('next') : slider.getTarget('prev');
+
+ if (slider.canAdvance(target)) {
+ slider.flexAnimate(target, slider.vars.pauseOnAction);
+ }
+ });
+ }
+ ///////////////////////////////////////////////////////////////////
+
+ //////////////////////////////////////////////////////////////////
+ //FlexSlider: Slideshow Setup
+ if (slider.vars.slideshow) {
+ //pauseOnHover
+ if (slider.vars.pauseOnHover && slider.vars.slideshow) {
+ slider.hover(function() {
+ slider.pause();
+ }, function() {
+ if (!slider.manualPause) {
+ slider.resume();
+ }
+ });
+ }
+
+ //Initialize animation
+ slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
+ }
+ //////////////////////////////////////////////////////////////////
+
+ //////////////////////////////////////////////////////////////////
+ //FlexSlider: Pause/Play
+ if (slider.vars.pausePlay) {
+ var pausePlayScaffold = $('<div class="flex-pauseplay"><span></span></div>');
+
+ if (slider.containerExists) {
+ slider.controlsContainer.append(pausePlayScaffold);
+ slider.pausePlay = $('.flex-pauseplay span', slider.controlsContainer);
+ } else {
+ slider.append(pausePlayScaffold);
+ slider.pausePlay = $('.flex-pauseplay span', slider);
+ }
+
+ var pausePlayState = (slider.vars.slideshow) ? 'pause' : 'play';
+ slider.pausePlay.addClass(pausePlayState).text((pausePlayState == 'pause') ? slider.vars.pauseText : slider.vars.playText);
+
+ slider.pausePlay.bind(slider.eventType, function(event) {
+ event.preventDefault();
+ if ($(this).hasClass('pause')) {
+ slider.pause();
+ slider.manualPause = true;
+ } else {
+ slider.resume();
+ slider.manualPause = false;
+ }
+ });
+ }
+ //////////////////////////////////////////////////////////////////
+
+ //////////////////////////////////////////////////////////////////
+ //FlexSlider:Touch Swip Gestures
+ //Some brilliant concepts adapted from the following sources
+ //Source: TouchSwipe - http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
+ //Source: SwipeJS - http://swipejs.com
+ if ('ontouchstart' in document.documentElement) {
+ //For brevity, variables are named for x-axis scrolling
+ //The variables are then swapped if vertical sliding is applied
+ //This reduces redundant code...I think :)
+ //If debugging, recognize variables are named for horizontal scrolling
+ var startX,
+ startY,
+ offset,
+ cwidth,
+ dx,
+ startT,
+ scrolling = false;
+
+ slider.each(function() {
+ if ('ontouchstart' in document.documentElement) {
+ this.addEventListener('touchstart', onTouchStart, false);
+ }
+ });
+
+ function onTouchStart(e) {
+ if (slider.animating) {
+ e.preventDefault();
+ } else if (e.touches.length == 1) {
+ slider.pause();
+ cwidth = (slider.vertical) ? slider.height() : slider.width();
+ startT = Number(new Date());
+ offset = (slider.vertical) ? (slider.currentSlide + slider.cloneOffset) * slider.height() : (slider.currentSlide + slider.cloneOffset) * slider.width();
+ startX = (slider.vertical) ? e.touches[0].pageY : e.touches[0].pageX;
+ startY = (slider.vertical) ? e.touches[0].pageX : e.touches[0].pageY;
+ slider.setTransition(0);
+
+ this.addEventListener('touchmove', onTouchMove, false);
+ this.addEventListener('touchend', onTouchEnd, false);
+ }
+ }
+
+ function onTouchMove(e) {
+ dx = (slider.vertical) ? startX - e.touches[0].pageY : startX - e.touches[0].pageX;
+ scrolling = (slider.vertical) ? (Math.abs(dx) < Math.abs(e.touches[0].pageX - startY)) : (Math.abs(dx) < Math.abs(e.touches[0].pageY - startY));
+
+ if (!scrolling) {
+ e.preventDefault();
+ if (slider.vars.animation == "slide" && slider.transitions) {
+ if (!slider.vars.animationLoop) {
+ dx = dx/((slider.currentSlide == 0 && dx < 0 || slider.currentSlide == slider.count - 1 && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
+ }
+ slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + (-offset - dx) + "px,0)": "translate3d(" + (-offset - dx) + "px,0,0)";
+ slider.container.css(slider.args);
+ }
+ }
+ }
+
+ function onTouchEnd(e) {
+ slider.animating = false;
+ if (slider.animatingTo == slider.currentSlide && !scrolling && !(dx == null)) {
+ var target = (dx > 0) ? slider.getTarget('next') : slider.getTarget('prev');
+ if (slider.canAdvance(target) && Number(new Date()) - startT < 550 && Math.abs(dx) > 20 || Math.abs(dx) > cwidth/2) {
+ slider.flexAnimate(target, slider.vars.pauseOnAction);
+ } else {
+ slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction);
+ }
+ }
+
+ //Finish the touch by undoing the touch session
+ this.removeEventListener('touchmove', onTouchMove, false);
+ this.removeEventListener('touchend', onTouchEnd, false);
+ startX = null;
+ startY = null;
+ dx = null;
+ offset = null;
+ }
+ }
+ //////////////////////////////////////////////////////////////////
+
+ //////////////////////////////////////////////////////////////////
+ //FlexSlider: Resize Functions (If necessary)
+ if (slider.vars.animation.toLowerCase() == "slide") {
+ $(window).resize(function(){
+ if (!slider.animating && slider.is(":visible")) {
+ if (slider.vertical) {
+ slider.height(slider.slides.filter(':first').height());
+ slider.args[slider.prop] = (-1 * (slider.currentSlide + slider.cloneOffset))* slider.slides.filter(':first').height() + "px";
+ if (slider.transitions) {
+ slider.setTransition(0);
+ slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
+ }
+ slider.container.css(slider.args);
+ } else {
+ slider.newSlides.width(slider.width());
+ slider.args[slider.prop] = (-1 * (slider.currentSlide + slider.cloneOffset))* slider.width() + "px";
+ if (slider.transitions) {
+ slider.setTransition(0);
+ slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
+ }
+ slider.container.css(slider.args);
+ }
+ }
+ });
+ }
+ //////////////////////////////////////////////////////////////////
+
+ //FlexSlider: start() Callback
+ slider.vars.start(slider);
+ }
+
+ //FlexSlider: Animation Actions
+ slider.flexAnimate = function(target, pause) {
+ if (!slider.animating && slider.is(":visible")) {
+ //Animating flag
+ slider.animating = true;
+
+ //FlexSlider: before() animation Callback
+ slider.animatingTo = target;
+ slider.vars.before(slider);
+
+ //Optional paramter to pause slider when making an anmiation call
+ if (pause) {
+ slider.pause();
+ }
+
+ //Update controlNav
+ if (slider.vars.controlNav) {
+ slider.controlNav.removeClass('active').eq(target).addClass('active');
+ }
+
+ //Is the slider at either end
+ slider.atEnd = (target == 0 || target == slider.count - 1) ? true : false;
+ if (!slider.vars.animationLoop && slider.vars.directionNav) {
+ if (target == 0) {
+ slider.directionNav.removeClass('disabled').filter('.prev').addClass('disabled');
+ } else if (target == slider.count - 1) {
+ slider.directionNav.removeClass('disabled').filter('.next').addClass('disabled');
+ } else {
+ slider.directionNav.removeClass('disabled');
+ }
+ }
+
+ if (!slider.vars.animationLoop && target == slider.count - 1) {
+ slider.pause();
+ //FlexSlider: end() of cycle Callback
+ slider.vars.end(slider);
+ }
+
+ if (slider.vars.animation.toLowerCase() == "slide") {
+ var dimension = (slider.vertical) ? slider.slides.filter(':first').height() : slider.slides.filter(':first').width();
+
+ if (slider.currentSlide == 0 && target == slider.count - 1 && slider.vars.animationLoop && slider.direction != "next") {
+ slider.slideString = "0px";
+ } else if (slider.currentSlide == slider.count - 1 && target == 0 && slider.vars.animationLoop && slider.direction != "prev") {
+ slider.slideString = (-1 * (slider.count + 1)) * dimension + "px";
+ } else {
+ slider.slideString = (-1 * (target + slider.cloneOffset)) * dimension + "px";
+ }
+ slider.args[slider.prop] = slider.slideString;
+
+ if (slider.transitions) {
+ slider.setTransition(slider.vars.animationDuration);
+ slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.slideString + ",0)" : "translate3d(" + slider.slideString + ",0,0)";
+ slider.container.css(slider.args).one("webkitTransitionEnd transitionend", function(){
+ slider.wrapup(dimension);
+ });
+ } else {
+ slider.container.animate(slider.args, slider.vars.animationDuration, function(){
+ slider.wrapup(dimension);
+ });
+ }
+ } else { //Default to Fade
+ slider.slides.eq(slider.currentSlide).fadeOut(slider.vars.animationDuration);
+ slider.slides.eq(target).fadeIn(slider.vars.animationDuration, function() {
+ slider.wrapup();
+ });
+ }
+ }
+ }
+
+ //FlexSlider: Function to minify redundant animation actions
+ slider.wrapup = function(dimension) {
+ if (slider.vars.animation == "slide") {
+ //Jump the slider if necessary
+ if (slider.currentSlide == 0 && slider.animatingTo == slider.count - 1 && slider.vars.animationLoop) {
+ slider.args[slider.prop] = (-1 * slider.count) * dimension + "px";
+ if (slider.transitions) {
+ slider.setTransition(0);
+ slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
+ }
+ slider.container.css(slider.args);
+ } else if (slider.currentSlide == slider.count - 1 && slider.animatingTo == 0 && slider.vars.animationLoop) {
+ slider.args[slider.prop] = -1 * dimension + "px";
+ if (slider.transitions) {
+ slider.setTransition(0);
+ slider.args[slider.prop] = (slider.vertical) ? "translate3d(0," + slider.args[slider.prop] + ",0)" : "translate3d(" + slider.args[slider.prop] + ",0,0)";
+ }
+ slider.container.css(slider.args);
+ }
+ }
+ slider.animating = false;
+ slider.currentSlide = slider.animatingTo;
+ //FlexSlider: after() animation Callback
+ slider.vars.after(slider);
+ }
+
+ //FlexSlider: Automatic Slideshow
+ slider.animateSlides = function() {
+ if (!slider.animating) {
+ slider.flexAnimate(slider.getTarget("next"));
+ }
+ }
+
+ //FlexSlider: Automatic Slideshow Pause
+ slider.pause = function() {
+ clearInterval(slider.animatedSlides);
+ if (slider.vars.pausePlay) {
+ slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
+ }
+ }
+
+ //FlexSlider: Automatic Slideshow Start/Resume
+ slider.resume = function() {
+ slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
+ if (slider.vars.pausePlay) {
+ slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
+ }
+ }
+
+ //FlexSlider: Helper function for non-looping sliders
+ slider.canAdvance = function(target) {
+ if (!slider.vars.animationLoop && slider.atEnd) {
+ if (slider.currentSlide == 0 && target == slider.count - 1 && slider.direction != "next") {
+ return false;
+ } else if (slider.currentSlide == slider.count - 1 && target == 0 && slider.direction == "next") {
+ return false;
+ } else {
+ return true;
+ }
+ } else {
+ return true;
+ }
+ }
+
+ //FlexSlider: Helper function to determine animation target
+ slider.getTarget = function(dir) {
+ slider.direction = dir;
+ if (dir == "next") {
+ return (slider.currentSlide == slider.count - 1) ? 0 : slider.currentSlide + 1;
+ } else {
+ return (slider.currentSlide == 0) ? slider.count - 1 : slider.currentSlide - 1;
+ }
+ }
+
+ //FlexSlider: Helper function to set CSS3 transitions
+ slider.setTransition = function(dur) {
+ slider.container.css({'-webkit-transition-duration': (dur/1000) + "s"});
+ }
+
+ //FlexSlider: Initialize
+ slider.init();
+ }
+
+ //FlexSlider: Default Settings
+ $.flexslider.defaults = {
+ animation: "fade", //String: Select your animation type, "fade" or "slide"
+ slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
+ slideshow: true, //Boolean: Animate slider automatically
+ slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
+ animationDuration: 600, //Integer: Set the speed of animations, in milliseconds
+ directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
+ controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
+ keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys
+ mousewheel: false, //Boolean: Allow slider navigating via mousewheel
+ prevText: "Previous", //String: Set the text for the "previous" directionNav item
+ nextText: "Next", //String: Set the text for the "next" directionNav item
+ pausePlay: false, //Boolean: Create pause/play dynamic element
+ pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
+ playText: 'Play', //String: Set the text for the "play" pausePlay item
+ randomize: false, //Boolean: Randomize slide order
+ slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
+ animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
+ pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
+ pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
+ controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
+ manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
+ start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
+ before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
+ after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
+ end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
+ }
+
+ //FlexSlider: Plugin Function
+ $.fn.flexslider = function(options) {
+ return this.each(function() {
+ if ($(this).find('.slides > li').length == 1) {
+ $(this).find('.slides > li').fadeIn(400);
+ }
+ else if ($(this).data('flexsliderInit') != true) {
+ new $.flexslider(this, options);
+ }
+ });
+ }
+
+})(jQuery);
View
34 assets/themes/twitter/css/style.css
@@ -45,10 +45,16 @@ html, body {
.madrona-quote {
padding-bottom: 5px;
- font-size: 28px;
+ text-align: center;
+ font-size: 26px;
line-height: 1;
}
+.madrona-logo {
+ margin-top: 20px;
+ margin-left: 20px;
+}
+
.ecotrust-logo {
margin-top: -10px;
margin-left: -10px;
@@ -58,10 +64,30 @@ html, body {
padding-left: 8px;
}
-.madrona-logo {
- padding-top: -10px;
- padding-left: -10px;
+.logo-bar {
+ padding-bottom: 15px;
+}
+
+.navbar .ecotrust-logo {
+ position: absolute;
+ top: 25px;
+ right: 30px;
}
+
+.primary-nav {
+ margin-right: 80px;
+ margin-top: 50px;
+}
+
+.navbar .primary-nav button {
+ margin-left: 20px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 15px;
+ padding-right: 15px;
+ font-size: 24px;
+}
+
/* tag_box ======================================================== */
.tag_box {
View
66 index.md
@@ -4,51 +4,43 @@ title: madrona spatial planning framework
tagline: create. analyze. decide.
---
{% include JB/setup %}
-<div class="row">
- <div class="span6 left-side-text">
+<div class="row-fluid">
+ <div class="span6">
<p class="madrona-quote">
- Madrona is a framework for building decision support and spatial planning tools at any scale.
- </p>
- <h1>Overview</h1>
- <p>
- Portland nihil aliqua, assumenda mumblecore magna sunt marfa leggings post-ironic forage selvage you probably haven't heard of them. Banksy fingerstache viral, fap lomo pop-up consectetur non leggings dolore. Sapiente tattooed officia quinoa vice mcsweeney's.
- </p>
- <h1>Technology</h1>
- <p>
- Veniam sriracha aesthetic, nihil nisi ad wes anderson echo park hoodie commodo. Reprehenderit sriracha single-origin coffee, high life mcsweeney's lo-fi swag godard ea do assumenda selvage chambray stumptown <a>whitepaper</a>.
+ A framework for building spatial planning tools at any scale.
</p>
</div>
<div class="span6">
<div class="well">
- <div id="myCarousel" class="carousel slide">
- <!-- Carousel items -->
- <div class="carousel-inner">
- <div class="active item">
- <img alt="" src="assets/img/fsp.png">
- <div class="carousel-caption">
- <h4>Forest Scenario Planner</h4>
- <p>Land owner tool built on madrona with two dimensional mapping support using openlayers.</p>
- </div>
- </div>
- <div class="item">
- <img alt="" src="assets/img/fsp.png">
- <div class="carousel-caption">
- <h4>Forest Scenario Planner 2</h4>
- <p>Land owner tool built on madrona with two dimensional mapping support using openlayers.</p>
- </div>
- </div>
+ <div class="flexslider">
+ <ul class="slides">
+ <li>
+ <img src="assets/img/fsp.png"/>
+ <!-- <h4>Forest Scenario Planner</h4>
+ <p>The Murdock Charitable Trust saw the need for a tool to help landowners manage their forest land and visualize alternative management scenarios.</p> -->
+ </li>
+ <li>
+ <img src="assets/img/fsp.png"/>
+ <!-- <h4>Forest Scenario Planner</h4>
+ <p>The Murdock Charitable Trust saw the need for a tool to help landowners manage their forest land and visualize alternative management scenarios.</p> -->
+ </li>
+ <li>
+ <img src="assets/img/fsp.png"/>
+ <!-- <h4>Forest Scenario Planner</h4>
+ <p>The Murdock Charitable Trust saw the need for a tool to help landowners manage their forest land and visualize alternative management scenarios.</p> -->
+ </li>
+ </ul>
</div>
- <!-- Carousel nav -->
- <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
- </div>
</div>
</div>
</div>
-<script src="assets/bootstrap/js/jquery.js"></script>
-<script src="assets/bootstrap/js/bootstrap-carousel.js"></script>
+
+
<script>
- $('.carousel').carousel({
- interval: 2000
- });
+ $(window).load(function() {
+ $('.flexslider').flexslider({
+ slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
+ pauseOnHover: false //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
+ });
+ });
</script>

0 comments on commit 3831cb1

Please sign in to comment.
Something went wrong with that request. Please try again.