From 41ded323c5182ecbdf753c17dae3e840fbfe522f Mon Sep 17 00:00:00 2001 From: Arvid Kahl Date: Mon, 12 Mar 2012 23:30:49 +0100 Subject: [PATCH] changed index, layout color scheme --- public/js/jquery.noisy.min.js | 3 + public/less/bootstrap.css | 105 ++++++++++++++++++---------------- public/less/utilities.less | 14 ++++- public/less/variables.less | 15 +++-- views/bootstrap.jade | 1 + views/index.jade | 17 ++++-- views/layout.jade | 34 ++++++----- views/scenes.jade | 9 +-- 8 files changed, 115 insertions(+), 83 deletions(-) create mode 100755 public/js/jquery.noisy.min.js diff --git a/public/js/jquery.noisy.min.js b/public/js/jquery.noisy.min.js new file mode 100755 index 0000000..d0f0900 --- /dev/null +++ b/public/js/jquery.noisy.min.js @@ -0,0 +1,3 @@ +(function(c){c.fn.noisy=function(b){var b=c.extend({},c.fn.noisy.defaults,b),d,h,a=!1;try{h="localStorage"in window&&window.localStorage!==null}catch(l){h=!1}window.JSON&&h&&(a=localStorage.getItem(window.JSON.stringify(b)));if(a)d=a;else{a=document.createElement("canvas");if(a.getContext){a.width=a.height=b.size;for(var i=a.getContext("2d"),e=i.createImageData(a.width,a.height),j=b.intensity*Math.pow(b.size,2),k=255*b.opacity;j--;){var f=~~(Math.random()*a.width),g=~~(Math.random()*a.height),f=(f+ +g*e.width)*4,g=j%255;e.data[f]=g;e.data[f+1]=b.monochrome?g:~~(Math.random()*255);e.data[f+2]=b.monochrome?g:~~(Math.random()*255);e.data[f+3]=~~(Math.random()*k)}i.putImageData(e,0,0);d=a.toDataURL("image/png");if(d.indexOf("data:image/png")!=0||c.browser.msie&&c.browser.version.substr(0,1)<9&&d.length>32768)d=b.fallback}else d=b.fallback;window.JSON&&h&&localStorage.setItem(window.JSON.stringify(b),d)}return this.each(function(){c(this).css("background-image","url('"+d+"'),"+c(this).css("background-image"))})}; +c.fn.noisy.defaults={intensity:0.9,size:200,opacity:0.08,fallback:"",monochrome:!1}})(jQuery); \ No newline at end of file diff --git a/public/less/bootstrap.css b/public/less/bootstrap.css index 6d80285..a7ddba4 100644 --- a/public/less/bootstrap.css +++ b/public/less/bootstrap.css @@ -121,11 +121,11 @@ body { background-color: #ffffff; } a { - color: #0088cc; + color: #03518a; text-decoration: none; } a:hover { - color: #005580; + color: #01253f; text-decoration: underline; } .row { @@ -1738,7 +1738,7 @@ table .span12 { .dropdown-menu .active > a:hover { color: #ffffff; text-decoration: none; - background-color: #0088cc; + background-color: #03518a; } .dropdown.open { *z-index: 1000; @@ -1949,16 +1949,16 @@ table .span12 { color: rgba(255, 255, 255, 0.75); } .btn-primary { - background-color: #006dcc; - background-image: -moz-linear-gradient(top, #0088cc, #0044cc); - background-image: -ms-linear-gradient(top, #0088cc, #0044cc); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); - background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); - background-image: -o-linear-gradient(top, #0088cc, #0044cc); - background-image: linear-gradient(top, #0088cc, #0044cc); + background-color: #033f8a; + background-image: -moz-linear-gradient(top, #03518a, #03248a); + background-image: -ms-linear-gradient(top, #03518a, #03248a); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#03518a), to(#03248a)); + background-image: -webkit-linear-gradient(top, #03518a, #03248a); + background-image: -o-linear-gradient(top, #03518a, #03248a); + background-image: linear-gradient(top, #03518a, #03248a); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); - border-color: #0044cc #0044cc #002a80; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03518a', endColorstr='#03248a', GradientType=0); + border-color: #03248a #03248a #01103f; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } @@ -1967,11 +1967,11 @@ table .span12 { .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { - background-color: #0044cc; + background-color: #03248a; } .btn-primary:active, .btn-primary.active { - background-color: #003399 \9; + background-color: #021758 \9; } .btn-warning { background-color: #faa732; @@ -2349,7 +2349,7 @@ input[type="submit"].btn.small { .nav-list .active > a:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); - background-color: #0088cc; + background-color: #03518a; } .nav-list [class^="icon-"] { margin-right: 2px; @@ -2417,7 +2417,7 @@ input[type="submit"].btn.small { .nav-pills .active > a, .nav-pills .active > a:hover { color: #ffffff; - background-color: #0088cc; + background-color: #03518a; } .nav-stacked > li { float: none; @@ -2466,12 +2466,12 @@ input[type="submit"].btn.small { } .nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret { - border-top-color: #0088cc; + border-top-color: #03518a; margin-top: 6px; } .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { - border-top-color: #005580; + border-top-color: #01253f; } .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { @@ -2600,15 +2600,15 @@ input[type="submit"].btn.small { .navbar-inner { padding-left: 20px; padding-right: 20px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); + background-color: #022e4e; + background-image: -moz-linear-gradient(top, #023458, #01253f); + background-image: -ms-linear-gradient(top, #023458, #01253f); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#023458), to(#01253f)); + background-image: -webkit-linear-gradient(top, #023458, #01253f); + background-image: -o-linear-gradient(top, #023458, #01253f); + background-image: linear-gradient(top, #023458, #01253f); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#023458', endColorstr='#01253f', GradientType=0); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -2622,16 +2622,16 @@ input[type="submit"].btn.small { padding: 7px 10px; margin-left: 5px; margin-right: 5px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); + background-color: #022e4e; + background-image: -moz-linear-gradient(top, #023458, #01253f); + background-image: -ms-linear-gradient(top, #023458, #01253f); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#023458), to(#01253f)); + background-image: -webkit-linear-gradient(top, #023458, #01253f); + background-image: -o-linear-gradient(top, #023458, #01253f); + background-image: linear-gradient(top, #023458, #01253f); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); - border-color: #222222 #222222 #000000; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#023458', endColorstr='#01253f', GradientType=0); + border-color: #01253f #01253f #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); @@ -2643,11 +2643,11 @@ input[type="submit"].btn.small { .btn-navbar.active, .btn-navbar.disabled, .btn-navbar[disabled] { - background-color: #222222; + background-color: #01253f; } .btn-navbar:active, .btn-navbar.active { - background-color: #080808 \9; + background-color: #00080d \9; } .btn-navbar .icon-bar { display: block; @@ -2683,7 +2683,7 @@ input[type="submit"].btn.small { .navbar .navbar-text { margin-bottom: 0; line-height: 40px; - color: #999999; + color: #ffffff; } .navbar .navbar-text a:hover { color: #ffffff; @@ -2813,28 +2813,28 @@ input[type="submit"].btn.small { float: none; padding: 10px 10px 11px; line-height: 19px; - color: #999999; + color: #057dd5; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .navbar .nav > li > a:hover { background-color: transparent; - color: #ffffff; + color: #1398fa; text-decoration: none; } .navbar .nav .active > a, .navbar .nav .active > a:hover { - color: #ffffff; + color: #1398fa; text-decoration: none; - background-color: #222222; + background-color: #01253f; } .navbar .divider-vertical { height: 40px; width: 1px; margin: 0 9px; overflow: hidden; - background-color: #222222; - border-right: 1px solid #333333; + background-color: #01253f; + border-right: 1px solid #023458; } .navbar .nav.pull-right { margin-left: 10px; @@ -3326,7 +3326,7 @@ input[type="submit"].btn.small { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } a.thumbnail:hover { - border-color: #0088cc; + border-color: #03518a; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); @@ -3684,22 +3684,29 @@ body { padding-top: 75px; } h1 { - color: #0088cc; + color: #03518a; + text-shadow: 1px 1px 1s px #000000; } .sceneTitle { margin-top: -10px; margin-bottom: 10px; } .highlight span { - color: #0088cc; + color: #76c4fc; } .highlight:hover span { - color: white; + color: #c1e4fe; +} +.highlightLogin a { + color: #ffffff; +} +.highlightLogin a:hover { + color: #03518a !important; } .twitterImage { width: 18px; height: 18px; - border: 1px solid #0088cc; + border: 1px solid #03518a; border-radius: 5px; vertical-align: middle; margin-top: -2px; diff --git a/public/less/utilities.less b/public/less/utilities.less index ced526f..e54d7d5 100755 --- a/public/less/utilities.less +++ b/public/less/utilities.less @@ -28,6 +28,7 @@ body { h1 { color:@linkColor; + text-shadow: 1px 1px 1spx darken(@linkColor, 35%); } .sceneTitle { @@ -35,14 +36,21 @@ h1 { margin-bottom: 10px; } -.highlight span { - color: @linkColor; +.highlight span{ + color: lighten(@linkColor, 45%); } .highlight:hover span{ - color: white; + color: lighten(@linkColor, 60%); } +.highlightLogin a{ + color:@white; +} + +.highlightLogin a:hover { + color:@linkColor !important; +} .twitterImage { width: 18px; height: 18px; diff --git a/public/less/variables.less b/public/less/variables.less index 3d448ab..ff3a363 100755 --- a/public/less/variables.less +++ b/public/less/variables.less @@ -8,9 +8,12 @@ // -------------------------------------------------- // Links -@linkColor: #08c; +@linkColor: #03518A; //08c @linkColorHover: darken(@linkColor, 15%); +@linkColorComplementary: lighten(spin(@linkColor, 180), 15%); + + // Grays @black: #000; @grayDarker: #222; @@ -66,13 +69,13 @@ // Navbar @navbarHeight: 40px; -@navbarBackground: @grayDarker; -@navbarBackgroundHighlight: @grayDark; +@navbarBackground: darken(@linkColor, 15%); +@navbarBackgroundHighlight: darken(@linkColor, 10%); @navbarLinkBackgroundHover: transparent; -@navbarText: @grayLight; -@navbarLinkColor: @grayLight; -@navbarLinkColorHover: @white; +@navbarText: @white; +@navbarLinkColor: lighten(@linkColor, 15%); +@navbarLinkColorHover: lighten(@linkColor, 25%); // Form states and alerts @warningText: #c09853; diff --git a/views/bootstrap.jade b/views/bootstrap.jade index 349abd2..06c2d8c 100644 --- a/views/bootstrap.jade +++ b/views/bootstrap.jade @@ -1,5 +1,6 @@ script(src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') script(src='/js/jquery.lightbox-0.5.pack.js') script(src='/js/jquery.wookmark.min.js') +script(src='/js/jquery.noisy.min.js') link(rel='stylesheet', href='/less/bootstrap.css') link(rel='stylesheet', href='/css/jquery.lightbox-0.5.css') diff --git a/views/index.jade b/views/index.jade index 382d66c..139ac02 100644 --- a/views/index.jade +++ b/views/index.jade @@ -8,14 +8,19 @@ | a.btn(href="/random") Take me to a scene already! » .row - div.span12 - .well - h1 Hello! + div.span8 + h2 Hello! p Welcome to Spark. This is a platform for authors like you who want to find inspiration in concept art from all over the internet. You can add Stories to the concept artpieces (which are called Scenes) and share them to inspire others. + div.span4 + h3 Fantastic voyages ahead + p You can begin inspecting all the Scenes here on Spark right now. Get inspired! + a.btn.btn-primary(href='/scenes') Browse Scenes » +.row.clear +   .row#indexRandomScenes div.span4 .well - h2 Check. + h3 Check. a(href='/'+docs[0]._id) div.image img(id=docs[0]._id,src=docs[0].url, alt=docs[0].body) @@ -26,7 +31,7 @@ div.span4 .well - h2 These. + h3 These. a(href='/'+docs[1]._id) div.image img(id=docs[1]._id,src=docs[1].url, alt=docs[1].body) @@ -37,7 +42,7 @@ div.span4 .well - h2 Out! + h3 Out! a(href='/'+docs[2]._id) div.image img(id=docs[2]._id,src=docs[2].url, alt=docs[2].body) diff --git a/views/layout.jade b/views/layout.jade index a0e3a1e..8349913 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -4,12 +4,11 @@ html include bootstrap title= title body - div.navbar.navbar-fixed-top + div.navbar.navbar-fixed-top#sparkNavBar div.navbar-inner div.container-fluid a(href='/').brand - i.icon-fire.icon-white - | + i.icon-asterisk.icon-white span Spark. div.nav-collapse ul.nav @@ -18,26 +17,26 @@ html span Inspire me! li a(href='/scenes') - i.icon-book.icon-white - | span Browse Scenes + li.divider-vertical li a(href='/new') - i.icon-file.icon-white - | + //i.icon-file.icon-white + //| span Add Scene li.divider-vertical li a(href='#') - i.icon-envelope.icon-white - | + //i.icon-envelope.icon-white + //| span Contact + li.divider-vertical li a(href='/howto') - i.icon-info-sign.icon-white - | + //i.icon-info-sign.icon-white + //| span HowTo - p.navbar-text.pull-right + p.navbar-text.pull-right.highlightLogin - if (everyauth.loggedIn) span= "Logged in as " img.twitterImage(src=everyauth.twitter.user.profile_image_url) @@ -67,4 +66,13 @@ html a(href="http://www.nodester.com/") Nodester |, which is just plain awesome. It's using a(href="http://www.iriscouch.com/") IrisCouch - | to host the Scenes and Stories. \ No newline at end of file + | to host the Scenes and Stories. + script + $(function(){ + $('#sparkNavBar div.navbar-inner').noisy({ + 'intensity' : 1, + 'size' : '139', + 'opacity' : 0.05, + 'fallback' : '', + 'monochrome' : true}); + }); \ No newline at end of file diff --git a/views/scenes.jade b/views/scenes.jade index 31ba5eb..5b25b7a 100644 --- a/views/scenes.jade +++ b/views/scenes.jade @@ -1,5 +1,6 @@ div.row#sceneRow div.span12 + h6#scenesLoading Scenes are being loaded... ul#scenes - each doc in docs li @@ -14,10 +15,6 @@ div.row#sceneRow script $(window).load(function(){ + $("#scenesLoading").addClass("hide"); $('#scenes li').wookmark({container:$('#scenes'),offset:5,itemWidth:260,autoResize:true}); - }); - - -// h1= article.title + "("+i+")" -// div.created #{(new Date(article.created_at)).toGMTString()} - \ No newline at end of file + }); \ No newline at end of file