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