magic_stylez 0.0.0.54 → 0.0.0.55

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -0
  3. data/lib/magic_stylez/version.rb +1 -1
  4. data/test/dummy/app/assets/javascripts/app.js.coffee +5 -0
  5. data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +21 -2
  6. data/test/dummy/app/assets/stylesheets/application.css.scss +63 -13
  7. data/test/dummy/app/assets/stylesheets/corporate/_colors.scss +1 -1
  8. data/test/dummy/app/assets/stylesheets/corporate/_fonts.scss +83 -122
  9. data/test/dummy/app/views/front/start.html.erb +10 -2
  10. data/test/dummy/app/views/layouts/application.html.erb +17 -0
  11. data/test/dummy/app/views/layouts/blank.html.erb +1 -0
  12. data/test/dummy/public/html/aside-nav.html +3 -2
  13. data/test/dummy/public/html/fixed-header.html +3 -2
  14. data/test/dummy/public/html/fixed-subnav.html +3 -2
  15. data/test/dummy/public/html/index.html +28 -5
  16. data/test/dummy/public/html/slidebar-header.html +3 -2
  17. data/test/dummy/public/html/slidebar-subnav.html +3 -2
  18. data/vendor/assets/stylesheets/corporate/_colors.scss +1 -1
  19. data/vendor/assets/stylesheets/corporate/_fonts.scss +83 -122
  20. data/vendor/assets/stylesheets/magic/helper/_text.scss +68 -0
  21. data/vendor/assets/stylesheets/magic/layout/_section.scss +13 -0
  22. data/vendor/assets/stylesheets/magic/lib/_text.scss +47 -0
  23. data/vendor/assets/stylesheets/magic/lib/_twbs.scss +0 -1
  24. data/vendor/assets/stylesheets/magic-min.scss +3 -0
  25. data/vendor/assets/stylesheets/magic-stylez.scss +3 -0
  26. metadata +3 -5
  27. data/test/dummy/app/assets/stylesheets/corporate/_typo.scss +0 -85
  28. data/vendor/assets/stylesheets/corporate/_typo.scss +0 -85
@@ -84,7 +84,7 @@ $link-color: $brand-primary !default;
84
84
  //** Link hover color set via `darken()` function.
85
85
  $link-hover-color: darken($link-color, 15%) !default;
86
86
 
87
-
87
+ $headings-color: inherit !default;
88
88
 
89
89
 
90
90
 
@@ -1,159 +1,120 @@
1
1
  //
2
2
  // Magic-Stylez - Fonts
3
3
  //
4
- // if you like to change values, remove the '!default' flag!
5
4
  //
5
+ // webfonts
6
6
  //
7
- // F O N T S
7
+ // goolge
8
+ // $magicSans: "Open Sans", $sansFontFamily;
9
+ // $magicCondensedSans: "Open Sans Condensed", $sansFontFamily;
10
+ // $magicHandwritten: 'Satisfy', cursive;
8
11
  //
9
-
10
- $sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
11
- $serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
12
- $monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
13
-
12
+ // typekit (Adobe)
13
+ // $magicSans: "Montserrat", $sansFontFamily;
14
+ // $magicCondensedSans: "Lato", $sansFontFamily;
15
+ // $magicHandwritten: "ff-market-web", cursive;
14
16
 
15
17
  //
16
- // webfonts
18
+ // F O N T S
17
19
  //
20
+ $sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
21
+ $serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
22
+ $monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
18
23
 
19
- // goolge
20
- // $magicSans: "Open Sans", $sansFontFamily;
21
- // $magicCondensedSans: "Open Sans Condensed", $sansFontFamily;
22
- // $magicHandwritten: 'Satisfy', cursive;
24
+ $magicSans: $sansFontFamily !default;
25
+ $magicCondensedSans: $sansFontFamily !default;
26
+ $magicHandwritten: 'Gloria Hallelujah', cursive !default;
23
27
 
