Lungo.layout.article.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /**
  2. * Stylesheet
  3. *
  4. * @namespace Lungo.Layout
  5. * @class Article
  6. *
  7. * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  8. */
  9. /* DIMENSIONS */
  10. /* COLORS */
  11. article {
  12. position: absolute;
  13. width: inherit;
  14. height: auto;
  15. top: 0;
  16. bottom: 0;
  17. display: none;
  18. visibility: hidden;
  19. z-index: 0;
  20. }
  21. article.current,
  22. article:first-child {
  23. visibility: visible;
  24. display: block;
  25. z-index: 1;
  26. }
  27. article.pull {
  28. -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
  29. -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
  30. -ms-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
  31. -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
  32. transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
  33. }
  34. article .text {
  35. margin: 4px 0 8px;
  36. display: block;
  37. font-size: 0.9em;
  38. font-weight: normal;
  39. line-height: 1.4em;
  40. }
  41. header:not(.extended) ~ article {
  42. top: 44px;
  43. }
  44. header.extended ~ article {
  45. top: 74px;
  46. }
  47. footer ~ article {
  48. bottom: 44px;
  49. }
  50. @media handheld, only screen and (min-width: 768px) {
  51. article.aside {
  52. -webkit-transform: translate3d(0px, 0, 0);
  53. -moz-transform: translate3d(0px, 0, 0);
  54. -ms-transform: translate3d(0px, 0, 0);
  55. -o-transform: translate3d(0px, 0, 0);
  56. transform: translate3d(0px, 0, 0);
  57. }
  58. }