|
2 | 2 | @import "_syntax"
|
3 | 3 |
|
4 | 4 | body
|
5 |
| - font-family $body-font |
6 |
| - font-size $body-font-size |
7 |
| - -webkit-font-smoothing antialiased |
8 |
| - -moz-osx-font-smoothing grayscale |
9 |
| - color $medium |
10 |
| - background-color white |
11 |
| - margin 0 |
12 |
| - &.docs |
13 |
| - padding-top: $header-height |
| 5 | + font-family: $body-font |
| 6 | + font-size: $body-font-size |
| 7 | + -webkit-font-smoothing: antialiased |
| 8 | + -moz-osx-font-smoothing: grayscale |
| 9 | + color: $medium |
| 10 | + background-color: white |
| 11 | + margin: 0 |
| 12 | + &.docs |
| 13 | + padding-top: $header-height |
14 | 14 |
|
15 | 15 | @media screen and (max-width: 900px)
|
16 |
| - body.docs |
17 |
| - padding-top: 0 |
| 16 | + body.docs |
| 17 | + padding-top: 0 |
18 | 18 |
|
19 | 19 | a
|
20 |
| - text-decoration none |
21 |
| - color $medium |
| 20 | + text-decoration: none |
| 21 | + color: $medium |
22 | 22 |
|
23 | 23 | img
|
24 |
| - border none |
| 24 | + border: none |
25 | 25 |
|
26 | 26 | h1, h2, h3, h4, strong
|
27 |
| - font-weight 600 |
28 |
| - color $dark |
| 27 | + font-weight: 600 |
| 28 | + color: $dark |
29 | 29 |
|
30 | 30 | code, pre
|
31 |
| - font-family $code-font |
32 |
| - font-size $code-font-size |
33 |
| - background-color $codebg |
34 |
| - -webkit-font-smoothing initial |
35 |
| - -moz-osx-font-smoothing initial |
| 31 | + font-family: $code-font |
| 32 | + font-size: $code-font-size |
| 33 | + background-color: $codebg |
| 34 | + -webkit-font-smoothing: initial |
| 35 | + -moz-osx-font-smoothing: initial |
36 | 36 |
|
37 | 37 | code
|
38 |
| - color #e96900 |
39 |
| - padding 3px 5px |
40 |
| - margin 0 2px |
41 |
| - border-radius 2px |
42 |
| - white-space nowrap |
| 38 | + color: #e96900 |
| 39 | + padding: 3px 5px |
| 40 | + margin: 0 2px |
| 41 | + border-radius: 2px |
| 42 | + white-space: nowrap |
43 | 43 |
|
44 | 44 | em
|
45 |
| - color $light |
| 45 | + color: $light |
46 | 46 |
|
47 | 47 | p
|
48 |
| - word-spacing 0.05em |
| 48 | + word-spacing: 0.05em |
49 | 49 |
|
50 | 50 | a.button
|
51 |
| - padding 0.75em 2em |
52 |
| - border-radius 2em |
53 |
| - display inline-block |
54 |
| - color #fff |
55 |
| - background-color lighten($green, 8%) |
56 |
| - transition all .15s ease |
57 |
| - box-sizing border-box |
58 |
| - border 1px solid lighten($green, 8%) |
59 |
| - &.white |
60 |
| - background-color #fff |
61 |
| - color $green |
| 51 | + padding: 0.75em 2em |
| 52 | + border-radius: 2em |
| 53 | + display: inline-block |
| 54 | + color: #fff |
| 55 | + background-color: lighten($green, 8%) |
| 56 | + transition: all .15s ease |
| 57 | + box-sizing: border-box |
| 58 | + border: 1px solid lighten($green, 8%) |
| 59 | + &.white |
| 60 | + background-color: #fff |
| 61 | + color: $green |
62 | 62 |
|
63 | 63 | .highlight
|
64 |
| - overflow-x auto |
65 |
| - position relative |
66 |
| - padding 0 |
67 |
| - background-color $codebg |
68 |
| - padding .8em .8em .4em |
69 |
| - line-height 1.1em |
70 |
| - border-radius $radius |
71 |
| - table, tr, td |
72 |
| - width 100% |
73 |
| - border-collapse collapse |
74 |
| - padding 0 |
75 |
| - margin 0 |
76 |
| - .gutter |
77 |
| - width 1.5em |
78 |
| - .code |
79 |
| - $code-line-height = 1.5em |
80 |
| - pre |
81 |
| - padding 1.2em 1.4em |
82 |
| - line-height $code-line-height |
83 |
| - margin 0 |
84 |
| - .line |
85 |
| - min-height $code-line-height |
86 |
| - &.html, &.js, &.bash, &.css |
87 |
| - .code:after |
88 |
| - position absolute |
89 |
| - top 0 |
90 |
| - right 0 |
91 |
| - color #ccc |
92 |
| - text-align right |
93 |
| - font-size .75em |
94 |
| - padding 5px 10px 0 |
95 |
| - line-height 15px |
96 |
| - height 15px |
97 |
| - font-weight 600 |
98 |
| - &.html .code:after |
99 |
| - content 'HTML' |
100 |
| - &.js .code:after |
101 |
| - content 'JS' |
102 |
| - &.bash .code:after |
103 |
| - content 'Shell' |
104 |
| - &.css .code:after |
105 |
| - content 'CSS' |
| 64 | + overflow-x: auto |
| 65 | + position: relative |
| 66 | + padding: 0 |
| 67 | + background-color: $codebg |
| 68 | + padding: .8em .8em .4em |
| 69 | + line-height: 1.1em |
| 70 | + border-radius: $radius |
| 71 | + table, tr, td |
| 72 | + width: 100% |
| 73 | + border-collapse: collapse |
| 74 | + padding: 0 |
| 75 | + margin: 0 |
| 76 | + .gutter |
| 77 | + width: 1.5em |
| 78 | + .code |
| 79 | + $code-line-height = 1.5em |
| 80 | + pre |
| 81 | + padding: 1.2em 1.4em |
| 82 | + line-height: $code-line-height |
| 83 | + margin: 0 |
| 84 | + .line |
| 85 | + min-height: $code-line-height |
| 86 | + &.html, &.js, &.bash, &.css |
| 87 | + .code:after |
| 88 | + position: absolute |
| 89 | + top: 0 |
| 90 | + right: 0 |
| 91 | + color: #ccc |
| 92 | + text-align: right |
| 93 | + font-size: .75em |
| 94 | + padding: 5px 10px 0 |
| 95 | + line-height: 15px |
| 96 | + height: 15px |
| 97 | + font-weight: 600 |
| 98 | + &.html .code:after |
| 99 | + content: 'HTML' |
| 100 | + &.js .code:after |
| 101 | + content: 'JS' |
| 102 | + &.bash .code:after |
| 103 | + content: 'Shell' |
| 104 | + &.css .code:after |
| 105 | + content: 'CSS' |
106 | 106 |
|
107 | 107 | #main
|
108 |
| - position relative |
109 |
| - z-index 1 |
110 |
| - padding 0 60px 30px |
111 |
| - overflow-x hidden |
| 108 | + position: relative |
| 109 | + z-index: 1 |
| 110 | + padding: 0 60px 30px |
| 111 | + overflow-x: hidden |
112 | 112 |
|
113 | 113 | #ad
|
114 |
| - width 125px |
115 |
| - // text-align center |
116 |
| - position fixed |
117 |
| - z-index 99 |
118 |
| - bottom 10px |
119 |
| - right 10px |
120 |
| - padding 10px |
121 |
| - background-color #fff |
122 |
| - border-radius 3px |
123 |
| - font-size 13px |
124 |
| - a |
125 |
| - display inline-block |
126 |
| - color $light |
127 |
| - font-weight normal |
128 |
| - span |
129 |
| - color $light |
130 |
| - display inline-block |
131 |
| - margin-bottom 5px |
132 |
| - img |
133 |
| - width 125px |
134 |
| - .carbon-img, .carbon-text |
135 |
| - display block |
136 |
| - margin-bottom 6px |
137 |
| - font-weight normal |
138 |
| - color $medium |
139 |
| - .carbon-poweredby |
140 |
| - color #aaa |
141 |
| - font-weight normal |
| 114 | + width: 125px |
| 115 | + // text-align: center |
| 116 | + position: fixed |
| 117 | + z-index: 99 |
| 118 | + bottom: 10px |
| 119 | + right: 10px |
| 120 | + padding: 10px |
| 121 | + background-color: #fff |
| 122 | + border-radius: 3px |
| 123 | + font-size: 13px |
| 124 | + a |
| 125 | + display: inline-block |
| 126 | + color: $light |
| 127 | + font-weight: normal |
| 128 | + span |
| 129 | + color: $light |
| 130 | + display: inline-block |
| 131 | + margin-bottom: 5px |
| 132 | + img |
| 133 | + width: 125px |
| 134 | + .carbon-img, .carbon-text |
| 135 | + display: block |
| 136 | + margin-bottom: 6px |
| 137 | + font-weight: normal |
| 138 | + color: $medium |
| 139 | + .carbon-poweredby |
| 140 | + color: #aaa |
| 141 | + font-weight: normal |
142 | 142 |
|
143 | 143 | #nav
|
| 144 | + .nav-link |
| 145 | + cursor: pointer |
| 146 | + .nav-dropdown-container |
144 | 147 | .nav-link
|
145 |
| - cursor pointer |
146 |
| - .nav-dropdown-container |
147 |
| - .nav-link |
148 |
| - &:hover |
149 |
| - border-bottom none |
150 |
| - &:hover |
151 |
| - .nav-dropdown |
152 |
| - display block |
153 |
| - &.language |
154 |
| - margin-left 20px |
155 |
| - .arrow |
156 |
| - pointer-events none |
157 |
| - .nav-dropdown |
158 |
| - display none |
159 |
| - box-sizing border-box |
160 |
| - max-height "calc(100vh - %s)" % $header-height |
161 |
| - overflow-y auto |
162 |
| - position absolute |
163 |
| - top 100% |
164 |
| - right -15px |
165 |
| - background-color #fff |
166 |
| - padding 10px 0 |
167 |
| - border 1px solid #ddd |
168 |
| - border-bottom-color #ccc |
169 |
| - text-align left |
170 |
| - border-radius 4px |
171 |
| - white-space nowrap |
172 |
| - li |
173 |
| - line-height 1.8em |
174 |
| - margin 0 |
175 |
| - display block |
176 |
| - > ul |
177 |
| - padding-left: 0 |
178 |
| - &:first-child |
179 |
| - h4 |
180 |
| - margin-top 0 |
181 |
| - padding-top: 0 |
182 |
| - border-top: 0 |
183 |
| - a, h4 |
184 |
| - padding 0 24px 0 20px |
185 |
| - h4 |
186 |
| - // text-transform uppercase |
187 |
| - margin .45em 0 0 |
188 |
| - padding-top: .45em |
189 |
| - border-top: 1px solid #eee |
190 |
| - a |
191 |
| - color lighten($dark, 10%) |
192 |
| - font-size .9em |
193 |
| - display block |
194 |
| - &:hover |
195 |
| - color $green |
| 148 | + &:hover |
| 149 | + border-bottom: none |
| 150 | + &:hover |
| 151 | + .nav-dropdown |
| 152 | + display: block |
| 153 | + &.language |
| 154 | + margin-left: 20px |
196 | 155 | .arrow
|
197 |
| - display inline-block |
198 |
| - vertical-align middle |
199 |
| - margin-top -1px |
200 |
| - margin-left 6px |
201 |
| - margin-right -14px |
202 |
| - width 0 |
203 |
| - height 0 |
204 |
| - border-left 4px solid transparent |
205 |
| - border-right 4px solid transparent |
206 |
| - border-top 5px solid #ccc |
| 156 | + pointer-events: none |
| 157 | + .nav-dropdown |
| 158 | + display: none |
| 159 | + box-sizing: border-box |
| 160 | + max-height: "calc(100vh - %s)" % $header-height |
| 161 | + overflow-y: auto |
| 162 | + position: absolute |
| 163 | + top: 100% |
| 164 | + right: -15px |
| 165 | + background-color: #fff |
| 166 | + padding: 10px 0 |
| 167 | + border: 1px solid #ddd |
| 168 | + border-bottom-color: #ccc |
| 169 | + text-align: left |
| 170 | + border-radius: 4px |
| 171 | + white-space: nowrap |
| 172 | + li |
| 173 | + line-height: 1.8em |
| 174 | + margin: 0 |
| 175 | + display: block |
| 176 | + > ul |
| 177 | + padding-left: 0 |
| 178 | + &:first-child |
| 179 | + h4 |
| 180 | + margin-top: 0 |
| 181 | + padding-top: 0 |
| 182 | + border-top: 0 |
| 183 | + a, h4 |
| 184 | + padding: 0 24px 0 20px |
| 185 | + h4 |
| 186 | + // text-transform: uppercase |
| 187 | + margin: .45em 0 0 |
| 188 | + padding-top: .45em |
| 189 | + border-top: 1px solid #eee |
| 190 | + a |
| 191 | + color: lighten($dark, 10%) |
| 192 | + font-size: .9em |
| 193 | + display: block |
| 194 | + &:hover |
| 195 | + color: $green |
| 196 | + .arrow |
| 197 | + display: inline-block |
| 198 | + vertical-align: middle |
| 199 | + margin-top: -1px |
| 200 | + margin-left: 6px |
| 201 | + margin-right: -14px |
| 202 | + width: 0 |
| 203 | + height: 0 |
| 204 | + border-left: 4px solid transparent |
| 205 | + border-right: 4px solid transparent |
| 206 | + border-top: 5px solid #ccc |
0 commit comments