Permalink
Browse files

Colour changing works, and is persistent

  • Loading branch information...
1 parent af86bed commit 349266647828e20c984c31dbdda17cd849112248 @aaronmw aaronmw committed Mar 21, 2012
View
111 css/_global.css
@@ -33,23 +33,110 @@ The Typeface
/*--------------------------------------------------------------------------
Colours (ALL COLOUR INFO GOES HERE, AND ONLY HERE)
--------------------------------------------------------------------------*/
-body#navy {
+body#white {
+ color: #f05123;
+}
+body#white a {
color: #3c3a89;
}
-body#navy a {
+body#white #logo a {
+ background: url(../images/wordmark.navy.png);
+}
+body#white .thumbnail {
+ border-color: #3c3a89;
+}
+body#white .category_card {
+ background: #f05123;
+ color: #cbe8db;
+}
+body#white .tooltip {
+ background: #3c3a89;
+ color: #cbe8db;
+}
+body#yellow {
+ background: #ffe850;
color: #3c3a89;
}
-body#navy .thumbnail {
+body#yellow a {
+ color: #f05123;
+}
+body#yellow #logo a {
+ background: url(../images/wordmark.navy.png);
+}
+body#yellow .thumbnail {
border-color: #3c3a89;
}
-body#navy .category_card {
+body#yellow .category_card {
background: #f05123;
color: #cbe8db;
}
-body#navy .tooltip {
+body#yellow .tooltip {
background: #3c3a89;
color: #cbe8db;
}
+body#seafoam {
+ background: #cbe8db;
+ color: #f05123;
+}
+body#seafoam a {
+ color: #3c3a89;
+}
+body#seafoam #logo a {
+ background: url(../images/wordmark.red.png);
+}
+body#seafoam .thumbnail {
+ border-color: #f05123;
+}
+body#seafoam .category_card {
+ background: #f05123;
+ color: #cbe8db;
+}
+body#seafoam .tooltip {
+ background: #3c3a89;
+ color: #cbe8db;
+}
+body#red {
+ background: #f05123;
+ color: #cbe8db;
+}
+body#red a {
+ color: #ffe850;
+}
+body#red #logo a {
+ background: url(../images/wordmark.seafoam.png);
+}
+body#red .thumbnail {
+ border-color: #cbe8db;
+}
+body#red .category_card {
+ background: #ffe850;
+ color: #3c3a89;
+}
+body#red .tooltip {
+ background: #ffe850;
+ color: #3c3a89;
+}
+body#navy {
+ background: #3c3a89;
+ color: #ffe850;
+}
+body#navy a {
+ color: #cbe8db;
+}
+body#navy #logo a {
+ background: url(../images/wordmark.yellow.png);
+}
+body#navy .thumbnail {
+ border-color: #ffe850;
+}
+body#navy .category_card {
+ background: #ffe850;
+ color: #3c3a89;
+}
+body#navy .tooltip {
+ background: #ffe850;
+ color: #3c3a89;
+}
/*--------------------------------------------------------------------------
Misc Tag Setup
--------------------------------------------------------------------------*/
@@ -90,7 +177,6 @@ header #logo a {
background: url(../images/wordmark.blue.png);
}
header .timer {
- color: #f05123;
font-weight: bold;
position: absolute;
bottom: 0;
@@ -151,7 +237,6 @@ Navigation
margin: 0 10px;
}
#main-navigation ul li a {
- color: #3c3a89;
font-weight: bold;
text-transform: uppercase;
}
@@ -162,6 +247,7 @@ Navigation
Footer
--------------------------------------------------------------------------*/
#main-footer {
+ color: #3c3a89;
position: fixed;
bottom: 0;
left: 0;
@@ -170,6 +256,9 @@ Footer
background: white;
z-index: 10000000000;
}
+#main-footer a {
+ color: #3c3a89 !important;
+}
#main-footer #colour-picker {
position: absolute;
left: 30px;
@@ -185,10 +274,13 @@ Footer
#main-footer #colour-picker li.active a {
position: relative;
bottom: -2px;
- border: 2px solid black;
+ border: 2px solid black !important;
}
#main-footer #colour-picker li#set-bg-white a {
background: white;
+ position: relative;
+ bottom: -2px;
+ border: 2px solid #ddd;
}
#main-footer #colour-picker li#set-bg-yellow a {
background: #ffe850;
@@ -220,7 +312,7 @@ Footer
background: url(../images/social.twitterbird.png) no-repeat left center;
}
#main-footer #social-media #twitter_update_list li > a:last-child {
- color: #f05123;
+ color: #f05123 !important;
}
#main-footer #social-media #social-links {
margin-left: 30px;
@@ -231,6 +323,7 @@ Footer
#main-footer #social-media #social-links li a {
display: inline-block;
text-indent: -5000px;
+ vertical-align: middle;
}
#main-footer #social-media #social-links li#social-media-facebook a {
width: 8px;
View
0 images/wordmark.blue.png → images/wordmark.navy.png
File renamed without changes
View
BIN images/wordmark.red.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/wordmark.seafoam.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/wordmark.yellow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2 index.php
@@ -22,7 +22,7 @@
?>
</head>
- <body id="navy">
+ <body id="white">
<header>
<h1 id="logo"><a href="#">York / Sheridan Design Pique Grad Show</a></h1>
View
12 js/_global.js
@@ -25,4 +25,16 @@ window.addEvent ('domready', function () {
'showDelay': 0,
'hideDelay': 0
});
+
+ /*--------------------------------------------------------------------------
+ Changing Colours
+ --------------------------------------------------------------------------*/
+ $$('#colour-picker li').addEvent ('click', function () {
+ this.getParent ('ul').getElement ('.active').removeClass ('active');
+ this.addClass ('active');
+ document.body.set ('id', this.get ('text').toLowerCase());
+ localStorage.setItem('pique-bg-colour', this.get('id'));
+ });
+ var stored_bg = localStorage.getItem ('pique-bg-colour') || 'set-bg-white';
+ $(stored_bg).fireEvent ('click');
});
View
115 less/_global.less
@@ -23,13 +23,16 @@ Colours (ALL COLOUR INFO GOES HERE, AND ONLY HERE)
@red: #F05123;
@yellow: #FFE850;
-// NAVY
-body#navy {
- color: @navy;
+// WHITE
+body#white {
+ color: @red;
a {
color: @navy;
}
+ #logo a {
+ background: url(../images/wordmark.navy.png);
+ }
.thumbnail {
border-color: @navy;
}
@@ -42,6 +45,98 @@ body#navy {
color: @seafoam;
}
}
+// YELLOW
+body#yellow {
+ background: @yellow;
+ color: @navy;
+
+ a {
+ color: @red;
+ }
+ #logo a {
+ background: url(../images/wordmark.navy.png);
+ }
+ .thumbnail {
+ border-color: @navy;
+ }
+ .category_card {
+ background: @red;
+ color: @seafoam;
+ }
+ .tooltip {
+ background: @navy;
+ color: @seafoam;
+ }
+}
+// SEAFOAM
+body#seafoam {
+ background: @seafoam;
+ color: @red;
+
+ a {
+ color: @navy;
+ }
+ #logo a {
+ background: url(../images/wordmark.red.png);
+ }
+ .thumbnail {
+ border-color: @red;
+ }
+ .category_card {
+ background: @red;
+ color: @seafoam;
+ }
+ .tooltip {
+ background: @navy;
+ color: @seafoam;
+ }
+}
+// RED
+body#red {
+ background: @red;
+ color: @seafoam;
+
+ a {
+ color: @yellow;
+ }
+ #logo a {
+ background: url(../images/wordmark.seafoam.png);
+ }
+ .thumbnail {
+ border-color: @seafoam;
+ }
+ .category_card {
+ background: @yellow;
+ color: @navy;
+ }
+ .tooltip {
+ background: @yellow;
+ color: @navy;
+ }
+}
+// NAVY
+body#navy {
+ background: @navy;
+ color: @yellow;
+
+ a {
+ color: @seafoam;
+ }
+ #logo a {
+ background: url(../images/wordmark.yellow.png);
+ }
+ .thumbnail {
+ border-color: @yellow;
+ }
+ .category_card {
+ background: @yellow;
+ color: @navy;
+ }
+ .tooltip {
+ background: @yellow;
+ color: @navy;
+ }
+}
/*--------------------------------------------------------------------------
Misc Tag Setup
@@ -82,7 +177,6 @@ header {
}
.timer {
- color: @red;
font-weight: bold;
position: absolute;
bottom: 0;
@@ -153,7 +247,6 @@ Navigation
margin: 0 10px;
a {
- color: @navy;
font-weight: bold;
text-transform: uppercase;
}
@@ -169,6 +262,7 @@ Footer
--------------------------------------------------------------------------*/
#main-footer {
@footer-height: 50px;
+ color: @navy;
position: fixed;
bottom: 0;
left: 0;
@@ -177,6 +271,9 @@ Footer
background: white;
z-index: 10000000000;
+ a {
+ color: @navy !important;
+ }
#colour-picker {
position: absolute;
left: 30px;
@@ -192,10 +289,13 @@ Footer
&.active a {
position: relative;
bottom: -2px;
- border: 2px solid black;
+ border: 2px solid black !important;
}
&#set-bg-white a {
background: white;
+ position: relative;
+ bottom: -2px;
+ border: 2px solid #ddd;
}
&#set-bg-yellow a {
background: @yellow;
@@ -230,7 +330,7 @@ Footer
background: url(../images/social.twitterbird.png) no-repeat left center;
li > a:last-child {
- color: @red;
+ color: @red !important;
}
}
#social-links {
@@ -242,6 +342,7 @@ Footer
a {
display: inline-block;
text-indent: -5000px;
+ vertical-align: middle;
}
&#social-media-facebook a {
width: 8px;

0 comments on commit 3492666

Please sign in to comment.