Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Colour changing works, and is persistent

  • Loading branch information...
commit 349266647828e20c984c31dbdda17cd849112248 1 parent af86bed
Aaron Wright authored
111 css/_global.css
@@ -33,23 +33,110 @@ The Typeface
33 33 /*--------------------------------------------------------------------------
34 34 Colours (ALL COLOUR INFO GOES HERE, AND ONLY HERE)
35 35 --------------------------------------------------------------------------*/
36   -body#navy {
  36 +body#white {
  37 + color: #f05123;
  38 +}
  39 +body#white a {
37 40 color: #3c3a89;
38 41 }
39   -body#navy a {
  42 +body#white #logo a {
  43 + background: url(../images/wordmark.navy.png);
  44 +}
  45 +body#white .thumbnail {
  46 + border-color: #3c3a89;
  47 +}
  48 +body#white .category_card {
  49 + background: #f05123;
  50 + color: #cbe8db;
  51 +}
  52 +body#white .tooltip {
  53 + background: #3c3a89;
  54 + color: #cbe8db;
  55 +}
  56 +body#yellow {
  57 + background: #ffe850;
40 58 color: #3c3a89;
41 59 }
42   -body#navy .thumbnail {
  60 +body#yellow a {
  61 + color: #f05123;
  62 +}
  63 +body#yellow #logo a {
  64 + background: url(../images/wordmark.navy.png);
  65 +}
  66 +body#yellow .thumbnail {
43 67 border-color: #3c3a89;
44 68 }
45   -body#navy .category_card {
  69 +body#yellow .category_card {
46 70 background: #f05123;
47 71 color: #cbe8db;
48 72 }
49   -body#navy .tooltip {
  73 +body#yellow .tooltip {
50 74 background: #3c3a89;
51 75 color: #cbe8db;
52 76 }
  77 +body#seafoam {
  78 + background: #cbe8db;
  79 + color: #f05123;
  80 +}
  81 +body#seafoam a {
  82 + color: #3c3a89;
  83 +}
  84 +body#seafoam #logo a {
  85 + background: url(../images/wordmark.red.png);
  86 +}
  87 +body#seafoam .thumbnail {
  88 + border-color: #f05123;
  89 +}
  90 +body#seafoam .category_card {
  91 + background: #f05123;
  92 + color: #cbe8db;
  93 +}
  94 +body#seafoam .tooltip {
  95 + background: #3c3a89;
  96 + color: #cbe8db;
  97 +}
  98 +body#red {
  99 + background: #f05123;
  100 + color: #cbe8db;
  101 +}
  102 +body#red a {
  103 + color: #ffe850;
  104 +}
  105 +body#red #logo a {
  106 + background: url(../images/wordmark.seafoam.png);
  107 +}
  108 +body#red .thumbnail {
  109 + border-color: #cbe8db;
  110 +}
  111 +body#red .category_card {
  112 + background: #ffe850;
  113 + color: #3c3a89;
  114 +}
  115 +body#red .tooltip {
  116 + background: #ffe850;
  117 + color: #3c3a89;
  118 +}
  119 +body#navy {
  120 + background: #3c3a89;
  121 + color: #ffe850;
  122 +}
  123 +body#navy a {
  124 + color: #cbe8db;
  125 +}
  126 +body#navy #logo a {
  127 + background: url(../images/wordmark.yellow.png);
  128 +}
  129 +body#navy .thumbnail {
  130 + border-color: #ffe850;
  131 +}
  132 +body#navy .category_card {
  133 + background: #ffe850;
  134 + color: #3c3a89;
  135 +}
  136 +body#navy .tooltip {
  137 + background: #ffe850;
  138 + color: #3c3a89;
  139 +}
53 140 /*--------------------------------------------------------------------------
54 141 Misc Tag Setup
55 142 --------------------------------------------------------------------------*/
@@ -90,7 +177,6 @@ header #logo a {
90 177 background: url(../images/wordmark.blue.png);
91 178 }
92 179 header .timer {
93   - color: #f05123;
94 180 font-weight: bold;
95 181 position: absolute;
96 182 bottom: 0;
@@ -151,7 +237,6 @@ Navigation
151 237 margin: 0 10px;
152 238 }
153 239 #main-navigation ul li a {
154   - color: #3c3a89;
155 240 font-weight: bold;
156 241 text-transform: uppercase;
157 242 }
@@ -162,6 +247,7 @@ Navigation
162 247 Footer
163 248 --------------------------------------------------------------------------*/
164 249 #main-footer {
  250 + color: #3c3a89;
