/
_variables.scss
115 lines (99 loc) · 2.03 KB
/
_variables.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
$typography-selector: '.typography' !default;
$typography-base-size: 16;
$typography-block-tags: blockquote, details, figure, h1, h2, h3, h4, h5, h6, hr,
img, ol, p, pre, table, ul;
$typography-heading-tags: h1, h2, h3, h4, h5, h6;
// minimum width for screen breakpoints
$screen-breakpoint: (
tablet: 640px,
desktop: 1080px
) !default;
$font-family-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
// @function get-font-family($scope)
$font-family: (
body: $font-family-default,
heading: $font-family-default,
code: (
monospace,
monospace
)
) !default;
// @function get-font-size-base($device)
$font-size-base: (
mobile: 16,
tablet: 18,
desktop: 20
) !default;
// @function rhythm($device)
$line-height: (
mobile: 1.5,
tablet: 1.55,
desktop: 1.6
) !default;
// @function get-scale($device)
$scale-base: (
mobile: 1,
tablet: 1,
desktop: 1
) !default;
// @function get-scale($device)
$scale-ratio: (
mobile: 2.5,
tablet: 2.75,
desktop: 3
) !default;
// content block
$content-selector: 'article' !default;
$content-max-width: 720px !default;
$content-float-max-width: pow(2 * $major-second, -1) *
map-get($screen-breakpoint, desktop) !default;
$content-padding-rhythm: 0 1 !default;
// headings
$heading-scale-point: (
h1: 5,
h2: 4,
h3: 3,
h4: 2,
h5: 1,
h6: 0
) !default;
$heading-line-height-rhythm: (
h1: 2.5,
h2: 1.5,
h3: 1.5,
h4: 1,
h5: 1,
h6: 1
) !default;
$heading-margin-top-rhythm: (
h1: 2.5,
h2: 2,
h3: 1.5,
h4: 1.5,
h5: 1,
h6: 1
) !default;
$heading-margin-bottom-rhythm: (
h1: 1.5,
h2: 1,
h3: 1,
h4: 1,
h5: 0.5,
h6: 0.5
) !default;
// horizontal rule
$hr-margin-rhythm: 2 !default;
$hr-mode: 'content' !default;
// mode: `content`
$hr-content: '***' !default;
$hr-content-letter-spacing: 2em !default;
// mode: `line`
$hr-height: 3 !default;
$hr-width: 80% !default;
$hr-line-background-image: linear-gradient(
to right,
transparent,
black,
transparent
) !default;