Skip to content
Newer
Older
100644 479 lines (399 sloc) 8.1 KB
44022c4 @growdigital Added some files and that
authored
1 /* === jrayson portfolio site Sass stylesheet === */
5d20a73 @growdigital Added jquery library
authored
2
44022c4 @growdigital Added some files and that
authored
3 /* == Index == */
4 /* 1 Variables
5 2 Mixins
6 3 Grid
7 4 Typography
8 */
9
10 // 'Variables
11 // ==========
12 // Colours
70e9ead @growdigital Styled header
authored
13 $darkness: #1a2023;
14 $darkless: #283135; //#283135
6c8d9d9 @growdigital Work on footer
authored
15 $darkmid: #70787a;
44022c4 @growdigital Added some files and that
authored
16 $darklite: #c4c8c9;
17 $hilite: #e4461b;
18 $page: #fad994;
19 $page-lite: #fbe3af;
20 $page-bg: #fef9ef;
21 $link-lite: #c69779;
6c8d9d9 @growdigital Work on footer
authored
22 $link-vis: #712222;
44022c4 @growdigital Added some files and that
authored
23 //
24 // Fonts
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
25 $fontbody: 'Sorts Mill Goudy',Georgia,Times,'Times New Roman',serif;
26 $fonthead: 'Old Standard TT',Palatino,Georgia,Times,'Times New Roman',serif;
27 $fontxtra: 'Open Sans',Helvetica,Arial,sans-serif;
44022c4 @growdigital Added some files and that
authored
28 //
29 // 'Mixins
30 // =======
31 //
32 // 'rem' mixin converts pixel values to rem values
33 // https://gist.github.com/1778907 for info
34 $baseline_px: 10px;
35 @mixin rem($property, $px_values) {
36 $baseline_rem: ($baseline_px / 1rem);
37 #{$property}: $px_values;
38 @if type-of($px_values) == 'number' {
39 #{$property}: $px_values / $baseline_rem;
40 }
41 @else {
42 $rem_values: ();
43 @each $value in $px_values {
44 @if $value == 0 {
45 $rem_values: append($rem_values, $value);
46 }
47 @else {
48 $rem_values: append($rem_values, ($value / $baseline_rem) );
49 }
50 }
51 #{$property}: $rem_values;
52 }
53 }
54 //
70e9ead @growdigital Styled header
authored
55 // Border radius mixin
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
56 @mixin rounded($radius) {
70e9ead @growdigital Styled header
authored
57 -moz-border-radius-: $radius;
58 -webkit-border-radius: $radius;
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
59 border-radius: $radius;
70e9ead @growdigital Styled header
authored
60 }
44022c4 @growdigital Added some files and that
authored
61 //
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
62 // Box shadow mixin
63 @mixin box-shadow ($x, $y, $offset, $rgba) {
64 -moz-box-shadow: $x $y $offset $rgba;
65 -webkit-box-shadow: $x $y $offset $rgba;
66 box-shadow: $x $y $offset $rgba;
67 }
68
fad1eed @growdigital grid.scss now working
authored
69 /* 'Grid
70 * ===== */
71 @import 'grid.scss';
72
dd3aef5 @growdigital Basic page built, home page only
authored
73 #content,
74 #footer-main nav {
9335e36 @growdigital Fluid grid
authored
75 @include column(8);
fad1eed @growdigital grid.scss now working
authored
76 }
dd3aef5 @growdigital Basic page built, home page only
authored
77 #sidebar,
78 #footer-main .footnote {
9335e36 @growdigital Fluid grid
authored
79 @include column(4);
fad1eed @growdigital grid.scss now working
authored
80 }
81
9335e36 @growdigital Fluid grid
authored
82
83 //@media screen and (max-width: 1024px) {
84
85 // #content {
86 // @include column(9);
87 // }
88 // #sidebar {
89 // @include column(3);
90 // }
91
92 //}
93
94 //@media screen and (max-width: 600px) {
95
96 // #content {
97 // @include column(12);
98 // }
99 // #sidebar {
100 // @include column(12);
101 // }
102
103 //}
104
44022c4 @growdigital Added some files and that
authored
105 /* 'Typography
106 * =========== */
107 body {
108 color: $darkness;
109 font-family: $fontbody;
110 }
111
112 h1,h2,h3 {
113 font-family: $fonthead;
114 font-style: italic;
115 font-weight: normal;
116 }
117
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
118 h4,h5 {
44022c4 @growdigital Added some files and that
authored
119 font-family: $fontbody;
120 }
121
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
122 h6 {
123 font-family: $fontxtra;
124 }
125
3c62a5b @growdigital Styled links, content and sidebar
authored
126 .big {
127 font-size: larger;
128 }
129
130 /* 'Links
131 * ====== */
132 a:link {
6c8d9d9 @growdigital Work on footer
authored
133 color: $hilite;
3c62a5b @growdigital Styled links, content and sidebar
authored
134 text-decoration: none;
135 }
136
137 a:visited {
138 color: $link-vis;
139 }
140
141 a:hover {
142 background-color: $page-lite;
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
143 @include rounded(3px);
3c62a5b @growdigital Styled links, content and sidebar
authored
144 color: $hilite;
6c8d9d9 @growdigital Work on footer
authored
145 text-decoration: underline;
3c62a5b @growdigital Styled links, content and sidebar
authored
146 }
147
148 h1 a:link,h1 a:visited,
149 h2 a:link,h2 a:visited,
150 h3 a:link,h3 a:visited,
151 h4 a:link,h4 a:visited,
152 h5 a:link,h5 a:visited {
153 color: $hilite;
154 text-decoration: none;
155 }
156
157 h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
6c8d9d9 @growdigital Work on footer
authored
158 text-decoration: underline;
159 }
160
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
161 h6, .supporting {
6c8d9d9 @growdigital Work on footer
authored
162 font-family: $fontxtra;
163 @include rem('font-size',9px);
164 @include rem('letter-spacing',2px);
165 text-transform: uppercase;
3c62a5b @growdigital Styled links, content and sidebar
authored
166 }
167
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
168 h6 {
169 text-align: center;
170 }
171
172 h6 a:link, h6 a:visited {
173 color: $link-lite;
174 }
175
3c62a5b @growdigital Styled links, content and sidebar
authored
176 /* 'Layout
177 * ======= */
178
179 #container {
180 margin: 0 auto;
181 width: 93.2%;
182 }
183
184 #footer-main {
185 clear: both;
186 }
187
70e9ead @growdigital Styled header
authored
188 /* Header */
189 #header-main {
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
190 background: $darkness url(/jaketheme/images/filigree-dark.png) no-repeat 96% 89%;
a4523e6 @growdigital Fixed header h1 margin prob in chrome
authored
191 @include rem('padding',37px 0 19px 58px);
70e9ead @growdigital Styled header
authored
192 position: relative;
a4523e6 @growdigital Fixed header h1 margin prob in chrome
authored
193 @include clearfix;
70e9ead @growdigital Styled header
authored
194 }
195
44022c4 @growdigital Added some files and that
authored
196 #header-main h1 {
197 color: $hilite;
198 font-family: $fontbody;
199 @include rem('font-size',66px);
200 font-style: normal;
201 font-weight: normal;
70e9ead @growdigital Styled header
authored
202 line-height: 1;
203 @include rem('margin',0 0 27px);
204 }
205
206 #header-main h1 a:link,
207 #header-main h1 a:visited {
208 color: $hilite;
3c62a5b @growdigital Styled links, content and sidebar
authored
209 @include rem('padding-left',3px);
70e9ead @growdigital Styled header
authored
210 text-decoration: none;
a4523e6 @growdigital Fixed header h1 margin prob in chrome
authored
211 text-shadow: 1px 1px 1px #111;
70e9ead @growdigital Styled header
authored
212 }
213
214 #header-main h1 a:hover {
3c62a5b @growdigital Styled links, content and sidebar
authored
215 background-color: transparent;
70e9ead @growdigital Styled header
authored
216 color: $page-bg;
44022c4 @growdigital Added some files and that
authored
217 }
218
219 #header-main h2 {
220 color: $darklite;
221 font-family: $fontxtra;
70e9ead @growdigital Styled header
authored
222 @include rem('font-size',13px);
44022c4 @growdigital Added some files and that
authored
223 font-style: normal;
224 font-weight: normal;
70e9ead @growdigital Styled header
authored
225 @include rem('letter-spacing',2px);
226 @include rem('margin',0 0 20px);
3c62a5b @growdigital Styled links, content and sidebar
authored
227 @include rem('padding-left',8px);
44022c4 @growdigital Added some files and that
authored
228 text-transform: uppercase;
229 }
230
6c8d9d9 @growdigital Work on footer
authored
231 /* Footer */
232
233 #footer-main {
234 color: $darklite;
235 font-family: $fontxtra;
236 @include rem('font-size',11px);
237 @include rem('letter-spacing',1.5px);
238 }
239
240 #footer-main a:link,
241 #footer-main a:visited {
242 color: $link-lite;
243 }
244
245 #footer-main a:hover {
246 background-color: transparent;
247 color: $hilite;
248 }
249
250 #footer-main .menu li {
251 @include rem('margin-right',24px);
252 }
253
254 #footer-main .menu li a {
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
255 background: $darkless url(/jaketheme/images/icons-social.png) no-repeat 0 0;
6c8d9d9 @growdigital Work on footer
authored
256 border: 2px solid $darkmid;
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
257 @include rounded(3px);
dd3aef5 @growdigital Basic page built, home page only
authored
258 height: 56px;
259 width: 56px;
260 }
261 #footer-main li.twitter a {
262 background-position: 0 0;
263 }
264 #footer-main li.github a {
265 background-position: -56px 0;
266 }
267 #footer-main li.linkedin a {
268 background-position: -112px 0;
269 }
270 #footer-main li.feed a {
271 background-position: -168px 0;
272 }
273
274 #footer-main .menu li a:hover {
275 background-color: $darkmid;
276 border-color: $darklite;
277 }
278
279 hr {
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
280 background: transparent url(/jaketheme/images/filigree-lite.png) no-repeat center center;
dd3aef5 @growdigital Basic page built, home page only
authored
281 border: 0;
282 height: 11px;
283 width: 146px;
6c8d9d9 @growdigital Work on footer
authored
284 }
285
286 /* Generic nav menu */
287 ul.menu li {
288 float: left;
289 }
290
291 ul.menu li a {
292 display: block;
7857174 @growdigital More link styling
authored
293 }
294
70e9ead @growdigital Styled header
authored
295 /* Primary navigation */
296 #primary-nav li {
297 font-family: $fontxtra;
298 @include rem('font-size',15px);
299 }
300
3c62a5b @growdigital Styled links, content and sidebar
authored
301 #primary-nav li.current a {
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
302 color: #ffffff;
303 @include box-shadow(0, 0, 7px, rgba(255, 255, 255, 0.7));
3c62a5b @growdigital Styled links, content and sidebar
authored
304 }
305
70e9ead @growdigital Styled header
authored
306 #primary-nav li a {
307 background-color: $darkless;
3c62a5b @growdigital Styled links, content and sidebar
authored
308 // border: 2px solid $darkless;
70e9ead @growdigital Styled header
authored
309 @include rem('letter-spacing',1.3px);
310 @include rem('line-height',26px);
a4523e6 @growdigital Fixed header h1 margin prob in chrome
authored
311 @include rem('padding',0 12px 1px);
70e9ead @growdigital Styled header
authored
312 @include rem('margin-right',26px);
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
313 @include rounded(3px);
a4523e6 @growdigital Fixed header h1 margin prob in chrome
authored
314 text-shadow: 1px 1px 1px $darkness ;
70e9ead @growdigital Styled header
authored
315 }
316
317 #primary-nav a:link, #primary-nav a:visited {
318 color: $darklite;
319 text-decoration: none;
320 }
321
322 #primary-nav li a:hover {
323 background-color: $hilite;
a4523e6 @growdigital Fixed header h1 margin prob in chrome
authored
324 color: $page-bg;
70e9ead @growdigital Styled header
authored
325 }
44022c4 @growdigital Added some files and that
authored
326
6c8d9d9 @growdigital Work on footer
authored
327 /* Lists */
328 #content li, #sidebar li {
329 line-height: 1.6;
330 }
331
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
332 /* Forms */
333 input, textarea {
334 font-family: $fonthead;
335 @include rem('font-size',14px);
336 }
337
338 label {
339 display: block;
d17d86c @growdigital contact form
authored
340 @include rem('line-height',33px);
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
341 float: left;
342 @include rem('width',68px);
343 }
344
345 .field, textarea {
346 border: 2px solid $darklite;
347 display: block;
d17d86c @growdigital contact form
authored
348 @include rem('padding',3px 0 0 3px);
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
349 @include rounded(3px);
350 @include rem('width',280px);
351 }
352
d17d86c @growdigital contact form
authored
353 .field[type="text"] {
354 @include rem('height',24px);
355 }
356
357 .field:focus, textarea:focus {
358 border-color: $hilite;
359 }
360
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
361 textarea {
d17d86c @growdigital contact form
authored
362 @include rem('height',48px);
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
363 }
6c8d9d9 @growdigital Work on footer
authored
364
d17d86c @growdigital contact form
authored
365 .button {
366 font-family: $fontbody;
367 font-weight: bold;
368 @include rem('margin-left',68px);
369 @include rem('padding-top',3px);
370 }
371
4f80a5c @growdigital postponed contact form
authored
372 address {
373 @include rem('margin-left',68px);
374 }
375
2910940 @growdigital suspended contact form and blog categories
authored
376 // Articles
377
378 section.articles > ol li {
379 list-style: none;
380 }
381
382 section.articles > ol {
383 padding: 0;
384 }
385
d17d86c @growdigital contact form
authored
386 // ===
387
44022c4 @growdigital Added some files and that
authored
388 body {
389 background-color: $page-bg;
390 }
391
3c62a5b @growdigital Styled links, content and sidebar
authored
392 #container {
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
393 background-color: $page-lite;
394 @include box-shadow(0, 0, 37px, rgba(0, 0, 0, 0.25));
3c62a5b @growdigital Styled links, content and sidebar
authored
395 }
396
44022c4 @growdigital Added some files and that
authored
397 #content {
398 background-color: $page;
3c62a5b @growdigital Styled links, content and sidebar
authored
399 @include rem('padding',34px 0 20px 0);
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
400 @include box-shadow(4px, 0, 9px, rgba(0, 0, 0, 0.3));
44022c4 @growdigital Added some files and that
authored
401 }
402
3c62a5b @growdigital Styled links, content and sidebar
authored
403 #content > article {
404 @include rem('margin',0 24px 0 60px);
405 }
406
407 #sidebar > article {
408 @include rem('padding',44px 20px 0 30px);
44022c4 @growdigital Added some files and that
authored
409 }
410
411 #footer-main {
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
412 background: $darkness url(/jaketheme/images/filigree-dark.png) no-repeat 97% 9%;
dd3aef5 @growdigital Basic page built, home page only
authored
413 @include rem('padding',40px 0 22px);
414 @include clearfix;
415 }
416
417 #footer-main p {
418 @include rem('font-size',9px);
419 line-height: 1.6;
420 }
421
422 #footer-main nav ul,#footer-main nav p {
423 @include rem('padding',0 0 0 81px);
424 }
425
426 #footer-main .footnote {
427 text-align: center;
428 }
429
d23e9fc @growdigital Created portfolio gallery, tweaked darned effects, halfway through form
authored
430 /* Portfolio
431 * --------- */
432 #content-portfolio {
433 background-color: $darklite;
434 @include rem('padding',34px 60px 20px 60px);
435
436 }
437
438 /* Galleria */
439 #galleria {
440 height: 500px;
441 }
442 .galleria-container {
443 margin: 0 auto;
444 }
445
446
7c0a3a8 @growdigital Added links to category pages for blog
authored
447 article p.supporting { // For supporting text supporting h1
448 @include rem('margin',4px 0 12px);
449 }
450
dd3aef5 @growdigital Basic page built, home page only
authored
451 /* Hacks
452 * ----- */
453
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
454
455
dd3aef5 @growdigital Basic page built, home page only
authored
456 /* Micro clearfix
457 * For modern browsers http://ow.ly/91hqf */
458 .cf:before,
459 .cf:after {
460 content: "";
461 display: table;
462 }
463 .cf:after {
464 clear: both;
465 }
466 /* For IE 6/7 (trigger hasLayout) */
467 .cf {
468 zoom: 1;
469 }
470
471 /* Hide text */
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
472 .hidden span,
473 .hidden h1 {
dd3aef5 @growdigital Basic page built, home page only
authored
474 display: block;
a79da0e @growdigital Tweaked custom headlines, added box shadow mixin
authored
475 overflow: hidden;
dd3aef5 @growdigital Basic page built, home page only
authored
476 position: absolute;
477 text-indent: -9999em;
3c62a5b @growdigital Styled links, content and sidebar
authored
478 }
Something went wrong with that request. Please try again.