165 251 position: fixed;
166 252 bottom: 0;
167 253 left: 0;
@@ -170,6 +256,9 @@ Footer
170 256 background: white;
171 257 z-index: 10000000000;
172 258 }
  259 +#main-footer a {
  260 + color: #3c3a89 !important;
  261 +}
173 262 #main-footer #colour-picker {
174 263 position: absolute;
175 264 left: 30px;
@@ -185,10 +274,13 @@ Footer
185 274 #main-footer #colour-picker li.active a {
186 275 position: relative;
187 276 bottom: -2px;
188   - border: 2px solid black;
  277 + border: 2px solid black !important;
189 278 }
190 279 #main-footer #colour-picker li#set-bg-white a {
191 280 background: white;
  281 + position: relative;
  282 + bottom: -2px;
  283 + border: 2px solid #ddd;
192 284 }
193 285 #main-footer #colour-picker li#set-bg-yellow a {
194 286 background: #ffe850;
@@ -220,7 +312,7 @@ Footer
220 312 background: url(../images/social.twitterbird.png) no-repeat left center;
221 313 }
222 314 #main-footer #social-media #twitter_update_list li > a:last-child {
223   - color: #f05123;
  315 + color: #f05123 !important;
224 316 }
225 317 #main-footer #social-media #social-links {
226 318 margin-left: 30px;
@@ -231,6 +323,7 @@ Footer
231 323 #main-footer #social-media #social-links li a {
232 324 display: inline-block;
233 325 text-indent: -5000px;
  326 + vertical-align: middle;
234 327 }
235 328 #main-footer #social-media #social-links li#social-media-facebook a {
236 329 width: 8px;
0  images/wordmark.blue.png → images/wordmark.navy.png
File renamed without changes
BIN  images/wordmark.red.png
BIN  images/wordmark.seafoam.png
BIN  images/wordmark.yellow.png
2  index.php
@@ -22,7 +22,7 @@
22 22 ?>
23 23 </head>
24 24
25   - <body id="navy">
  25 + <body id="white">
26 26 <header>
27 27 <h1 id="logo"><a href="#">York / Sheridan Design Pique Grad Show</a></h1>
28 28
12 js/_global.js
@@ -25,4 +25,16 @@ window.addEvent ('domready', function () {
25 25 'showDelay': 0,
26 26 'hideDelay': 0
27 27 });
  28 +
  29 + /*--------------------------------------------------------------------------
  30 + Changing Colours
  31 + --------------------------------------------------------------------------*/
  32 + $$('#colour-picker li').addEvent ('click', function () {
  33 + this.getParent ('ul').getElement ('.active').removeClass ('active');
  34 + this.addClass ('active');
  35 + document.body.set ('id', this.get ('text').toLowerCase());
  36 + localStorage.setItem('pique-bg-colour', this.get('id'));
  37 + });
  38 + var stored_bg = localStorage.getItem ('pique-bg-colour') || 'set-bg-white';
  39 + $(stored_bg).fireEvent ('click');
28 40 });
115 less/_global.less
@@ -23,13 +23,16 @@ Colours (ALL COLOUR INFO GOES HERE, AND ONLY HERE)
23 23 @red: #F05123;
24 24 @yellow: #FFE850;
25 25
26   -// NAVY
27   -body#navy {
28   - color: @navy;
  26 +// WHITE
  27 +body#white {
  28 + color: @red;
29 29
30 30 a {
31 31 color: @navy;
32 32 }
  33 + #logo a {
  34 + background: url(../images/wordmark.navy.png);
  35 + }
