summaryrefslogtreecommitdiff
path: root/test.scss
blob: 1d578b72956dde90a75413669cbac270bdfaf8d1 (plain)
  1. @import 'h5bp/helpers';
  2. @import 'compass/css3';
  3. #content {
  4. width: 96%;
  5. max-width: none;
  6. margin: 2%;
  7. }
  8. .inlinepage {
  9. position: relative;
  10. //set to make inline header position work
  11. border: 0;
  12. padding: 0;
  13. margin: 0 0 1em 0;
  14. background-color: transparent;
  15. height: 18em;
  16. overflow: hidden;
  17. }
  18. //set to annull style.css
  19. .inlinecontent {
  20. margin-top: 0;
  21. }
  22. .inlineheader {
  23. display: block;
  24. position: absolute;
  25. bottom: 0;
  26. left: 0;
  27. width: 100%;
  28. a {
  29. font-weight: normal;
  30. color: white;
  31. background-color: #6699cc;
  32. display: block;
  33. padding: 0.5em;
  34. opacity: 0.8;
  35. }
  36. }
  37. .inlinecontent p {
  38. margin-bottom: 0;
  39. margin-top: 0;
  40. }
  41. .inlinefooter,
  42. .inlineheader .author,
  43. .sidebar,
  44. .farbar {
  45. @include h5bp-hidden;
  46. }
  47. //Responsive design
  48. @media screen and (max-width: 480px) {
  49. #content {
  50. width: 100%;
  51. margin: 0;
  52. }
  53. .columns {
  54. @include column-count(1);
  55. }
  56. .inlinepage {
  57. margin: 0;
  58. }
  59. }
  60. @media screen and (min-width: 480px) and (max-width: 700px) {
  61. .columns {
  62. @include column-count(2);
  63. }
  64. }
  65. @media screen and (min-width: 701px) {
  66. .columns {
  67. @include column-count(3);
  68. }
  69. }