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