]>
Commit | Line | Data |
---|---|---|
64f81bc3 TC |
1 | /* ========================================================================== |
2 | Article | |
3 | ========================================================================== */ | |
4 | ||
5 | #article { | |
6 | font-size: 20px; | |
7 | margin: 0 auto; | |
dc23bf9f | 8 | padding-bottom: 80px; |
64f81bc3 TC |
9 | max-width: 45em; |
10 | ||
11 | article { | |
12 | color: #424242; | |
13 | font-size: 18px; | |
14 | line-height: 1.7em; | |
a6e56375 | 15 | overflow-wrap: break-word; |
64f81bc3 TC |
16 | |
17 | h1, | |
18 | h2, | |
19 | h3, | |
20 | h4, | |
21 | h5, | |
22 | h6 { | |
23 | color: #212121; | |
24 | ||
25 | strong { | |
26 | font-weight: 500; | |
27 | } | |
28 | } | |
29 | ||
30 | h6 { | |
31 | font-size: 1.2rem; | |
32 | } | |
33 | ||
34 | h5 { | |
35 | font-size: 1.6rem; | |
36 | } | |
37 | ||
38 | h4 { | |
39 | font-size: 1.9rem; | |
40 | } | |
41 | ||
42 | h3 { | |
43 | font-size: 2.2rem; | |
44 | } | |
45 | ||
46 | h2 { | |
47 | font-size: 2.5rem; | |
48 | } | |
49 | ||
50 | h1 { | |
51 | font-size: 2.7rem; | |
52 | } | |
53 | ||
54 | a { | |
55 | border-bottom: 1px dotted #03a9f4; | |
56 | text-decoration: none; | |
57 | } | |
58 | ||
59 | a:hover { | |
60 | border-bottom-style: solid; | |
61 | } | |
62 | ||
63 | ul { | |
64 | padding-left: 30px; | |
65 | } | |
66 | ||
67 | ul, | |
68 | ul li { | |
69 | list-style-type: disc; | |
70 | } | |
71 | ||
72 | blockquote { | |
73 | font-style: italic; | |
74 | } | |
75 | ||
76 | strong { | |
77 | font-weight: bold; | |
78 | } | |
79 | } | |
80 | ||
81 | img, | |
82 | figure { | |
83 | max-width: 100%; | |
84 | height: auto; | |
85 | } | |
86 | ||
87 | pre { | |
88 | box-sizing: border-box; | |
89 | margin: 0 0 1.75em; | |
90 | border: #e3f2fd 1px solid; | |
91 | width: 100%; | |
92 | padding: 10px; | |
93 | font-family: monospace; | |
94 | font-size: 0.8em; | |
95 | white-space: pre; | |
96 | overflow: auto; | |
97 | background: #f5f5f5; | |
98 | border-radius: 3px; | |
99 | } | |
100 | ||
101 | > header > h1 { | |
102 | font-size: 2em; | |
103 | margin: 2.1rem 0 0.68rem; | |
104 | } | |
105 | ||
106 | aside { | |
107 | .tools { | |
64f81bc3 TC |
108 | display: flex; |
109 | flex-flow: row wrap; | |
64f81bc3 | 110 | |
4c6ee89c TC |
111 | .stats { |
112 | font-size: 0.8em; | |
79ea33c9 | 113 | margin: 8px 5px 5px; |
4c6ee89c TC |
114 | |
115 | li { | |
116 | display: inline-flex; | |
117 | vertical-align: middle; | |
79ea33c9 KD |
118 | margin: 3px 5px; |
119 | ||
120 | i.material-icons { | |
121 | color: #3e3e3e; | |
122 | margin-right: 3px; | |
123 | } | |
4c6ee89c | 124 | } |
64f81bc3 | 125 | |
4c6ee89c TC |
126 | a { |
127 | color: #000; | |
128 | text-decoration: none; | |
129 | } | |
64f81bc3 | 130 | } |
64f81bc3 | 131 | |
4c6ee89c TC |
132 | .tags { |
133 | float: right; | |
134 | margin: 5px 15px 10px; | |
135 | } | |
64f81bc3 TC |
136 | } |
137 | ||
138 | .chip { | |
139 | background-color: $blueAccentColor; | |
140 | padding: 0 15px 0 10px; | |
141 | margin: auto 2px; | |
84b041e8 | 142 | border-radius: 6px; |
64f81bc3 TC |
143 | |
144 | a, | |
145 | i { | |
146 | color: #fff; | |
147 | } | |
2003ffa9 TC |
148 | |
149 | i.material-icons { | |
150 | float: right; | |
151 | font-size: 20px; | |
152 | line-height: 32px; | |
153 | padding-left: 8px; | |
154 | } | |
64f81bc3 TC |
155 | } |
156 | } | |
157 | } | |
158 | ||
159 | .reader-mode { | |
2003ffa9 | 160 | width: 70px !important; |
64f81bc3 TC |
161 | transition: width 0.2s ease; |
162 | ||
163 | .collapsible-body { | |
164 | height: 0; | |
165 | overflow: hidden; | |
166 | } | |
167 | ||
168 | span { | |
169 | opacity: 0; | |
170 | transition: opacity 0.2s ease; | |
171 | } | |
64f81bc3 | 172 | |
2003ffa9 TC |
173 | &:hover { |
174 | width: 260px !important; | |
64f81bc3 | 175 | |
2003ffa9 TC |
176 | span { |
177 | opacity: 1; | |
178 | } | |
64f81bc3 | 179 | } |
0a81f9b9 S |
180 | |
181 | .collapsible-body { | |
182 | height: auto; | |
183 | ||
184 | li a i.material-icons { | |
185 | margin: auto 5px auto -8px; | |
186 | } | |
187 | } | |
64f81bc3 TC |
188 | } |
189 | ||
190 | .progress { | |
191 | position: fixed; | |
192 | top: 0; | |
193 | width: 100%; | |
194 | height: 3px; | |
195 | margin: 0; | |
196 | z-index: 9999; | |
197 | } |