1
1
/* ==========================================================================
2
- Variables
2
+ SHARED THEME SETTINGS
3
3
========================================================================== */
4
4
5
- /*
6
- Typography
5
+ /* ==========================================================================
6
+ TYPOGRAPHY
7
7
========================================================================== */
8
8
9
+ /* Used to set the size for <em> */
9
10
$doc-font-size : 16 ;
10
11
11
- /* paragraph indention */
12
+ /* Paragraph indention */
12
13
$paragraph-indent : false; // true, false (default)
13
14
$indent-var : 1.3em ;
14
15
15
- /* system typefaces */
16
+ /* System typefaces */
16
17
$serif : Georgia , Times , serif ;
17
18
$sans-serif : -apple-system , " .SFNSText-Regular" , " San Francisco" , " Roboto" , " Segoe UI" , " Helvetica Neue" , " Lucida Grande" , Arial , sans-serif ;
18
19
$monospace : Monaco, Consolas, " Lucida Console" , monospace ;
19
20
20
- /* sans serif typefaces */
21
+ /* Sans serif typefaces */
21
22
$sans-serif-narrow : $sans-serif ;
22
23
$helvetica : Helvetica , " Helvetica Neue" , Arial , sans-serif ;
23
24
24
- /* serif typefaces */
25
+ /* Serif typefaces */
25
26
$georgia : Georgia , serif ;
26
27
$times : Times , serif ;
27
28
$bodoni : " Bodoni MT" , serif ;
28
29
$calisto : " Calisto MT" , serif ;
29
30
$garamond : Garamond , serif ;
30
31
31
- $global-font-family : $sans-serif ;
32
- $header-font-family : $sans-serif ;
33
- $caption-font-family : $serif ;
34
-
35
- /* type scale */
32
+ /* Type scale */
36
33
$type-size-1 : 2.441em ; // ~39.056px
37
34
$type-size-2 : 1.953em ; // ~31.248px
38
35
$type-size-3 : 1.563em ; // ~25.008px
@@ -42,39 +39,45 @@ $type-size-6 : 0.75em; // ~12px
42
39
$type-size-7 : 0.6875em ; // ~11px
43
40
$type-size-8 : 0.625em ; // ~10px
44
41
45
- /* masthead properties */
46
- $masthead-height : 70px ;
42
+ $global-font-family : $sans-serif ;
43
+ $header-font-family : $sans-serif ;
44
+ $caption-font-family : $serif ;
47
45
48
- /* Sidebar properties */
49
- $sidebar-screen-min-width : 1024 px ;
50
- $sidebar-link-max-width : 250 px ;
46
+ /* ==========================================================================
47
+ Breakpoints
48
+ ========================================================================== */
51
49
50
+ @include breakpoint-set (" to ems" , true);
52
51
52
+ $small : 600px !default ;
53
+ $medium : 768px !default ;
54
+ $medium-wide : 900px !default ;
55
+ $large : 925px !default ;
56
+ $x-large : 1280px !default ;
57
+
58
+ /* ==========================================================================
59
+ Grid
60
+ ========================================================================== */
61
+
62
+ $right-sidebar-width-narrow : 20px !default ;
63
+ $right-sidebar-width : 30px !default ;
64
+ $right-sidebar-width-wide : 40px !default ;
53
65
54
- /*
55
- Colors
66
+ $susy : (
67
+ columns : 12 ,
68
+ column-width : 120px ,
69
+ gutters : 1 / 4 ,
70
+ math : fluid,
71
+ output : float ,
72
+ gutter-position : after ,
73
+ container : $large ,
74
+ global-box-sizing : border-box ,
75
+ );
76
+
77
+ /* ==========================================================================
78
+ BRAND COLORS
56
79
========================================================================== */
57
80
58
- $gray : #7a8288 ;
59
- $dark-gray : mix (#000 , $gray , 40% );
60
- $darker-gray : mix (#000 , $gray , 60% );
61
- $light-gray : mix (#fff , $gray , 50% );
62
- $lighter-gray : mix (#fff , $gray , 90% );
63
-
64
- $body-color : #fff ;
65
- $background-color : #fff ;
66
- $code-background-color : #fafafa ;
67
- $code-background-color-dark : $light-gray ;
68
- $text-color : $dark-gray ;
69
- $border-color : $lighter-gray ;
70
-
71
- $primary-color : #7a8288 ;
72
- $success-color : #62c462 ;
73
- $warning-color : #f89406 ;
74
- $danger-color : #ee5f5b ;
75
- $info-color : #2f7f93 ;
76
-
77
- /* brands */
78
81
$behance-color : #1769FF ;
79
82
$bluesky-color : #1184fe ;
80
83
$dribbble-color : #ea4c89 ;
@@ -99,67 +102,4 @@ $vimeo-color : #1ab7ea;
99
102
$vine-color : #00bf8f ;
100
103
$youtube-color : #bb0000 ;
101
104
$xing-color : #006567 ;
102
-
103
-
104
- /* links */
105
- $link-color : $info-color ;
106
- $link-color-hover : mix (#000 , $link-color , 25% );
107
- $link-color-visited : mix (#fff , $link-color , 25% );
108
- $masthead-link-color : $primary-color ;
109
- $masthead-link-color-hover : mix (#000 , $primary-color , 25% );
110
-
111
-
112
- /*
113
- Breakpoints
114
- ========================================================================== */
115
-
116
- @include breakpoint-set (" to ems" , true);
117
- /*
118
- $small : 400px;
119
- $medium : 500px;
120
- $medium-wide : 550px;
121
- $large : 1200px;
122
- $x-large : 1800px;
123
- */
124
-
125
- $small : 600px !default ;
126
- $medium : 768px !default ;
127
- $medium-wide : 900px !default ;
128
- $large : 925px !default ;
129
- $x-large : 1280px !default ;
130
-
131
- /*
132
- Grid
133
- ========================================================================== */
134
-
135
- $right-sidebar-width-narrow : 20px !default ;
136
- $right-sidebar-width : 30px !default ;
137
- $right-sidebar-width-wide : 40px !default ;
138
-
139
- $susy : (
140
- columns : 12 ,
141
- column-width : 120px ,
142
- gutters : 1 / 4 ,
143
- math : fluid,
144
- output : float ,
145
- gutter-position : after ,
146
- container : $large ,
147
- global-box-sizing : border-box ,
148
- // debug: (
149
- // image: show,
150
- // color: blue,
151
- // output: overlay,
152
- // toggle: top right,
153
- // ),
154
- );
155
-
156
-
157
- /*
158
- Other
159
- ========================================================================== */
160
-
161
- $border-radius : 4px ;
162
- $box-shadow : 0 1px 1px rgba (0 , 0 , 0 , 0.125 );
163
- $navicon-width : 28px ;
164
- $navicon-height : 4px ;
165
- $global-transition : all 0.2s ease-in-out ;
105
+
0 commit comments