This repository has been archived by the owner on Jul 23, 2019. It is now read-only.
/
_base.sass
182 lines (156 loc) · 3.17 KB
/
_base.sass
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
html
font-size: 16px
box-sizing: border-box
html, body, #site
width: 100%
overflow-x: hidden
margin: 0
padding: 0
*, *:after, *:before
box-sizing: inherit
body
line-height: 1.7
font-family: $font-family-base
background-color: darken($body-bg, 4%)
color: $text-color
font-size: 1rem /* 16/16 */
font-weight: 400
text-rendering: optimizeLegibility
-webkit-font-smoothing: antialiased
p
font-size: 1.25rem /* 20/16 */
// line-height: 1.6
&:not(:last-child)
margin-bottom: 1.875rem /* 30/16 */
a
color: $primary-color
text-decoration: none
border-bottom: 2px solid transparent
&:focus, &:hover
color: $secondary-color
text-decoration: underline
&.anchorjs-link
border: none
h1, h2, h3, h4, h5, h6
font-family: $font-family-heading
text-rendering: optimizeLegibility
line-height: 1.3
letter-spacing: -0.03rem
margin: 1.875rem 0
color: inherit
h1
font-size: 2.5rem /* 40/16 */
h2
font-size: 2.375rem /* 38/16 */
h3
font-size: 2.25rem /* 36/16 */
h4
font-size: 1.75rem /* 28/16 */
h5
font-size: 1.625rem /* 26/16 */
h6
font-size: 1.375rem /* 22/16 */
strong
font-weight: 700
hr
border: none
border-bottom: 4px solid rgba(#000, .1)
margin: 3.75rem /* 60/16 */ 0
width: 60px
a, i, span
display: inline-block
text-decoration: none
-webkit-transition: all 0.3s
transition: all 0.3s
&:hover, &:focus
text-decoration: none
a i
-webkit-transition: none
transition: none
ul, ol
padding: 0 0 0 1.3rem
margin-bottom: 0.5rem
button, input
outline: none !important
font-family: inherit
button
cursor: pointer
blockquote
padding: 1.5625rem 1.5625rem 0
margin: 0 0 3.125rem 0
display: block
position: relative
pointer-events: none
&:after
content: "''"
font: italic 25rem Arial,Serif,Georgia,serif
color: rgba($text-color, 0.075)
position: absolute
top: -80px
left: -70px
z-index: 0
small
display: block
color: lighten($text-color, 25%)
&:before
content: ' ⏤ '
p
font: italic 1.65rem/1.5 Georgia,Times,serif
color: rgba($text-color, .45)
margin: 0
position: relative
font-size: 1.5rem
z-index: 1
pointer-events: all
.site-main
margin: 0 auto
padding-left: 1.875rem /* 30/16 */
padding-right: 1.875rem /* 30/16 */
max-width: $container-width
@extend %clearfix
.sr-only
position: absolute
width: 1px
height: 1px
padding: 0
overflow: hidden
clip: rect(0,0,0,0)
white-space: nowrap
border: 0
&--focusable:active,
&--focusable:focus
position: static
width: auto
height: auto
overflow: visible
clip: auto
white-space: normal
.skip a,
.gototop a
color: #fff
background-color: $secondary-color
padding: .3125rem /* 5/16 */ .9375rem /* 15/16 */
border: none
.gototop
position: fixed
bottom: 0
right: 20px
z-index: 100
transition: all .25s $timingFunction
transform: translate3d(0, 100px, 0)
&--show
transform: translate3d(0, -10px, 0)
.embed-container
position: relative
padding-bottom: 56.25% /* 16:9 */
padding-top: 25px
height: 0
iframe,
object,
embed,
video
position: absolute
top: 0
left: 0
width: 100%
height: 100%