24
- // typekit (Adobe)
25
- // $magicSans: "Montserrat", $sansFontFamily;
26
- // $magicCondensedSans: "Lato", $sansFontFamily;
27
- // $magicHandwritten: "ff-market-web", cursive;
28
-
29
- $magicSans: $sansFontFamily;
30
- $magicCondensedSans: $sansFontFamily;
31
- $magicHandwritten: 'Gloria Hallelujah', cursive;
32
-
33
-
34
-
35
-
36
- // Open Sans
37
- .sans {
38
- font-family: $magicSans;
39
- font-weight: 400;
40
- &.thin, .thin { font-weight: 300; }
41
- &.regular, .regular { font-weight: 400; }
42
- &.sbold, .sbold { font-weight: 600; }
43
- &.bold, .bold { font-weight: 700; }
44
- &.ebold, .ebold { font-weight: 800; }
45
- }
46
- @mixin sansThin {
47
- // font-family: 'Open Sans', sans-serif;
48
- font-family: $magicSans;
49
- font-weight: 300;
50
- }
51
- @mixin sansRegular {
52
- font-family: $magicSans;
53
- font-weight: 400;
54
- }
55
- @mixin sansSemi {
56
- font-family: $magicSans;
57
- font-weight: 600;
58
- }
59
- @mixin sansBold {
60
- font-family: $magicSans;
61
- font-weight: 700;
62
- }
63
-
64
-
65
- // Open Sans Condensed
66
- .sansCondensed {
67
- font-family: $magicCondensedSans;
68
- font-weight: 300;
69
- &.thin, .thin { font-weight: 300; }
70
- &.bold, .bold { font-weight: 700; }
71
- }
72
- @mixin sansCondensedThin {
73
- font-family: $magicCondensedSans;
74
- font-weight: 300;
75
- }
76
- @mixin sansCondensedBold {
77
- font-family: $magicCondensedSans;
78
- font-weight: 700;
79
- }
80
-
81
-
82
- // Specials
83
- .handWrittenFont {
84
- font-family: $magicHandwritten;
85
- font-weight: 400;
86
- }
87
- @mixin handWrittenFont {
88
- font-family: $magicHandwritten;
89
- font-weight: 400;
90
- }
28
+ // variable
29
+ $smallReadFont: $magicCondensedSans !default;
30
+ $readFont: $magicSans !default;
31
+ $bigFont: $magicSans !default;
32
+ $alternateBigFont: $magicSans !default;
33
+ $dekoFont: $magicHandwritten !default;
91
34
 
92
35
 
36
+ $font-family-sans-serif: $readFont !default;
37
+ $font-family-serif: $serifFontFamily !default;
38
+ $font-family-base: $smallReadFont !default;
39
+ $font-family-monospace: $monoFontFamily !default;
40
+ $font-family-handwriten: $magicHandwritten !default;
93
41
 
94
- // variable
95
- $smallReadFont: $magicCondensedSans;
96
- $readFont: $magicSans;
97
- $bigFont: $magicSans;
98
- $alternateBigFont: $magicSans;
99
- $dekoFont: $magicHandwritten;
100
42
 
43
+ // Short-Forms
44
+ $font-family-sans: $font-family-sans-serif !default;
45
+ $font-family-mono: $font-family-monospace !default;
46
+ $font-family-hand: $font-family-handwriten !default;
47
+ $font-family-sm: $smallReadFont !default;
48
+ $font-family-lg: $bigFont !default;
101
49
 
102
- // mixin
103
- @mixin smallReadFont { font-family: $smallReadFont; }
104
- @mixin readFont { font-family: $readFont; }
105
- @mixin bigFont { font-family: $bigFont; }
106
- @mixin alternateBigFont { font-family: $alternateBigFont; }
107
- @mixin dekoFont { font-family: $dekoFont; }
50
+ // $headings-font-family: inherit !default;
51
+ $headings-font-family: $bigFont !default;
108
52
 
