Several updates:
authorPablo Vazquez <venomgfx@gmail.com>
Thu, 9 Jul 2015 16:26:41 +0000 (18:26 +0200)
committerPablo Vazquez <venomgfx@gmail.com>
Thu, 9 Jul 2015 16:26:41 +0000 (18:26 +0200)
- Grunt now uses Uglify to compress js
- Grunt watch index.html
- Introducing navbar-transparent, used in BlenderNetwork for a while and now in web-assets,
 use with NavbarTransparent(); function for now, might become default

Gruntfile.js
images/background_gradient_strip_top.png [new file with mode: 0644]
index.html
js/interactive.js
js/interactive.min.js [new file with mode: 0644]
package.json
sass/_base.sass
sass/main.sass

index 244a773c914680e30117fd66f690977d10387ee1..1e2c11a812f76b15e88363e34fb9ed034d106cad 100644 (file)
@@ -17,9 +17,21 @@ module.exports = function(grunt) {
             no_dest: { src: 'css/main.css' }
         },
 
+        uglify: {
+            main : {
+              src : 'js/interactive.js',
+              dest : 'js/interactive.min.js'
+            },
+        },
+
         watch: {
-            files: ['sass/main.sass'],
-            tasks: ['sass', 'autoprefixer'],
+            files: [
+                'index.html',
+                'sass/main.sass',
+                'sass/_base.sass',
+                'sass/_helpers.sass'],
+            tasks: ['sass', 'autoprefixer', 'uglify'],
+            js:  { files: 'js/interactive.js', tasks: [ 'uglify' ] },
             options: {
               livereload: true,
             },
@@ -29,6 +41,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-sass');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-autoprefixer');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
 
-    grunt.registerTask('default', ['sass', 'autoprefixer']);
+    grunt.registerTask('default', ['sass', 'autoprefixer', 'uglify']);
 };
diff --git a/images/background_gradient_strip_top.png b/images/background_gradient_strip_top.png
new file mode 100644 (file)
index 0000000..bde8fbf
Binary files /dev/null and b/images/background_gradient_strip_top.png differ
index 5f074cedc4ac2d756814c35b6b777c2ec36a30fa..666b0cfe09afee87469e3017d7da10796d6dcc1b 100644 (file)
@@ -16,7 +16,8 @@
        <body>
                <div class="container-main">
                <a name="hop"></a> <!-- Anchor to top -->
-               <header class="navbar navbar-default navbar-fixed-top" role="navigation">
+               <header class="navbar navbar-transparent navbar-fixed-top" role="navigation">
+                       <div class="navbar-overlay"></div>
                        <div class="container">
                                <div class="navbar-header">
                                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cloud-navbar-collapse-1">
                        </div> <!-- /footer-container -->
                </footer>
 
-               <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-               <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-               <script src="js/interactive.js"></script>
+               <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+               <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+               <script src="js/interactive.min.js"></script>
                <script type="text/javascript">
                        $('#can_i_haz_popover').popover();
+                       NavbarTransparent();
                </script>
        </body>
 </html>
index 015a3001e4f5e85b7565730e1bde8d43d4125df4..9e68363f07bb95b2cc054c9c21f319b1ff4d4e48 100644 (file)
@@ -55,3 +55,48 @@ function RowSameHeight() {
                });
        });
 };