33 36 .thumbnail {
34 37 border-color: @navy;
35 38 }
@@ -42,6 +45,98 @@ body#navy {
42 45 color: @seafoam;
43 46 }
44 47 }
  48 +// YELLOW
  49 +body#yellow {
  50 + background: @yellow;
  51 + color: @navy;
  52 +
  53 + a {
  54 + color: @red;
  55 + }
  56 + #logo a {
  57 + background: url(../images/wordmark.navy.png);
  58 + }
  59 + .thumbnail {
  60 + border-color: @navy;
  61 + }
  62 + .category_card {
  63 + background: @red;
  64 + color: @seafoam;
  65 + }
  66 + .tooltip {
  67 + background: @navy;
  68 + color: @seafoam;
  69 + }
  70 +}
  71 +// SEAFOAM
  72 +body#seafoam {
  73 + background: @seafoam;
  74 + color: @red;
  75 +
  76 + a {
  77 + color: @navy;
  78 + }
  79 + #logo a {
  80 + background: url(../images/wordmark.red.png);
  81 + }
  82 + .thumbnail {
  83 + border-color: @red;
  84 + }
  85 + .category_card {
  86 + background: @red;
  87 + color: @seafoam;
  88 + }
  89 + .tooltip {
  90 + background: @navy;
  91 + color: @seafoam;
  92 + }
  93 +}
  94 +// RED
  95 +body#red {
  96 + background: @red;
  97 + color: @seafoam;
  98 +
  99 + a {
  100 + color: @yellow;
  101 + }
  102 + #logo a {
  103 + background: url(../images/wordmark.seafoam.png);
  104 + }
  105 + .thumbnail {
  106 + border-color: @seafoam;
  107 + }
  108 + .category_card {
  109 + background: @yellow;
  110 + color: @navy;
  111 + }
  112 + .tooltip {
  113 + background: @yellow;
  114 + color: @navy;
  115 + }
  116 +}
  117 +// NAVY
  118 +body#navy {
  119 + background: @navy;
  120 + color: @yellow;
  121 +
  122 + a {
  123 + color: @seafoam;
  124 + }
  125 + #logo a {
  126 + background: url(../images/wordmark.yellow.png);
  127 + }
  128 + .thumbnail {
  129 + border-color: @yellow;
  130 + }
  131 + .category_card {
  132 + background: @yellow;
  133 + color: @navy;
  134 + }
  135 + .tooltip {
  136 + background: @yellow;
  137 + color: @navy;
  138 + }
  139 +}
45 140
46 141 /*--------------------------------------------------------------------------
47 142 Misc Tag Setup
@@ -82,7 +177,6 @@ header {
82 177 }
83 178
84 179 .timer {
85   - color: @red;
86 180 font-weight: bold;
87 181 position: absolute;
88 182 bottom: 0;
@@ -153,7 +247,6 @@ Navigation
153 247 margin: 0 10px;
154 248
155 249 a {
156   - color: @navy;
157 250 font-weight: bold;
158 251 text-transform: uppercase;
159 252 }
@@ -169,6 +262,7 @@ Footer
169 262 --------------------------------------------------------------------------*/
170 263 #main-footer {
171 264 @footer-height: 50px;
  265 + color: @navy;
172 266 position: fixed;
173 267 bottom: 0;
174 268 left: 0;
@@ -177,6 +271,9 @@ Footer
177 271 background: white;
178 272 z-index: 10000000000;
179 273
  274 + a {
  275 + color: @navy !important;
  276 + }
180 277 #colour-picker {
181 278 position: absolute;
182 279 left: 30px;
@@ -192,10 +289,13 @@ Footer
192 289 &.active a {
193 290 position: relative;
194 291 bottom: -2px;
195   - border: 2px solid black;
  292 + border: 2px solid black !important;
196 293 }
197 294 &#set-bg-white a {
198 295 background: white;
  296 + position: relative;
  297 + bottom: -2px;
  298 + border: 2px solid #ddd;
199 299 }
200 300 &#set-bg-yellow a {
201 301 background: @yellow;
@@ -230,7 +330,7 @@ Footer
230 330 background: url(../images/social.twitterbird.png) no-repeat left center;
231 331
232 332 li > a:last-child {
233   - color: @red;
  333 + color: @red !important;
234 334 }
235 335 }
236 336 #social-links {
@@ -242,6 +342,7 @@ Footer
242 342 a {
243 343 display: inline-block;
244 344 text-indent: -5000px;
  345 + vertical-align: middle;
245 346 }
246 347 &#social-media-facebook a {
247 348 width: 8px;

0 comments on commit 3492666

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