Skip to content

Commit

Permalink
changed index, layout color scheme
Browse files Browse the repository at this point in the history
  • Loading branch information
@arvidkahl
arvidkahl committed Mar 12, 2012
1 parent 705834a commit 41ded32
Show file tree
Hide file tree
Showing 8 changed files with 115 additions and 83 deletions.
3 changes: 3 additions & 0 deletions public/js/jquery.noisy.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

105 changes: 56 additions & 49 deletions public/less/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
14 changes: 11 additions & 3 deletions public/less/utilities.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,29 @@ body {

h1 {
color:@linkColor;
text-shadow: 1px 1px 1spx darken(@linkColor, 35%);
}

.sceneTitle {
margin-top: -10px;
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;
Expand Down
15 changes: 9 additions & 6 deletions public/less/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions views/bootstrap.jade
View file
Original file line number Diff line number Diff line change
@@ -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')
17 changes: 11 additions & 6 deletions views/index.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand Down
Loading

0 comments on commit 41ded32

Please sign in to comment.