109
- .smallReadFont { @include smallReadFont; }
110
- .readFont { @include readFont; }
111
- .bigFont { @include bigFont; }
112
- .alternateBigFont { @include alternateBigFont; }
113
- .dekoFont { @include dekoFont; }
114
53
 
54
+ //
55
+ // F O N T - S I Z E S
56
+ //
57
+ $font-size-base: 15px !default;
58
+ $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
59
+ $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
115
60
 
61
+ $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
62
+ $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
63
+ $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
64
+ $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
65
+ $font-size-h5: $font-size-base !default;
66
+ $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
116
67
 
68
+ $magicDefaultFontSize: 13px !default;
69
+ $magicDefaultLineHight: 18px !default;
117
70
 
71
+ $loud-factor: 1.25 !default;
72
+ $louder-factor: 1.75 !default;
118
73
 
119
74
 
120
75
 
76
+ //
77
+ // L I N E - H E I G H T S
78
+ //
79
+ //** Unit-less `line-height` for use in components like buttons.
80
+ $line-height-base: 1.428571429 !default; // 20/14
81
+ $line-height-large: 1.33 !default;
82
+ $line-height-small: 1.5 !default;
121
83
 
84
+ //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
85
+ $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
86
+ $line-height-computed-lg: floor(($font-size-large * $line-height-large)) !default; // ~20px
87
+ $line-height-computed-sm: floor(($font-size-small * $line-height-small)) !default; // ~20px
88
+ $line-height-computed-xs: floor(($font-size-small * $line-height-small)) !default; // ~20px
89
+ //== Headings
90
+ $headings-line-height: 1.1 !default;
122
91
 
123
92
 
124
- // C S S - F O N T S
125
93
 
126
- @mixin eingabeText { font-family: $lucida-grande; }
94
+ //
95
+ // F O N T - W E I G H T S
96
+ //
97
+ $font-weight-bold: 600 !default;
98
+ $font-weight-thin: 200 !default;
99
+ //== Headings
100
+ $headings-font-weight: 500 !default;
101
+ //== Buttons
102
+ $btn-font-weight: normal !default;
127
103
 
128
- @mixin profileText {
129
- font-family: $lucida-grande;
130
- color: #333;
131
- font-size: 12px;
132
- line-height: 20px;
133
- }
104
+ $magicSans-font-weight-thin: 300 !default;
105
+ $magicSans-font-weight-regular: 400 !default;
106
+ $magicSans-font-weight-semi: 600 !default;
107
+ $magicSans-font-weight-bold: 700 !default;
108
+ $magicSans-font-weight-extra: 800 !default;
134
109
 
135
- @mixin titelText {
136
- @include sansSemi;
137
- font-size: 14px;
138
- line-height: 20px;
139
- }
110
+ $magicCondensedSans-font-weight-thin: 300 !default;
111
+ $magicCondensedSans-font-weight-regular: 400 !default;
112
+ $magicCondensedSans-font-weight-bold: 700 !default;
140
113
 
141
- @mixin subTextSmall {
142
- @include sansRegular;
143
- font-size: 12px;
144
- line-height: 20px;
145
- }
114
+ $magicHandwritten-font-weight: 400 !default;
146
115
 
147
116
 
148
- // ------------------------------- S C H R I F T G R O E S S E N -------------------------------
149
117
 
150
- $magicDefaultFontSize: 13px;
151
- $magicDefaultLineHight: 18px;
152
118
 
153
119
 
154
- @mixin magicDefaultFont {
155
- @include readFont;
156
- font-size: $magicDefaultFontSize;
157
- line-height: $magicDefaultLineHight;
158
- } // ..
159
120
 
