framous 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/CHANGELOG.mkdn +5 -0
- data/lib/framous.rb +2 -0
- data/stylesheets/_framous.scss +13 -0
- data/stylesheets/framous/base/_forms.scss +128 -0
- data/stylesheets/framous/base/_framous-base.scss +11 -0
- data/stylesheets/framous/base/_icons.scss +27 -0
- data/stylesheets/framous/base/_modular-scale.scss +220 -0
- data/stylesheets/framous/base/_settings.scss +70 -0
- data/stylesheets/framous/base/_table.scss +120 -0
- data/stylesheets/framous/base/_tables.scss +120 -0
- data/stylesheets/framous/base/_typography.scss +213 -0
- data/stylesheets/{_framous-grid.scss → framous/grid/_framous-grid.scss} +3 -3
- data/stylesheets/framous/grid/_grid.scss +1 -0
- data/stylesheets/framous/grid/_settings.scss +9 -9
- data/stylesheets/framous/mixins/_framous-mixins.scss +8 -0
- data/stylesheets/framous/mixins/_hidpi-media-query.scss +14 -0
- data/stylesheets/framous/mixins/_linear-gradient.scss +47 -0
- data/stylesheets/framous/mixins/_position.scss +46 -0
- data/templates/project/_base.scss +67 -26
- data/templates/project/_print.scss +21 -0
- data/templates/project/_reset.scss +410 -0
- data/templates/project/index.html +421 -0
- data/templates/project/manifest.rb +5 -1
- data/templates/project/screen.scss +61 -5
- metadata +20 -8
- data/stylesheets/_framous-base.scss +0 -4
- data/stylesheets/framous/_functions.scss +0 -39
- data/stylesheets/framous/_grid.scss +0 -201
- data/stylesheets/framous/_settings.scss +0 -42
@@ -0,0 +1,120 @@
|
|
1
|
+
//
|
2
|
+
// Tables
|
3
|
+
//
|
4
|
+
|
5
|
+
table {
|
6
|
+
position: relative;
|
7
|
+
margin-bottom: ms(1);
|
8
|
+
width: 100%;
|
9
|
+
border: 1px solid $border-color;
|
10
|
+
}
|
11
|
+
|
12
|
+
* html table,
|
13
|
+
*:first-child+html table {
|
14
|
+
zoom: 1;
|
15
|
+
}
|
16
|
+
|
17
|
+
th,
|
18
|
+
td {
|
19
|
+
padding: ms(0)/2 ms(0) ms(0)/2 ms(0)/2;
|
20
|
+
border-right: solid 1px $border-color;
|
21
|
+
text-align: left; /* LTR */
|
22
|
+
&:last-child {
|
23
|
+
border-right: 0 none;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
thead {
|
28
|
+
th,
|
29
|
+
td {
|
30
|
+
padding-top: ms(0)/2;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
tfoot {
|
35
|
+
th,
|
36
|
+
td {
|
37
|
+
padding-bottom: ms(0)/2;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
tbody,
|
42
|
+
tfoot {
|
43
|
+
th,
|
44
|
+
td {
|
45
|
+
border-top: solid 1px $border-color;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
tr:nth-child(even) td { }
|
50
|
+
tbody tr:nth-child(odd) {
|
51
|
+
th,
|
52
|
+
td {
|
53
|
+
background: $background-color;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
tbody {
|
58
|
+
border-top: none;
|
59
|
+
}
|
60
|
+
|
61
|
+
@include breakpoint($small) {
|
62
|
+
|
63
|
+
table {
|
64
|
+
position: relative;
|
65
|
+
display: block;
|
66
|
+
width: 100%;
|
67
|
+
}
|
68
|
+
|
69
|
+
table thead {
|
70
|
+
display: block;
|
71
|
+
float: left;
|
72
|
+
|
73
|
+
tr th {
|
74
|
+
border-right: 2px solid $border-color;
|
75
|
+
border-bottom: 1px solid $border-color;
|
76
|
+
|
77
|
+
&:last-child {
|
78
|
+
border-right: 2px solid $border-color;
|
79
|
+
border-bottom: 0 none;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
table tbody {
|
85
|
+
display: -webkit-box;
|
86
|
+
overflow-x: auto;
|
87
|
+
}
|
88
|
+
|
89
|
+
table th,
|
90
|
+
table tr,
|
91
|
+
table td {
|
92
|
+
display: block;
|
93
|
+
}
|
94
|
+
|
95
|
+
tbody,
|
96
|
+
tfoot {
|
97
|
+
th,
|
98
|
+
td {
|
99
|
+
&:first-child {
|
100
|
+
border-top: 0 none;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
// sort out borders
|
106
|
+
table th {
|
107
|
+
border-bottom: 0;
|
108
|
+
}
|
109
|
+
|
110
|
+
table td {
|
111
|
+
border-right: 0;
|
112
|
+
border-bottom: 0;
|
113
|
+
border-left: 0;
|
114
|
+
}
|
115
|
+
|
116
|
+
table tbody tr {
|
117
|
+
border-right: 1px solid $border-color;
|
118
|
+
}
|
119
|
+
|
120
|
+
}
|
@@ -0,0 +1,213 @@
|
|
1
|
+
//
|
2
|
+
// Typography.scss
|
3
|
+
// Base Type Styles Using Modular Scale
|
4
|
+
// @credits http://thesassway.com/projects/modular-scale
|
5
|
+
// https://github.com/scottkellum/modular-scale
|
6
|
+
// Vertical Rhythm : http://drewish.com/tools/vertical-rhythm
|
7
|
+
//
|
8
|
+
|
9
|
+
@import "compass/typography/vertical_rhythm";
|
10
|
+
@import "compass/reset/utilities";
|
11
|
+
|
12
|
+
body,div,dl,dt,dd,ul,ol,li,
|
13
|
+
h1,h2,h3,h4,h5,h6,
|
14
|
+
pre,form,p,blockquote,th,td {
|
15
|
+
margin: 0;
|
16
|
+
padding: 0;
|
17
|
+
font-size: ms(0);
|
18
|
+
direction: $text-direction;
|
19
|
+
}
|
20
|
+
|
21
|
+
body {
|
22
|
+
position: relative;
|
23
|
+
background: $background-body-color;
|
24
|
+
color: $body-font-color;
|
25
|
+
font-size: ms(0);
|
26
|
+
font-family: $body-font-family;
|
27
|
+
line-height: $base-line-height;
|
28
|
+
-webkit-text-rendering: optimizeLegibility;
|
29
|
+
-moz-text-rendering: optimizeLegibility;
|
30
|
+
-ms-text-rendering: optimizeLegibility;
|
31
|
+
-o-text-rendering: optimizeLegibility;
|
32
|
+
text-rendering: optimizeLegibility;
|
33
|
+
-webkit-font-smoothing: antialiased;
|
34
|
+
-moz-font-smoothing: antialiased;
|
35
|
+
-ms-font-smoothing: antialiased;
|
36
|
+
-o-font-smoothing: antialiased;
|
37
|
+
font-smoothing: antialiased;
|
38
|
+
}
|
39
|
+
|
40
|
+
// Links : link, visited, hover, active
|
41
|
+
a {
|
42
|
+
color: $link-color;
|
43
|
+
text-decoration: none;
|
44
|
+
line-height: inherit;
|
45
|
+
word-wrap: break-word;
|
46
|
+
|
47
|
+
&:visited {
|
48
|
+
color: $link-color-hover;
|
49
|
+
}
|
50
|
+
|
51
|
+
&:hover {
|
52
|
+
color: $link-color-hover;
|
53
|
+
}
|
54
|
+
|
55
|
+
&:active {
|
56
|
+
color: $link-color-hover;
|
57
|
+
}
|
58
|
+
|
59
|
+
&:focus {
|
60
|
+
outline: none;
|
61
|
+
color: $link-color-hover;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
p a,
|
66
|
+
p a:visited {
|
67
|
+
line-height: inherit;
|
68
|
+
}
|
69
|
+
|
70
|
+
p {
|
71
|
+
margin-bottom: ms(1);
|
72
|
+
font-weight: $body-font-weight;
|
73
|
+
font-family: $body-font-family;
|
74
|
+
@include adjust-font-size-to(ms(0));
|
75
|
+
}
|
76
|
+
|
77
|
+
aside p {
|
78
|
+
font-size: ms(0) - 1;
|
79
|
+
@include adjust-font-size-to(ms(0) - 1);
|
80
|
+
}
|
81
|
+
|
82
|
+
h1, h2, h3, h4, h5, h6 {
|
83
|
+
margin-top: ms(0);
|
84
|
+
margin-bottom: ms(0);
|
85
|
+
color: $header-font-color;
|
86
|
+
font-weight: $header-font-weight;
|
87
|
+
font-family: $header-font-family;
|
88
|
+
text-rendering: optimizeLegibility;
|
89
|
+
|
90
|
+
small {
|
91
|
+
color: lighten($header-font-color, 30%);
|
92
|
+
font-size: 75%;
|
93
|
+
line-height: 0;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
h1 { @include adjust-font-size-to(ms(5)); }
|
98
|
+
h2 { @include adjust-font-size-to(ms(4)); }
|
99
|
+
h3 { @include adjust-font-size-to(ms(3)); }
|
100
|
+
h4 { @include adjust-font-size-to(ms(2)); }
|
101
|
+
h5 { @include adjust-font-size-to(ms(1)); }
|
102
|
+
h6 { @include adjust-font-size-to(ms(0)); }
|
103
|
+
|
104
|
+
hr {
|
105
|
+
clear: both;
|
106
|
+
margin: ms(1) 0 ms(1);
|
107
|
+
height: 0;
|
108
|
+
border: solid #ddd;
|
109
|
+
border-width: 1px 0 0;
|
110
|
+
}
|
111
|
+
|
112
|
+
em, i {
|
113
|
+
font-style: italic;
|
114
|
+
line-height: inherit;
|
115
|
+
}
|
116
|
+
|
117
|
+
strong, b {
|
118
|
+
font-weight: bold;
|
119
|
+
line-height: inherit;
|
120
|
+
}
|
121
|
+
|
122
|
+
small {
|
123
|
+
font-size: 75%;
|
124
|
+
line-height: inherit;
|
125
|
+
}
|
126
|
+
|
127
|
+
code {
|
128
|
+
background: $highlight-color;
|
129
|
+
font-weight: bold;
|
130
|
+
}
|
131
|
+
|
132
|
+
// Lists
|
133
|
+
ul, ol {
|
134
|
+
margin-bottom: ms(1);
|
135
|
+
margin-left: ms(1);
|
136
|
+
@include adjust-font-size-to(ms(0));
|
137
|
+
}
|
138
|
+
|
139
|
+
ul {
|
140
|
+
li {
|
141
|
+
ul, ol {
|
142
|
+
margin-#{$default-float}: ms(1);
|
143
|
+
}
|
144
|
+
}
|
145
|
+
}
|
146
|
+
|
147
|
+
ol {
|
148
|
+
li {
|
149
|
+
ul, ol {
|
150
|
+
margin-#{$default-float}: ms(1);
|
151
|
+
}
|
152
|
+
}
|
153
|
+
}
|
154
|
+
|
155
|
+
nav ul, nav ol,
|
156
|
+
.nav li, .nav ol {
|
157
|
+
@include reset-list-style;
|
158
|
+
margin: 0;
|
159
|
+
padding: 0;
|
160
|
+
}
|
161
|
+
|
162
|
+
// Text Marking
|
163
|
+
ins, mark {
|
164
|
+
background-color: $highlight-color;
|
165
|
+
color: invert($highlight-color);
|
166
|
+
}
|
167
|
+
|
168
|
+
ins {
|
169
|
+
text-decoration: none;
|
170
|
+
}
|
171
|
+
|
172
|
+
del {
|
173
|
+
text-decoration: line-through;
|
174
|
+
}
|
175
|
+
|
176
|
+
// Blockquote
|
177
|
+
blockquote, blockquote p {
|
178
|
+
color: lighten($header-font-color, 30%);
|
179
|
+
font-style: italic;
|
180
|
+
line-height: 1.5;
|
181
|
+
}
|
182
|
+
|
183
|
+
blockquote {
|
184
|
+
margin: 0 0 ms(1) ms(1);
|
185
|
+
padding: 0px ms(1) 0 ms(1);
|
186
|
+
border-#{$default-float}: 1px solid $grey-set;
|
187
|
+
|
188
|
+
cite {
|
189
|
+
display: block;
|
190
|
+
color: lighten($header-font-color, 20%);
|
191
|
+
font-size: ms(0) - 1;
|
192
|
+
|
193
|
+
&:before {
|
194
|
+
content: "\2014 \0020";
|
195
|
+
}
|
196
|
+
|
197
|
+
a, a:visited {
|
198
|
+
color: lighten($header-font-color, 20%);
|
199
|
+
}
|
200
|
+
}
|
201
|
+
}
|
202
|
+
|
203
|
+
abbr, acronym {
|
204
|
+
border-bottom: 1px solid $grey-set;
|
205
|
+
color: $header-font-color;
|
206
|
+
text-transform: uppercase !important;
|
207
|
+
font-size: 90%;
|
208
|
+
cursor: help;
|
209
|
+
}
|
210
|
+
|
211
|
+
abbr {
|
212
|
+
text-transform: none;
|
213
|
+
}
|
@@ -24,19 +24,19 @@ $default-feature: min-width;
|
|
24
24
|
// @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
|
25
25
|
//
|
26
26
|
|
27
|
-
//
|
28
|
-
$
|
27
|
+
// Small screens
|
28
|
+
$small: min-width 320px max-width 479px !default;
|
29
29
|
// Smartphones (portrait)
|
30
|
-
$phone-portrait: max-width
|
30
|
+
$phone-portrait: max-device-width 320px !default;
|
31
31
|
// Smartphones (landscape)
|
32
|
-
$phone-landscape:
|
32
|
+
$phone-landscape: max-device-width 480px !default;
|
33
33
|
// iPads (portrait and landscape)
|
34
|
-
$
|
34
|
+
$medium: min-device-width 768px !default;
|
35
35
|
// iPads (portrait)
|
36
|
-
$ipad-portrait:
|
36
|
+
$ipad-portrait: max-device-width 768px orientation portrait !default;
|
37
37
|
// iPads (landscape)
|
38
|
-
$ipad-landscape:
|
38
|
+
$ipad-landscape: max-device-width 1024px orientation landscape !default;
|
39
39
|
// Desktops and laptops
|
40
|
-
$desktop: min-width 1024px;
|
40
|
+
$desktop: min-width 1024px !default;
|
41
41
|
// iPhone 4
|
42
|
-
$retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;
|
42
|
+
$retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5 !default;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
//
|
2
|
+
// HI DPI Media Query.scss
|
3
|
+
//
|
4
|
+
|
5
|
+
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
|
6
|
+
@mixin hidpi($ratio: 1.3) {
|
7
|
+
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
8
|
+
only screen and (min--moz-device-pixel-ratio: $ratio),
|
9
|
+
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
|
10
|
+
only screen and (min-resolution: #{round($ratio*96)}dpi),
|
11
|
+
only screen and (min-resolution: #{$ratio}dppx) {
|
12
|
+
@content;
|
13
|
+
}
|
14
|
+
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
//
|
2
|
+
// Linear Gradient.scss
|
3
|
+
//
|
4
|
+
|
5
|
+
@mixin linear-gradient($pos, $G1, $G2: false,
|
6
|
+
$G3: false, $G4: false,
|
7
|
+
$G5: false, $G6: false,
|
8
|
+
$G7: false, $G8: false,
|
9
|
+
$G9: false, $G10: false,
|
10
|
+
$deprecated-pos1: left top,
|
11
|
+
$deprecated-pos2: left bottom,
|
12
|
+
$fallback: false) {
|
13
|
+
// Detect what type of value exists in $pos
|
14
|
+
$pos-type: type-of(nth($pos, 1));
|
15
|
+
|
16
|
+
// If $pos is missing from mixin, reassign vars and add default position
|
17
|
+
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
18
|
+
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
|
19
|
+
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
|
20
|
+
$pos: top; // Default position
|
21
|
+
}
|
22
|
+
|
23
|
+
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
24
|
+
|
25
|
+
// Set $G1 as the default fallback color
|
26
|
+
$fallback-color: nth($G1, 1);
|
27
|
+
|
28
|
+
// If $fallback is a color use that color as the fallback color
|
29
|
+
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
30
|
+
$fallback-color: $fallback;
|
31
|
+
}
|
32
|
+
|
33
|
+
background-color: $fallback-color;
|
34
|
+
background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
|
35
|
+
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
|
36
|
+
background-image: -moz-linear-gradient($pos, $full);
|
37
|
+
background-image: -ms-linear-gradient($pos, $full);
|
38
|
+
background-image: -o-linear-gradient($pos, $full);
|
39
|
+
background-image: unquote("linear-gradient(#{$pos}, #{$full})");
|
40
|
+
}
|
41
|
+
|
42
|
+
|
43
|
+
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
|
44
|
+
// @include linear-gradient(#1e5799, #2989d8);
|
45
|
+
// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
|
46
|
+
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
|
47
|
+
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
|
@@ -0,0 +1,46 @@
|
|
1
|
+
//
|
2
|
+
// Postion.scss
|
3
|
+
//
|
4
|
+
|
5
|
+
@mixin position ($position: relative, $coordinates: 0 0 0 0) {
|
6
|
+
|
7
|
+
@if type-of($position) == list {
|
8
|
+
$coordinates: $position;
|
9
|
+
$position: relative;
|
10
|
+
}
|
11
|
+
|
12
|
+
$top: nth($coordinates, 1);
|
13
|
+
$right: nth($coordinates, 2);
|
14
|
+
$bottom: nth($coordinates, 3);
|
15
|
+
$left: nth($coordinates, 4);
|
16
|
+
|
17
|
+
position: $position;
|
18
|
+
|
19
|
+
@if $top == auto {
|
20
|
+
top: $top;
|
21
|
+
}
|
22
|
+
@else if not(unitless($top)) {
|
23
|
+
top: $top;
|
24
|
+
}
|
25
|
+
|
26
|
+
@if $right == auto {
|
27
|
+
right: $right;
|
28
|
+
}
|
29
|
+
@else if not(unitless($right)) {
|
30
|
+
right: $right;
|
31
|
+
}
|
32
|
+
|
33
|
+
@if $bottom == auto {
|
34
|
+
bottom: $bottom;
|
35
|
+
}
|
36
|
+
@else if not(unitless($bottom)) {
|
37
|
+
bottom: $bottom;
|
38
|
+
}
|
39
|
+
|
40
|
+
@if $left == auto {
|
41
|
+
left: $left;
|
42
|
+
}
|
43
|
+
@else if not(unitless($left)) {
|
44
|
+
left: $left;
|
45
|
+
}
|
46
|
+
}
|
@@ -2,41 +2,82 @@
|
|
2
2
|
// Settings.scss
|
3
3
|
//
|
4
4
|
|
5
|
-
//
|
6
|
-
|
7
|
-
|
5
|
+
// Text Direction Settings
|
6
|
+
|
7
|
+
$text-direction: ltr;
|
8
|
+
$default-float: left;
|
9
|
+
$default-opposite: right;
|
10
|
+
|
11
|
+
@if $text-direction == ltr {
|
12
|
+
$default-float: left;
|
13
|
+
$default-opposite: right;
|
14
|
+
} @else {
|
15
|
+
$default-float: right;
|
16
|
+
$default-opposite: left;
|
17
|
+
}
|
18
|
+
|
19
|
+
// Responsive Grid
|
8
20
|
|
9
21
|
// Column width
|
10
22
|
$column: 145px;
|
11
23
|
// Gutter between each two columns
|
12
|
-
$gutter:
|
24
|
+
$gutter: 36px;
|
13
25
|
// Total number of columns in the grid (Total Columns For Main Container)
|
14
26
|
$grid-columns: 12;
|
15
27
|
// Max-width of the outer container
|
16
28
|
$max-width: 1024px;
|
17
29
|
// Makes all elements have a border-box layout
|
18
30
|
$border-box-sizing: true;
|
19
|
-
// Default @media feature for the breakpoint() mixin
|
20
|
-
$default-feature: min-width;
|
21
31
|
|
22
|
-
//
|
23
|
-
//
|
24
|
-
|
25
|
-
|
32
|
+
// Colors Settings
|
33
|
+
// Branding Colors
|
34
|
+
|
35
|
+
$white-set: #fff;
|
36
|
+
$blue-set: #174374;
|
37
|
+
$grey-set: #808080;
|
38
|
+
$grey-dark-set: #333;
|
39
|
+
$black-set: #000;
|
40
|
+
|
41
|
+
$background-body-color: $white-set;
|
42
|
+
$main-color: $grey-dark-set;
|
43
|
+
$txt-color: $grey-dark-set;
|
44
|
+
$highlight-color: #ffff99;
|
45
|
+
|
46
|
+
$background-color: lighten($grey-set,45);
|
47
|
+
|
48
|
+
$link-color: $blue-set;
|
49
|
+
$link-color-hover: darken($blue-set,10);
|
50
|
+
|
51
|
+
$border-color: lighten($grey-set,35);
|
52
|
+
$border-color-hover: $grey-set;
|
53
|
+
|
54
|
+
// Font Settings
|
55
|
+
|
56
|
+
$georgia: Georgia, "Times New Roman", "DejaVu Serif", serif;
|
57
|
+
$helvetica: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
58
|
+
$open-sans: 'Open Sans', sans-serif;
|
59
|
+
$gentium-book: 'Gentium Book Basic', serif;
|
60
|
+
$droid-serif: 'Droid Serif', serif;
|
61
|
+
|
62
|
+
$header-font-family: $droid-serif;
|
63
|
+
$header-font-weight: bold;
|
64
|
+
$header-font-color: $black-set;
|
65
|
+
$body-font-family: $georgia;
|
66
|
+
$body-font-weight: normal;
|
67
|
+
$body-font-color: $txt-color;
|
68
|
+
|
69
|
+
// Modular Scale Settings
|
70
|
+
// Ratios
|
71
|
+
|
72
|
+
$golden: 1.618;
|
73
|
+
$ratio: $golden;
|
26
74
|
|
27
|
-
//
|
28
|
-
$
|
29
|
-
|
30
|
-
$
|
31
|
-
|
32
|
-
|
33
|
-
//
|
34
|
-
|
35
|
-
//
|
36
|
-
$ipad-portrait: min-device-width 768px max-device-width 1024px orientation portrait;
|
37
|
-
// iPads (landscape)
|
38
|
-
$ipad-landscape: min-device-width 768px max-device-width 1024px orientation landscape;
|
39
|
-
// Desktops and laptops
|
40
|
-
$desktop: min-width 1024px;
|
41
|
-
// iPhone 4
|
42
|
-
$retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;
|
75
|
+
// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
|
76
|
+
$base-font-size: 14px;
|
77
|
+
$important-mod-num: 44px;
|
78
|
+
$base-size: $base-font-size $important-mod-num;
|
79
|
+
$base-line-height: 20px;
|
80
|
+
// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
|
81
|
+
// http://www.modularscale.com by Tim Brown
|
82
|
+
// Results : http://modularscale.com/scale/?px1=14&px2=44&ra1=1.618&ra2=0
|
83
|
+
// https://github.com/scottkellum/modular-scale by scottkellum
|
@@ -0,0 +1,21 @@
|
|
1
|
+
//
|
2
|
+
// Print.scss
|
3
|
+
// @credits : HTML5 Boilerplate
|
4
|
+
//
|
5
|
+
|
6
|
+
@media print {
|
7
|
+
|
8
|
+
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
|
9
|
+
a, a:visited { text-decoration: underline; }
|
10
|
+
a[href]:after { content: " (" attr(href) ")"; }
|
11
|
+
abbr[title]:after { content: " (" attr(title) ")"; }
|
12
|
+
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
|
13
|
+
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
14
|
+
thead { display: table-header-group; } /* h5bp.com/t */
|
15
|
+
tr, img { page-break-inside: avoid; }
|
16
|
+
img { max-width: 100% !important; }
|
17
|
+
@page { margin: 0.5cm; }
|
18
|
+
p, h2, h3 { orphans: 3; widows: 3; }
|
19
|
+
h2, h3 { page-break-after: avoid; }
|
20
|
+
|
21
|
+
}
|