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