@@ -0,0 +1,68 @@
1
+ .smallReadFont { @include smallReadFont; }
2
+ .readFont { @include readFont; }
3
+ .bigFont { @include bigFont; }
4
+ .alternateBigFont { @include alternateBigFont; }
5
+ .dekoFont { @include dekoFont; }
6
+
7
+ // Open Sans
8
+ .sans {
9
+ font-family: $magicSans;
10
+ font-weight: $magicSans-font-weight-regular;
11
+ &.thin, .thin { font-weight: $magicSans-font-weight-thin; }
12
+ &.regular, .regular { font-weight: $magicSans-font-weight-regular; }
13
+ &.sbold, .sbold { font-weight: $magicSans-font-weight-semi; }
14
+ &.bold, .bold { font-weight: $magicSans-font-weight-bold; }
15
+ &.ebold, .ebold { font-weight: $magicSans-font-weight-extra; }
16
+ }
17
+
18
+ // Open Sans Condensed
19
+ .sansCondensed {
20
+ font-family: $magicCondensedSans;
21
+ font-weight: $magicCondensedSans-font-weight-regular;
22
+ &.thin, .thin { font-weight: $magicCondensedSans-font-weight-thin; }
23
+ &.bold, .bold { font-weight: $magicCondensedSans-font-weight-bold; }
24
+ }
25
+
26
+ // Specials
27
+ .handWrittenFont {
28
+ font-family: $magicHandwritten;
29
+ font-weight: $magicHandwritten-font-weight;
30
+ }
31
+
32
+ // L O U D - T E X T
33
+ h1.loud, .h1.loud { font-size: ceil($font-size-h1 * $loud-factor); }
34
+ h2.loud, .h2.loud { font-size: ceil($font-size-h2 * $loud-factor); }
35
+ h3.loud, .h3.loud { font-size: ceil($font-size-h3 * $loud-factor); }
36
+ h4.loud, .h4.loud { font-size: ceil($font-size-h4 * $loud-factor); }
37
+ h5.loud, .h5.loud { font-size: ceil($font-size-h5 * $loud-factor); }
38
+ h6.loud, .h6.loud { font-size: ceil($font-size-h6 * $loud-factor); }
39
+
40
+ h1.louder, .h1.louder { font-size: ceil($font-size-h1 * $louder-factor); }
41
+ h2.louder, .h2.louder { font-size: ceil($font-size-h2 * $louder-factor); }
42
+ h3.louder, .h3.louder { font-size: ceil($font-size-h3 * $louder-factor); }
43
+ h4.louder, .h4.louder { font-size: ceil($font-size-h4 * $louder-factor); }
44
+ h5.louder, .h5.louder { font-size: ceil($font-size-h5 * $louder-factor); }
45
+ h6.louder, .h6.louder { font-size: ceil($font-size-h6 * $louder-factor); }
46
+
47
+
48
+ div, ul, ol, li, p, span {
49
+ &.loud {
50
+ @include sansCondensedThin;
51
+ font-size: ceil($font-size-base * $loud-factor);
52
+ }
53
+ &.louder {
54
+ @include sansCondensedThin;
55
+ font-size: ceil($font-size-base * $louder-factor);
56
+ }
57
+ &.highlight {
58
+ @include sansCondensedThin;
59
+ font-weight: 600;
60
+ font-size: ceil($font-size-base * $loud-factor);
61
+ }
62
+ &.bold { font-weight: bold; }
63
+ &.thin { font-weight: 200; }
64
+ }
65
+
66
+ ul, ol, li, p, span, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
67
+ &.brand { color: $brand-color; }
68
+ }
@@ -163,6 +163,19 @@
163
163
  border-right: solid 10px $section-soft-background;
164
164
  border-bottom: solid 10px $section-soft-background;
165
165
  }
166
+
167
+ &.one:after {
168
+ border-right: solid 10px $section-one-background;
169
+ border-bottom: solid 10px $section-one-background;
170
+ }
171
+ &.two:after {
172
+ border-right: solid 10px $section-two-background;
173
+ border-bottom: solid 10px $section-two-background;
174
+ }
175
+ &.three:after {
176
+ border-right: solid 10px $section-three-background;
177
+ border-bottom: solid 10px $section-three-background;
178
+ }
166
179
  }
167
180
 
168
181
 
