|
212 | 212 | border: 1px solid #FFFFFF; |
213 | 213 | } |
214 | 214 |
|
| 215 | +/*===================================================== |
| 216 | + contents of: styles/post.css |
| 217 | + =====================================================*/ |
| 218 | +.post { |
| 219 | + /** |
| 220 | + * Lay out the children of this container with |
| 221 | + * flexbox, which is horizontal by default. |
| 222 | + */ |
| 223 | + display: -ms-flexbox; |
| 224 | + display: flex; |
| 225 | +} |
| 226 | + |
| 227 | +.postUser { |
| 228 | + /** |
| 229 | + * The flex property is a short-hand for setting |
| 230 | + * the flex-grow, flex-shrink, and flex-basis |
| 231 | + * properties. These properties control how the |
| 232 | + * element resizes to fill its container. |
| 233 | + * |
| 234 | + * The value we're using here is actually the |
| 235 | + * default, but I'm including so I can explain it |
| 236 | + * a bit. The default value equates to: |
| 237 | + * |
| 238 | + * - flex-grow: 0 |
| 239 | + * - flex-shrink: 1 |
| 240 | + * - flex-basis: auto |
| 241 | + * |
| 242 | + * We set flex-grow to 0, so this element won't |
| 243 | + * expand to fill its container. |
| 244 | + * |
| 245 | + * We'll then set flex-shrink to 1 so that the |
| 246 | + * element will shrink as its container gets |
| 247 | + * smaller. However, it will only shrink so far |
| 248 | + * because... |
| 249 | + * |
| 250 | + * ...we set flex-basis to auto. This causes |
| 251 | + * the content's size to also be a factor in the |
| 252 | + * calculation of the element's size. Because |
| 253 | + * the width of a child element is set (below), |
| 254 | + * this element won't shrink below that size. |
| 255 | + * |
| 256 | + * The net result is that this element stays a |
| 257 | + * fixed size, neither expanding nor shrinking. |
| 258 | + */ |
| 259 | + -ms-flex: 0 1 auto; |
| 260 | + flex: 0 1 auto; |
| 261 | +} |
| 262 | + |
| 263 | + .postUser__portrait { |
| 264 | + /** |
| 265 | + * We're using these three flexbox properties |
| 266 | + * here to center the portrait icon inside of |
| 267 | + * this element. |
| 268 | + * |
| 269 | + * We'll explore these properties in more detail |
| 270 | + * in the "Stay Centered" section, so I'll only |
| 271 | + * briefly summarize here: |
| 272 | + * |
| 273 | + * - display: flex instructs the browser to |
| 274 | + * use flexbox to lay out this element's |
| 275 | + * children. |
| 276 | + * - justify-content: center will center the |
| 277 | + * icon along the main axis. |
| 278 | + * - align-items: center will center the icon |
| 279 | + * along the secondary (perpendicular) axis. |
| 280 | + */ |
| 281 | + display: -ms-flexbox; |
| 282 | + display: flex; |
| 283 | + -ms-flex-pack: center; |
| 284 | + justify-content: center; |
| 285 | + -ms-flex-align: center; |
| 286 | + align-items: center; |
| 287 | + |
| 288 | + width: 100px; |
| 289 | + height: 90px; |
| 290 | + font-size: 70px; |
| 291 | + line-height: 0; |
| 292 | + } |
| 293 | + |
| 294 | + .postUser__name { |
| 295 | + color: #57727C; |
| 296 | + font-size: 12px; |
| 297 | + font-weight: 700; |
| 298 | + text-align: center; |
| 299 | + } |
| 300 | + |
| 301 | +.postBody { |
| 302 | + /** |
| 303 | + * We'll use the short-hand flex property again |
| 304 | + * here, to make the body of the post expand to |
| 305 | + * fill the container, and shrink as the container |
| 306 | + * becomes narrower. |
| 307 | + * |
| 308 | + * By setting flex-grow to 1, we cause this |
| 309 | + * element to expand to fill the container. |
| 310 | + * |
| 311 | + * Setting flex-shrink to 1 causes this element |
| 312 | + * to shrink with the container. |
| 313 | + * |
| 314 | + * Last, we set flex-basis to 0 so that its |
| 315 | + * size is solely determined by the size of |
| 316 | + * the container. (The default value is auto, |
| 317 | + * which would cause the content's size to also |
| 318 | + * be a factor in this calculation.) |
| 319 | + * |
| 320 | + * The net result of these properties is that the |
| 321 | + * element is a fluid size, and will expand and |
| 322 | + * shrink with its container. |
| 323 | + * |
| 324 | + * NOTE: IE11 ignores flex short-hand declarations |
| 325 | + * with unitless flex-basis values. So we have to |
| 326 | + * use 0% instead of 0 as a workaround. You can |
| 327 | + * find more info at: |
| 328 | + * github.com/philipwalton/flexbugs. |
| 329 | + */ |
| 330 | + -ms-flex: 1 1 0%; |
| 331 | + flex: 1 1 0%; |
| 332 | + |
| 333 | + position: relative; |
| 334 | + padding: 15px; |
| 335 | + border: 1px solid #CAD0D2; |
| 336 | + border-radius: 4px; |
| 337 | +} |
| 338 | + |
| 339 | +.postBody:after, |
| 340 | +.postBody:before { |
| 341 | + right: 100%; |
| 342 | + top: 35px; |
| 343 | + border: solid transparent; |
| 344 | + content: " "; |
| 345 | + height: 0; |
| 346 | + width: 0; |
| 347 | + position: absolute; |
| 348 | + pointer-events: none; |
| 349 | +} |
| 350 | + |
| 351 | +.postBody:after { |
| 352 | + border-color: transparent; |
| 353 | + border-right-color: #ffffff; |
| 354 | + border-width: 8px; |
| 355 | + margin-top: -8px; |
| 356 | +} |
| 357 | + |
| 358 | +.postBody:before { |
| 359 | + border-color: transparent; |
| 360 | + border-right-color: #CAD0D2; |
| 361 | + border-width: 9px; |
| 362 | + margin-top: -9px; |
| 363 | +} |
| 364 | + |
| 365 | + .postBody__content { |
| 366 | + color: #57727C; |
| 367 | + font-size: 12px; |
| 368 | + } |
| 369 | + |
| 370 | + .postBody__date { |
| 371 | + margin-top: 5px; |
| 372 | + color: #86969C; |
| 373 | + font-size: 10px; |
| 374 | + text-transform: uppercase; |
| 375 | + letter-spacing: 1px; |
| 376 | + } |
| 377 | + |
215 | 378 | /*===================================================== |
216 | 379 | contents of: styles/side-bar.css |
217 | 380 | =====================================================*/ |
|
419 | 582 | } |
420 | 583 |
|
421 | 584 | .featureListItem__description { |
422 | | - color: #86969C; |
| 585 | + color: #57727C; |
423 | 586 | font-size: 12px; |
424 | 587 | } |
425 | 588 |
|
| 589 | +/*===================================================== |
| 590 | + contents of: styles/stream.css |
| 591 | + =====================================================*/ |
| 592 | +.stream { |
| 593 | + /** |
| 594 | + * Lay out the children of this container with |
| 595 | + * flexbox. |
| 596 | + */ |
| 597 | + display: -ms-flexbox; |
| 598 | + display: flex; |
| 599 | + |
| 600 | + /* |
| 601 | + * Set the main axis to be vertical, but present |
| 602 | + * the children in reverse order of that in which |
| 603 | + * they occur in the DOM. |
| 604 | + */ |
| 605 | + -ms-flex-direction: column-reverse; |
| 606 | + flex-direction: column-reverse; |
| 607 | +} |
| 608 | + |
| 609 | +.post + .post { |
| 610 | + margin-bottom: 5px; |
| 611 | +} |
| 612 | + |
426 | 613 | /*===================================================== |
427 | 614 | contents of: styles/card.css |
428 | 615 | =====================================================*/ |
|
530 | 717 | .cardGroup__card { |
531 | 718 | /** |
532 | 719 | * The flex property is a short-hand for setting |
533 | | - * the flex-shrink, flex-grow, and flex-basis |
| 720 | + * the flex-grow, flex-shrink, and flex-basis |
534 | 721 | * properties. These properties control how the |
535 | 722 | * element resizes to fill its container. |
536 | 723 | * |
|
0 commit comments