+
+function NavbarTransparent() {
+       startingpoint = 150;
+
+       $(window).on("scroll", function () {
+
+               scroll = Math.min(Math.max(parseInt(($(this).scrollTop() - startingpoint)), 0), $(this).scrollTop());
+
+               if ($(this).scrollTop() > startingpoint) {
+
+                       // We start with 0 opacity, and scroll to 1.0
+                       opacity = ((startingpoint - $(this).scrollTop()) * -0.5) / 50;
+                       opacity = Math.min(Math.max(parseFloat((opacity)), 0), 1.0)
+                       $('.navbar-overlay').css('background-color', 'rgba(255,255,255,' + opacity + ')');
+
+                       // We start with 255, and scroll to 68
+                       color = Math.min(Math.max(parseInt((255 - scroll)), 68), 255);
+                       $('.navbar-transparent li a').not('.navbar-transparent ul.dropdown-menu li a').css('color', 'rgb(' + color + ',' + color + ',' + color + ')');
+
+                       padding_top = Math.min(Math.max(parseInt((35 - (scroll * 0.2))), 15), 35);
+                       $('.navbar-transparent li a').not('.navbar-transparent ul.dropdown-menu li a').css('padding-top', padding_top);
+
+                       padding_sides = Math.min(Math.max(parseInt((20 - (scroll * 0.1))), 15), 20);
+                       $('.navbar-transparent li a').not('.navbar-transparent ul.dropdown-menu li a').css({
+                               'padding-left': padding_sides,
+                               'padding-right': padding_sides
+                       });
+
+                       logo_margin_top = Math.min(Math.max(parseInt((25 - (scroll * 0.2))), 8), 25);
+                       $('.navbar-transparent a.logo').css({
+                               'margin-top': logo_margin_top
+                       });
+
+               } else {
+                       $('.navbar-overlay').css('background-color', 'rgba(255,255,255,0)');
+                       $('.navbar-transparent a.logo').css('margin-top', '25px');
+                       $('.navbar-transparent li a').not('.navbar-transparent ul.dropdown-menu li a').css({
+                               'color' : 'rgb(255, 255, 255)',
+                               'padding-top' : '35px',
+                               'padding-left' : '20px',
+                               'padding-right' : '20px'
+                       });
+               };
+       });
+};
diff --git a/js/interactive.min.js b/js/interactive.min.js
new file mode 100644 (file)
index 0000000..b721bf2
--- /dev/null
@@ -0,0 +1 @@
+function RowSameHeight(){$(".row-same-height").each(function(){var a=-(1/0);$(this).find("div[class^='col-']").each(function(){var b=$(this).height();a=Math.max(a,parseFloat(b)),$(this).children(".box").css("height",a)})})}function NavbarTransparent(){startingpoint=150,$(window).on("scroll",function(){scroll=Math.min(Math.max(parseInt($(this).scrollTop()-startingpoint),0),$(this).scrollTop()),$(this).scrollTop()>startingpoint?(opacity=(startingpoint-$(this).scrollTop())*-.5/50,opacity=Math.min(Math.max(parseFloat(opacity),0),1),$(".navbar-overlay").css("background-color","rgba(255,255,255,"+opacity+")"),color=Math.min(Math.max(parseInt(255-scroll),68),255),$(".navbar-transparent li a").not(".navbar-transparent ul.dropdown-menu li a").css("color","rgb("+color+","+color+","+color+")"),padding_top=Math.min(Math.max(parseInt(35-.2*scroll),15),35),$(".navbar-transparent li a").not(".navbar-transparent ul.dropdown-menu li a").css("padding-top",padding_top),padding_sides=Math.min(Math.max(parseInt(20-.1*scroll),15),20),$(".navbar-transparent li a").not(".navbar-transparent ul.dropdown-menu li a").css({"padding-left":padding_sides,"padding-right":padding_sides}),logo_margin_top=Math.min(Math.max(parseInt(25-.2*scroll),8),25),$(".navbar-transparent a.logo").css({"margin-top":logo_margin_top})):($(".navbar-overlay").css("background-color","rgba(255,255,255,0)"),$(".navbar-transparent a.logo").css("margin-top","25px"),$(".navbar-transparent li a").not(".navbar-transparent ul.dropdown-menu li a").css({color:"rgb(255, 255, 255)","padding-top":"35px","padding-left":"20px","padding-right":"20px"}))})}$(".flip-it").click(function(){$(this).closest(".card").toggleClass("flipped")}),$(".flip_toggle").each(function(){$(this).parent().find(".front").height()>$(this).parent().find(".back").height()&&$(this).parent().height($(this).parent().find(".front").height())});
\ No newline at end of file
index 85f30079e0813e1ca71542bc9de943bcb946be20..cb7ed8d2cd1b569cf4e862b569c6af738de9f371 100644 (file)
@@ -10,6 +10,7 @@
     "grunt": "~0.4.5",
     "grunt-autoprefixer": "~1.0.1",
     "grunt-contrib-sass": "~0.9.2",
-    "grunt-contrib-watch": "~0.6.1"
+    "grunt-contrib-watch": "~0.6.1",
+    "grunt-contrib-uglify": "~0.9.1"
   }
 }
index d66c6b002fd50ca40745cdfcc1553ce6e5aac8a5..24bab400df0a877d5b517c4db8becfe40ce03e2c 100644 (file)
@@ -10,7 +10,9 @@ html, body
        -webkit-font-smoothing: antialiased
 
 body
-       padding: 52px 0 0 0
+       //padding: 52px 0 0 0
+       +media-xs
+               padding-top: 60px
 
 body.dark
        background-color: $color_background_dark
index a3805e0efde5d84b4fd4feb53108b0297d649bde..0220b7659d5d4dd337aa97319577b963fef8da1c 100644 (file)
@@ -77,8 +77,10 @@ $container_width: 1170px !default
 /* Just to do some math later */
 
 /* Featured (our own jumbotron) */
-$featured-xl_height: 450px !default
-$featured-lg_height: 350px !default
+/* featured-xl was 450 */
+/* featured-lg was 350 */
+$featured-xl_height: 520px !default
+$featured-lg_height: 480px !default
 $featured-md_height: 250px !default
 $featured-sm_height: 160px !default
 $featured-xs_height: 100px !default
@@ -681,10 +683,67 @@ label
        margin-bottom: 0
        font-size: 140%
        min-height: 44px
+
+       // background-image: linear-gradient(top, white, white)
+       // background-image: -moz-linear-gradient(top, white, white)
+
        &.navbar-secondlevel, &.navbar-thirdlevel
                &:nth-last-of-type(1)
                        box-shadow: 2px 2px 0 rgba(darken($color_background, 60%), .1)
 
+.navbar-transparent
+       text-shadow: none
+
+       background-color: transparent
+       background-image: url(../images/background_gradient_strip_top.png)
+       background-repeat: repeat-x
+       background-size: contain
+       z-index: 0
+
+       & .navbar-nav ul.dropdown-menu a
+               color: $color_text
+               padding: 6% 8% 6% 6%
+               padding-right: 45px
+
+       & .navbar-nav > li
+               &.active a
+                       border-bottom-color: $color_brand_secondary
+
+               & a
+                       color: white
+                       text-shadow: none
+                       padding: 15px
+                       padding-top: 35px
+                       padding-left: 20px
+                       padding-right: 20px
+
+                       &:hover, &:focus, &:active
+                               background-color: transparent
+                               border-bottom-color: $color_brand_main
+
+               & .open a, & .open a:hover, & .open a:focus
+                       background-color: transparent
+
+       & a.logo
+               margin-top: 25px
+
+       /* from BlenderNetwork */
+       & .navbar-brand
+               color: white !important
+               padding: 30px 0 15px 0
+               text-shadow: 1px 1px 0 rgba(black, .4)
+
+.navbar-overlay
+       background-color: rgba(255,255,255,0)
+       width: 100%
+       height: 100%
+       position: absolute
+       top: 0
+       left: 0
+       right: 0
+       bottom: 0
+       z-index: 0
+
 .navbar-nav
        +media-xs
                margin: 0 -15px