@@ -1,3 +1,50 @@
1
+ // mixin
2
+ @mixin smallReadFont { font-family: $smallReadFont; }
3
+ @mixin readFont { font-family: $readFont; }
4
+ @mixin bigFont { font-family: $bigFont; }
5
+ @mixin alternateBigFont { font-family: $alternateBigFont; }
6
+ @mixin dekoFont { font-family: $dekoFont; }
7
+ @mixin magicDefaultFont {
8
+ @include readFont;
9
+ font-size: $magicDefaultFontSize;
10
+ line-height: $magicDefaultLineHight;
11
+ }
12
+ @mixin sansThin {
13
+ // font-family: 'Open Sans', sans-serif;
14
+ font-family: $magicSans;
15
+ font-weight: $magicSans-font-weight-thin;
16
+ }
17
+ @mixin sansRegular {
18
+ font-family: $magicSans;
19
+ font-weight: $magicSans-font-weight-regular;
20
+ }
21
+ @mixin sansSemi {
22
+ font-family: $magicSans;
23
+ font-weight: $magicSans-font-weight-semi;
24
+ }
25
+ @mixin sansBold {
26
+ font-family: $magicSans;
27
+ font-weight: $magicSans-font-weight-bold;
28
+ }
29
+ @mixin sansExtra {
30
+ font-family: $magicSans;
31
+ font-weight: $magicSans-font-weight-extra;
32
+ }
33
+ @mixin sansCondensedThin {
34
+ font-family: $magicCondensedSans;
35
+ font-weight: $magicCondensedSans-font-weight-thin;
36
+ }
37
+ @mixin sansCondensedBold {
38
+ font-family: $magicCondensedSans;
39
+ font-weight: $magicCondensedSans-font-weight-bold;
40
+ }
41
+
42
+ @mixin handWrittenFont {
43
+ font-family: $magicHandwritten;
44
+ font-weight: $magicHandwritten-font-weight;
45
+ }
46
+
47
+
1
48
  @mixin no_wrap {
2
49
  text-overflow: ellipsis;
3
50
  white-space: nowrap;
@@ -3,7 +3,6 @@
3
3
  // first import to be future save, than overwrite
4
4
  @import "corporate/colors";
5
5
  @import "corporate/fonts";
6
- @import "corporate/typo";
7
6
  @import "corporate/variables";
8
7
 
9
8
  @import "bootstrap/mixins";
@@ -20,6 +20,9 @@
20
20
  @import "magic/effects/shadows"; // (generates no code, when unused)
21
21
  // @import "magic/effects/reflections";
22
22
 
23
+ // text helper
24
+ @import "magic/helper/text";
25
+
23
26
  // load icons
24
27
  // @import "magic/icons/icomoon";
25
28
  // @import "magic/icons/magicons";
@@ -19,6 +19,9 @@
19
19
  @import "magic/effects/shadows";
20
20
  @import "magic/effects/reflections";
21
21
 
22
+ // text helper
23
+ @import "magic/helper/text";
24
+
22
25
  // load icons
23
26
  @import "magic/icons/icomoon";
24
27
  @import "magic/icons/magicons";
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: magic_stylez
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.0.54
4
+ version: 0.0.0.55
5
5
  platform: ruby
6
6
  authors:
7
7
  - Torsten Wetzel
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-09-19 00:00:00.000000000 Z
11
+ date: 2014-09-21 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -258,7 +258,6 @@ files:
258
258
  - test/dummy/app/assets/stylesheets/application.css.scss
259
259
  - test/dummy/app/assets/stylesheets/corporate/_colors.scss
260
260
  - test/dummy/app/assets/stylesheets/corporate/_fonts.scss
261
- - test/dummy/app/assets/stylesheets/corporate/_typo.scss
262
261
  - test/dummy/app/assets/stylesheets/corporate/_variables.scss
263
262
  - test/dummy/app/controllers/application_controller.rb
264
263
  - test/dummy/app/controllers/concerns/.keep
@@ -366,7 +365,6 @@ files:
366
365
  - vendor/assets/javascripts/magic/render_eco.js.coffee
367
366
  - vendor/assets/stylesheets/corporate/_colors.scss
368
367
  - vendor/assets/stylesheets/corporate/_fonts.scss
369
- - vendor/assets/stylesheets/corporate/_typo.scss
370
368
  - vendor/assets/stylesheets/corporate/_variables.scss
371
369
  - vendor/assets/stylesheets/magic-min.scss
372
370
  - vendor/assets/stylesheets/magic-stylez.scss
@@ -393,6 +391,7 @@ files:
393
391
  - vendor/assets/stylesheets/magic/helper/_crossed.scss
394
392
  - vendor/assets/stylesheets/magic/helper/_divider.scss
395
393
  - vendor/assets/stylesheets/magic/helper/_dots.scss
394
+ - vendor/assets/stylesheets/magic/helper/_text.scss
396
395
  - vendor/assets/stylesheets/magic/helper/_three_previews.scss
397
396
  - vendor/assets/stylesheets/magic/icons/icomoon.scss
398
397
  - vendor/assets/stylesheets/magic/icons/magicons.scss
@@ -486,7 +485,6 @@ test_files:
486
485
  - test/dummy/app/assets/stylesheets/application.css.scss
487
486
  - test/dummy/app/assets/stylesheets/corporate/_colors.scss
488
487
  - test/dummy/app/assets/stylesheets/corporate/_fonts.scss
489
- - test/dummy/app/assets/stylesheets/corporate/_typo.scss
490
488
  - test/dummy/app/assets/stylesheets/corporate/_variables.scss
491
489
  - test/dummy/app/controllers/application_controller.rb
492
490
  - test/dummy/app/controllers/concerns/.keep
@@ -1,85 +0,0 @@
1
- //
2
- // Magic-Stylez - Typo
3
- //
4
- // if you like to change values, remove the '!default' flag!
5
- //
6
- //
7
- //== Typography
8
- //
9
- //## Font, line-height, and color for body text, headings, and more.
10
-
11
- // $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
12
- $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
13
- //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
14
- $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
15
- // $font-family-base: $font-family-sans-serif !default;
16
-
17
-
18
- $font-family-sans-serif: $readFont;
19
- $font-family-base: $smallReadFont;
20
-
21
-
22
- $font-size-base: 15px !default;
23
- $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
24
- $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
25
-
26
- $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
27
- $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
28
- $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
29
- $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
30
- $font-size-h5: $font-size-base !default;
31
- $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
32
-
33
- //** Unit-less `line-height` for use in components like buttons.
34
- $line-height-base: 1.428571429 !default; // 20/14
35
- $line-height-large: 1.33 !default;
36
- $line-height-small: 1.5 !default;
37
-
38
-
39
- //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
40
- $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
41
- $line-height-computed-lg: floor(($font-size-large * $line-height-large)) !default; // ~20px
42
- $line-height-computed-sm: floor(($font-size-small * $line-height-small)) !default; // ~20px
43
- $line-height-computed-xs: floor(($font-size-small * $line-height-small)) !default; // ~20px
44
-
45
- //** By default, this inherits from the `<body>`.
46
- // $headings-font-family: inherit !default;
47
- $headings-font-family: $bigFont;
48
- $headings-font-weight: 500 !default;
49
- $headings-line-height: 1.1 !default;
50
- $headings-color: inherit !default;
51
-
52
-
53
- //== Buttons
54
-
55
- $btn-font-weight: normal !default;
56
-
57
-
58
- $loud-factor: 1.25;
59
-
60
- h1.loud, .h1.loud { font-size: ceil($font-size-h1 * $loud-factor); }
61
- h2.loud, .h2.loud { font-size: ceil($font-size-h2 * $loud-factor); }
62
- h3.loud, .h3.loud { font-size: ceil($font-size-h3 * $loud-factor); }
63
- h4.loud, .h4.loud { font-size: ceil($font-size-h4 * $loud-factor); }
64
- h5.loud, .h5.loud { font-size: ceil($font-size-h5 * $loud-factor); }
65
- h6.loud, .h6.loud { font-size: ceil($font-size-h6 * $loud-factor); }
66
-
67
-
68
- div, ul, ol, li, p, span {
69
- &.loud {
70
- @include sansCondensedThin;
71
- font-size: ceil($font-size-base * $loud-factor);
72
- }
73
- &.highlight {
74
- @include sansCondensedThin;
75
- font-weight: 600;
76
- font-size: ceil($font-size-base * $loud-factor);
77
- }
78
- &.bold { font-weight: bold; }
79
- &.thin { font-weight: 200; }
80
- }
81
-
82
- ul, ol, li, p, span, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
83
- &.brand { color: $brand-color; }
84
- }
85
-
@@ -1,85 +0,0 @@
1
- //
2
- // Magic-Stylez - Typo
3
- //
4
- // if you like to change values, remove the '!default' flag!
5
- //
6
- //
7
- //== Typography
8
- //
9
- //## Font, line-height, and color for body text, headings, and more.
10
-
11
- // $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
12
- $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
13
- //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
14
- $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
15
- // $font-family-base: $font-family-sans-serif !default;
16
-
17
-
18
- $font-family-sans-serif: $readFont;
19
- $font-family-base: $smallReadFont;
20
-
21
-
22
- $font-size-base: 15px !default;
23
- $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
24
- $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
25
-
26
- $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
27
- $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
28
- $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
29
- $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
30
- $font-size-h5: $font-size-base !default;
31
- $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
32
-
33
- //** Unit-less `line-height` for use in components like buttons.
34
- $line-height-base: 1.428571429 !default; // 20/14
35
- $line-height-large: 1.33 !default;
36
- $line-height-small: 1.5 !default;
37
-
38
-
39
- //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
40
- $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
41
- $line-height-computed-lg: floor(($font-size-large * $line-height-large)) !default; // ~20px
42
- $line-height-computed-sm: floor(($font-size-small * $line-height-small)) !default; // ~20px
43
- $line-height-computed-xs: floor(($font-size-small * $line-height-small)) !default; // ~20px
44
-
45
- //** By default, this inherits from the `<body>`.
46
- // $headings-font-family: inherit !default;
47
- $headings-font-family: $bigFont;
48
- $headings-font-weight: 500 !default;
49
- $headings-line-height: 1.1 !default;
50
- $headings-color: inherit !default;
51
-
52
-
53
- //== Buttons
54
-
55
- $btn-font-weight: normal !default;
56
-
57
-
58
- $loud-factor: 1.25;
59
-
60
- h1.loud, .h1.loud { font-size: ceil($font-size-h1 * $loud-factor); }
61
- h2.loud, .h2.loud { font-size: ceil($font-size-h2 * $loud-factor); }
62
- h3.loud, .h3.loud { font-size: ceil($font-size-h3 * $loud-factor); }
63
- h4.loud, .h4.loud { font-size: ceil($font-size-h4 * $loud-factor); }
64
- h5.loud, .h5.loud { font-size: ceil($font-size-h5 * $loud-factor); }
65
- h6.loud, .h6.loud { font-size: ceil($font-size-h6 * $loud-factor); }
66
-
67
-
68
- div, ul, ol, li, p, span {
69
- &.loud {
70
- @include sansCondensedThin;
71
- font-size: ceil($font-size-base * $loud-factor);
72
- }
73
- &.highlight {
74
- @include sansCondensedThin;
75
- font-weight: 600;
76
- font-size: ceil($font-size-base * $loud-factor);
77
- }
78
- &.bold { font-weight: bold; }
79
- &.thin { font-weight: 200; }
80
- }
81
-
82
- ul, ol, li, p, span, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
83
- &.brand { color: $brand-color; }
84
- }
85
-