Skip to content

Commit cbc2117

Browse files
levkowetzlevkowetz
committed
Colour tweaks, lightening or darkening various background colours. Cream paper for documents (using the yellow palette colour). Using names for the brand colours, instead of repeating hex colour codes. Changed font set to PT Serif/Sans Caption/Mono. Added settings for a posible halloween font set.
 - Legacy-Id: 9404
1 parent b81c169 commit cbc2117

1 file changed

Lines changed: 44 additions & 30 deletions

File tree

‎bootstrap/less/variables.less‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
//
1+
// -*- mode: c -*-
22
// Variables
33
// --------------------------------------------------
44

@@ -14,24 +14,26 @@
1414
@gray-light: lighten(@gray-base, 46.7%); // #777
1515
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
1616

17+
@gray-doc-background: #fafafa; // was #f5f5f5
18+
1719
// Brand palette
1820
// http://www.colourlovers.com/palette/3702908/Key_West_Sunset
1921
//
20-
// space blue #2c254a;
21-
// time purple #59356b;
22-
// mauve #b05683;
23-
// orange #f69f74;
24-
// yellow #f8e16d;
22+
@brand-blue: #2c254a; // space blue
23+
@brand-purple: #59356b; // time purple
24+
@brand-mauve: #b05683;
25+
@brand-orange: #f69f74;
26+
@brand-yellow: #f8e16d;
2527
//
2628
// Secondary colours, not part of the primary palette
27-
// green #69fc2c;
28-
// red #d4584d;
29+
@brand-green: #69fc2c;
30+
@brand-red: #d4584d;
2931

30-
@brand-primary: #2c254a; // space blue
31-
@brand-success: darken(#69fc2c, 20%); // green
32-
@brand-info: darken(#f8e16d, 50%); // yellow
33-
@brand-warning: #f69f74; // orange
34-
@brand-danger: #d4584d; // red
32+
@brand-primary: @brand-blue; // space blue
33+
@brand-success: darken(@brand-green, 20%); // green
34+
@brand-info: darken(@brand-yellow, 10%); // yellow
35+
@brand-warning: @brand-orange; // orange
36+
@brand-danger: @brand-red; // red
3537

3638

3739
//== Scaffolding
@@ -55,11 +57,20 @@
5557
//
5658
//## Font, line-height, and color for body text, headings, and more.
5759

58-
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
59-
@font-family-serif: Georgia, "Times New Roman", Times, serif;
60+
@font-family-sans-serif: "PT Sans", Helvetica, Arial, sans-serif;
61+
@font-family-serif: "PT Serif", serif;
6062
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
61-
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
62-
@font-family-base: @font-family-sans-serif;
63+
@font-family-monospace: "PT Mono", Menlo, Monaco, Consolas, monospace;
64+
@font-family-base: @font-family-serif;
65+
66+
// Halloween
67+
//@font-family-sans-serif: "IM Fell English SC", Helvetica, Arial, sans-serif;
68+
//@font-family-serif: "IM Fell English", serif;
69+
////** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
70+
//@font-family-monospace: "Nova Mono", Menlo, Monaco, Consolas, monospace;
71+
//@font-family-base: @font-family-serif;
72+
73+
6374

6475
@font-size-base: 14px;
6576
@font-size-large: ceil((@font-size-base * 1.189)); // ~18px
@@ -78,8 +89,11 @@
7889
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
7990

8091
//** By default, this inherits from the `<body>`.
81-
@headings-font-family: inherit;
82-
@headings-font-weight: 500;
92+
@headings-font-family: "PT Sans Caption", sans-serif;
93+
94+
//@headings-font-family: "IM Fell DW Pica", serif; // Halloween
95+
96+
@headings-font-weight: 400;
8397
@headings-line-height: 1.1;
8498
@headings-color: inherit;
8599

@@ -170,7 +184,7 @@
170184
@btn-success-border: darken(@btn-success-bg, 5%);
171185

172186
@btn-info-color: #fff;
173-
@btn-info-bg: lighten(@brand-info, 30%);
187+
@btn-info-bg: @brand-info;
174188
@btn-info-border: darken(@btn-info-bg, 5%);
175189

176190
@btn-warning-color: #fff;
@@ -504,19 +518,19 @@
504518
//## Define colors for form feedback states and, by default, alerts.
505519

506520
@state-success-text: darken(@brand-success, 70%);
507-
@state-success-bg: lighten(@brand-success, 30%);
521+
@state-success-bg: lighten(@brand-success, 40%);
508522
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
509523

510-
@state-info-text: @brand-primary;
511-
@state-info-bg: lighten(@brand-primary, 70%);
524+
@state-info-text: darken(@brand-info, 70%);
525+
@state-info-bg: lighten(@brand-info, 32%);
512526
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
513527

514-
@state-warning-text: darken(@brand-info, 70%);
515-
@state-warning-bg: lighten(@brand-info, 70%);
528+
@state-warning-text: darken(@brand-warning, 70%);
529+
@state-warning-bg: lighten(@brand-warning, 10%);
516530
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
517531

518-
@state-danger-text: darken(@brand-warning, 70%);
519-
@state-danger-bg: lighten(@brand-warning, 70%);
532+
@state-danger-text: darken(@brand-danger, 70%);
533+
@state-danger-bg: lighten(@brand-danger, 10%);
520534
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
521535

522536

@@ -842,8 +856,8 @@
842856
@kbd-color: #fff;
843857
@kbd-bg: #333;
844858

845-
@pre-bg: #f5f5f5;
846-
@pre-color: @gray-dark;
859+
@pre-bg: lighten(@brand-yellow, 28%);
860+
@pre-color: @gray-base;
847861
@pre-border-color: #ccc;
848862
@pre-scrollable-max-height: 340px;
849863

@@ -863,7 +877,7 @@
863877
//** Blockquote small color
864878
@blockquote-small-color: @gray-light;
865879
//** Blockquote font size
866-
@blockquote-font-size: (@font-size-base * 1.25);
880+
@blockquote-font-size: (@font-size-base * 1.189);
867881
//** Blockquote border color
868882
@blockquote-border-color: @gray-lighter;
869883
//** Page header border color

0 commit comments

Comments
 (0)