Migrated from @blog -> @site
[editorial.git] / assets / main / sass / layout / _ghost.scss
1 // Main
2 // --------------------------------------------
3
4 #header .logo {
5 color: #3d4449;
6 font-weight: bold;
7 }
8
9 #header .logo.image {
10 padding: 0;
11 border: none;
12 display: inline-flex;
13 height: 28px;
14
15 @include breakpoint('<=small') {
16 display: flex;
17 justify-content: center;
18 text-align: center;
19 }
20 }
21
22 #header .logo.image img {
23 height: 28px;
24 transform: none !important;
25 }
26
27 @include breakpoint('<=small') {
28 #sidebar:not(.inactive) .toggle:before {
29 color: #fff;
30 }
31
32 #sidebar:not(.inactive) .toggle:after {
33 background: #f56a6a;
34 }
35 }
36
37 #banner {
38 border-bottom: solid 2px rgba(210, 215, 217, 0.75);
39 }
40
41
42 .content {
43 max-width: 700px;
44 margin: 0 auto;
45 }
46
47 // Pagination
48 // --------------------------------------------
49
50 // Couple of alignment fixes cause we're not
51 // using page numbers, just prev/next
52 .pagination {
53 display: flex;
54 justify-content: space-between;
55 align-items: center;
56 width: 100%;
57 padding: 3rem 0;
58 border-top: solid 2px rgba(210, 215, 217, 0.75);
59 }
60
61
62 // Tag Archive
63 // --------------------------------------------
64
65 .tag-header {
66 padding: 5em 0 2em 0;
67 border-bottom: solid 2px rgba(210, 215, 217, 0.75);
68 text-align: center;
69 }
70
71
72 // Author Archive
73 // --------------------------------------------
74
75 .author-header {
76 display: flex;
77 flex-direction: column;
78 align-items: center;
79 padding: 4em 0 3em 0;
80 border-bottom: solid 2px rgba(210, 215, 217, 0.75);
81 text-align: center;
82
83 }
84
85 .author-profile-image {
86 flex-shrink: 0;
87 margin: 0 0 15px 0;
88 width: 100px;
89 height: 100px;
90 box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
91 display: block;
92 background: #222;
93 border-radius: 100%;
94
95 object-fit: cover;
96 }
97
98 .author-header h1 {
99 margin-bottom: 0.5rem;
100 }
101
102 .author-meta {
103 display: flex;
104 align-items: center;
105 }
106
107 .author-meta .icon,
108 .author-meta .bull {
109 padding: 5px 10px;
110 }
111
112 .author-location:before {
113 margin-right: 10px;
114 }
115
116 // Author Box
117 // --------------------------------------------
118
119 .post-footer {
120 margin: 4rem auto 0;
121 max-width: 700px;
122 }
123
124 .authors {
125 display: flex;
126 justify-content: center;
127 flex-wrap: wrap;
128 margin: 0 -40px;
129 }
130
131 .author-box {
132 flex: 1 1 300px;
133 display: inline-flex;
134 align-items: flex-start;
135 padding: 5px 20px;
136 margin: 0 20px 20px;
137 border: none;
138 }
139
140 .author-box:hover {
141 color: #212931 !important;
142 }
143
144 .author-box:hover .author-box-name {
145 color: #18bfef;
146 transition: color 0.2s ease;
147 }
148
149 .author-box .author-profile-image {
150 height: 60px;
151 width: 60px;
152 margin-right: 20px;
153 }
154
155 .author-box-content {
156 display: flex;
157 flex-direction: column;
158 }
159
160 .author-box-label {
161 font-family: _font(family-heading);
162 font-size: 0.7rem;
163 line-height: 1em;
164 font-weight: 300;
165 text-transform: uppercase;
166 color: #999;
167 }
168
169 .author-box-name {
170 margin: 3px 0;
171 font-size: 1.3rem;
172 line-height: 1.2em;
173 transition: color 0.5s ease;
174 }
175
176 .author-box p {
177 margin: 0;
178 font-size: 0.9rem;
179 line-height: 1.5em;
180 }
181
182 .kg-image {
183 max-width: 100%;
184 }
185
186 // Content
187 // --------------------------------------------
188
189 .kg-card {
190 margin: 0 0 2rem 0;
191 }
192
193 .kg-embed-card {
194 display: flex;
195 flex-direction: column;
196 align-items: center;
197 min-width: 100%;
198 }
199
200 .kg-image {
201 max-width: 100%;
202 }
203
204 .kg-card figcaption {
205 font-size: 0.8rem;
206 line-height: 1.4em;
207 text-align: center;
208 }
209
210 .kg-width-wide {
211 position: relative;
212 margin-left: -6rem;
213 margin-right: -6rem;
214 width: calc(100% + 12rem);
215
216 @include breakpoint('<=large') {
217 margin-left: -4rem;
218 margin-right: -4rem;
219 width: calc(100% + 8rem);
220 }
221 @include breakpoint('<=medium') {
222 margin-left: -2rem;
223 margin-right: -2rem;
224 width: calc(100% + 4rem);
225 }
226 @include breakpoint('<=small') {
227 margin-left: 0;
228 margin-right: 0;
229 width: 100%;
230 }
231 }
232
233 .kg-width-full {
234 position: relative;
235 margin-left: -14.1rem;
236 margin-right: -14.1rem;
237 width: calc(100% + 28.2rem);
238
239 @include breakpoint('<=large') {
240 margin-left: -8rem;
241 margin-right: -8rem;
242 width: calc(100% + 16rem);
243 }
244 @include breakpoint('<=medium') {
245 margin-left: -4rem;
246 margin-right: -4rem;
247 width: calc(100% + 8rem);
248 }
249 @include breakpoint('<=small') {
250 margin-left: -2rem;
251 margin-right: -2rem;
252 width: calc(100% + 4rem);
253 }
254 }
255
256 .kg-gallery-container {
257 display: flex;
258 flex-direction: column;
259 margin-left: -6rem;
260 margin-right: -6rem;
261 width: calc(100% + 12rem);
262
263 @include breakpoint('<=large') {
264 margin-left: -4rem;
265 margin-right: -4rem;
266 width: calc(100% + 8rem);
267 }
268 @include breakpoint('<=medium') {
269 margin-left: -2rem;
270 margin-right: -2rem;
271 width: calc(100% + 4rem);
272 }
273 @include breakpoint('<=small') {
274 margin-left: 0;
275 margin-right: 0;
276 width: 100%;
277 }
278 }
279
280 .kg-gallery-row {
281 display: flex;
282 flex-direction: row;
283 justify-content: center;
284 }
285
286 .kg-gallery-image img {
287 display: block;
288 margin: 0;
289 width: 100%;
290 height: 100%;
291 }
292
293 .kg-gallery-row:not(:first-of-type) {
294 margin: 0.75em 0 0 0;
295 }
296
297 .kg-gallery-image:not(:first-of-type) {
298 margin: 0 0 0 0.75em;
299 }
300
301 .kg-gallery-card + .kg-image-card.kg-width-wide,
302 .kg-gallery-card + .kg-gallery-card,
303 .kg-image-card.kg-width-wide + .kg-gallery-card,
304 .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
305 margin: -2.25em 0 3em;
306 }
307
308 // Error Pages
309 // --------------------------------------------
310
311 .error-page {
312 height: 100%;
313 display: flex;
314 flex-direction: column;
315 }
316
317 .error-wrapper {
318 flex-grow: 1;
319 display: flex;
320 justify-content: center;
321 align-items: center;
322 height: 100%;
323 width: 100%;
324 padding-bottom: 8rem !important;
325 text-align: center;
326 }
327
328 .error-code {
329 margin: 0;
330 }