Skip to content
Browse files

Add sticky footer and rebase func

  • Loading branch information...
1 parent d999141 commit b9f07c0e4013ad9e22457654a7bef4a90c8593b7 @thoas committed
Showing with 117 additions and 53 deletions.
  1. +33 −12 css/style.css
  2. +51 −28 js/script.js
  3. +33 −13 sass/style.scss
View
45 css/style.css
@@ -22,20 +22,34 @@
src: url('/css/fonts/lubalingraphstd-demioblique-webfont.eot?iefix') format('eot'), url('/css/fonts/lubalingraphstd-demioblique-webfont.woff') format('woff'), url('/css/fonts/lubalingraphstd-demioblique-webfont.otf') format('truetype'), url('/css/fonts/lubalingraphstd-demioblique-webfont.svg') format('svg');
}
+html, body {
+ height: 100%;
+}
+
#wrapper {
margin: 0 auto;
+ min-height: 100%;
+ position: relative;
width: 950px;
margin: 0 auto;
overflow: hidden;
*zoom: 1;
}
#wrapper > header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1000;
height: 100px;
-moz-box-shadow: 1px 1px 12px #dcd9d9;
-webkit-box-shadow: 1px 1px 12px #dcd9d9;
-o-box-shadow: 1px 1px 12px #dcd9d9;
box-shadow: 1px 1px 12px #dcd9d9;
margin-bottom: 70px;
+ background-color: #fff;
+ width: 950px;
+ margin: 0 auto;
}
#progress-bar {
@@ -46,7 +60,7 @@
#logo {
position: absolute;
- left: 590px;
+ left: 425px;
top: 30px;
}
@@ -260,8 +274,8 @@
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
- top: -7px;
- left: -28px;
+ top: -8px;
+ left: -29px;
}
#projects #projects-container ul li div.project .arrow-container.top-right {
-moz-transform: rotate(45deg);
@@ -278,8 +292,8 @@
-o-transform: rotate(135deg);
transform: rotate(135deg);
position: absolute;
- bottom: -7px;
- right: -28px;
+ bottom: -8px;
+ right: -29px;
}
#projects #projects-container ul li div.project .arrow-container.bottom-left {
-moz-transform: rotate(-135deg);
@@ -955,8 +969,8 @@ input.span-24, textarea.span-24, select.span-24 {
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
- top: -6px;
- left: -27px;
+ top: -8px;
+ left: -29px;
}
.slideshow .slideshow-container .slideshow-arrow.bottom-right {
-moz-transform: rotate(135deg);
@@ -964,8 +978,8 @@ input.span-24, textarea.span-24, select.span-24 {
-o-transform: rotate(135deg);
transform: rotate(135deg);
position: absolute;
- bottom: -6px;
- right: -26px;
+ bottom: -8px;
+ right: -29px;
}
.slideshow .slideshow-slides-container {
height: 325px;
@@ -1051,8 +1065,15 @@ input.span-24, textarea.span-24, select.span-24 {
text-align: justify;
}
-#footer {
- margin-top: 20px;
+#main {
+ padding-bottom: 180px;
+ padding-top: 180px;
}
-/*@include sticky-footer(54px, "#wrapper", "#main", "#footer")*/
+#footer {
+ height: 180px;
+ clear: both;
+ position: absolute;
+ bottom: 20px;
+ left: 0;
+}
View
79 js/script.js
@@ -127,6 +127,40 @@ $(document).ready(function() {
});
}
+ function rebase(identifier) {
+ var previous = $('#menu-item li a span.active');
+
+ if (previous.length) {
+ previous.removeClass('active');
+
+ var previousIdentifier = previous.attr('data-identifier');
+
+ n[previousIdentifier].sets.forEach(function(el) {
+ el.animate({
+ fill: n[previousIdentifier].color['default']
+ }, 500);
+ });
+ }
+
+ if (identifier !== undefined) {
+ var color = n[identifier].color.hover,
+ d = m[g](identifier),
+ d = d[p]('span')[0];
+
+ $(d).addClass('active');
+
+ _.each([identifier, 'cloud'], function(key) {
+ if (n[key] !== undefined && n[key].sets !== undefined) {
+ n[key].sets.forEach(function(el) {
+ el.animate({
+ fill: color
+ }, 500);
+ });
+ }
+ });
+ }
+ }
+
_.each(['on-paper', 'inspirations', 'multimedias', 'photography'], iconize);
var logo = m[g]('logo');
@@ -243,16 +277,16 @@ $(document).ready(function() {
});
views.ProjectFocus = Backbone.View.extend({
- initialize: function(project){
+ initialize: function(project) {
this.project = project;
},
- render: function(){
+ render: function() {
return _.template($('#project-focus-template').html(), {'project': this.project});
}
});
views.Slideshow = Backbone.View.extend({
- initialize: function(images){
+ initialize: function(images) {
this.images = images;
},
render: function(){
@@ -261,7 +295,7 @@ $(document).ready(function() {
});
views.InspirationsContainer = Backbone.View.extend({
- initialize: function(inspirations, categories){
+ initialize: function(inspirations, categories) {
this.inspirations = inspirations;
this.categories = categories;
},
@@ -274,7 +308,7 @@ $(document).ready(function() {
});
views.ImagesContainer = Backbone.View.extend({
- initialize: function(images){
+ initialize: function(images) {
this.images = images;
},
render: function(){
@@ -286,7 +320,7 @@ $(document).ready(function() {
views.Inspirations = Backbone.View.extend({
el: $('#main'),
- initialize: function(inspirations, images, categories){
+ initialize: function(inspirations, images, categories) {
this.images = images;
this.inspirations = inspirations;
this.categories = categories;
@@ -316,7 +350,7 @@ $(document).ready(function() {
views.Slider = Backbone.View.extend({
el: $('#footer'),
- initialize: function(projects, title, current){
+ initialize: function(projects, title, current) {
this.projects = projects;
this.title = title;
this.current = current;
@@ -354,17 +388,16 @@ $(document).ready(function() {
'category/:category/:project': 'projectDetail',
'': 'home',
'#': 'home',
+ 'home': 'home',
'about-me': 'about',
'inspirations': 'inspirations'
},
inspirations: function() {
getData(function(data) {
- $('#home').hide();
-
var links = new collections.Links(data.links);
- var inspirations = links.groupBy(function(link){
+ var inspirations = links.groupBy(function(link) {
return link.get('category');
});
@@ -374,6 +407,8 @@ $(document).ready(function() {
view.render();
$('#footer').html('');
+
+ rebase('inspirations');
});
},
@@ -384,11 +419,11 @@ $(document).ready(function() {
var projects = new collections.Projects(data.projects),
categories = new collections.Categories(data.categories);
- var category = categories.find(function(current){
+ var category = categories.find(function(current) {
return current.get('slug') == category_slug;
});
- var project = projects.find(function(current){
+ var project = projects.find(function(current) {
return current.get('slug') == project_slug && current.get('category') == category_slug;
});
@@ -410,20 +445,7 @@ $(document).ready(function() {
_.each(['cloud', 'arrow-left', 'arrow-right'], iconize);
- var slug = category.get('slug'),
- color = n[slug].color.hover,
- d = m[g](slug),
- d = d[p]('span')[0];
-
- $(d).addClass('active');
-
- _.each([slug, 'cloud'], function(key){
- n[key].sets.forEach(function(el) {
- el.animate({
- fill: color
- }, 500);
- });
- });
+ rebase(category.get('slug'));
},
categoryDetail: function(slug) {
@@ -434,7 +456,7 @@ $(document).ready(function() {
var projects = new collections.Projects(data.projects),
categories = new collections.Categories(data.categories);
- var category = categories.find(function(current){
+ var category = categories.find(function(current) {
return current.get('slug') == slug;
});
@@ -442,7 +464,6 @@ $(document).ready(function() {
_that._categoryDetail(category, selection, selection.first());
_that._projectDetail(selection.first());
-
});
},
@@ -465,6 +486,8 @@ $(document).ready(function() {
slider.render();
_.each(['cloud', 'arrow-left', 'arrow-right'], iconize);
+
+ rebase();
});
},
View
46 sass/style.scss
@@ -17,14 +17,28 @@
@include font-face("ITCLubalinGraphStdDemiOblique", font-files("lubalingraphstd-demioblique-webfont.woff", woff, "lubalingraphstd-demioblique-webfont.otf", truetype, "lubalingraphstd-demioblique-webfont.svg", svg), "lubalingraphstd-demioblique-webfont.eot");
+html, body{
+ height: 100%
+}
+
#wrapper {
margin: 0 auto;
+ min-height: 100%;
+ position: relative;
@include container;
> header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1000;
height: 100px;
@include box-shadow(1px 1px 12px #dcd9d9);
margin-bottom: 70px;
+ background-color: #fff;
+ width: 950px;
+ margin: 0 auto;
}
}
@@ -36,7 +50,7 @@
#logo {
position: absolute;
- left: 590px;
+ left: 425px;
top: 30px;
}
@@ -280,8 +294,8 @@
&.top-left {
@include rotate(-45deg);
position: absolute;
- top: -7px;
- left: -28px;
+ top: -8px;
+ left: -29px;
}
&.top-right {
@@ -294,8 +308,8 @@
&.bottom-right {
@include rotate(135deg);
position: absolute;
- bottom: -7px;
- right: -28px;
+ bottom: -8px;
+ right: -29px;
}
&.bottom-left {
@@ -404,15 +418,15 @@
&.top-left {
@include rotate(-45deg);
position: absolute;
- top: -6px;
- left: -27px;
+ top: -8px;
+ left: -29px;
}
&.bottom-right {
@include rotate(135deg);
position: absolute;
- bottom: -6px;
- right: -26px;
+ bottom: -8px;
+ right: -29px;
}
}
}
@@ -520,9 +534,15 @@
}
}
-#footer {
- margin-top: 20px;
+#main {
+ padding-bottom: 180px;
+ padding-top: 180px;
}
-
-/*@include sticky-footer(54px, "#wrapper", "#main", "#footer")*/
+#footer {
+ height: 180px;
+ clear: both;
+ position: absolute;
+ bottom: 20px;
+ left: 0;
+}

0 comments on commit b9f07c0

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