layout.css

Stark layout method

To avoid obscuring CSS added to the page by Drupal or a contrib module, the Stark theme itself has no styling, except just enough CSS to arrange the page in a traditional "Header, sidebars, content, and footer" layout.

This layout method works reasonably well, but shouldn't be used on a production site because it can break. For example, if an over-large image (one that is wider than 20% of the viewport) is in the left sidebar, the image will overlap with the #content to the right. The exception to this is IE6 which will just hide the navigation block completely in these instances due to a positioning bug.

File

drupal/themes/stark/layout.css
View source
  1. /**
  2. * @file
  3. * Stark layout method
  4. *
  5. * To avoid obscuring CSS added to the page by Drupal or a contrib module, the
  6. * Stark theme itself has no styling, except just enough CSS to arrange the page
  7. * in a traditional "Header, sidebars, content, and footer" layout.
  8. *
  9. * This layout method works reasonably well, but shouldn't be used on a
  10. * production site because it can break. For example, if an over-large image
  11. * (one that is wider than 20% of the viewport) is in the left sidebar, the
  12. * image will overlap with the #content to the right. The exception to this
  13. * is IE6 which will just hide the navigation block completely in these
  14. * instances due to a positioning bug.
  15. */
  16. #content,
  17. #sidebar-first,
  18. #sidebar-second {
  19. float: left;
  20. display: inline;
  21. position: relative;
  22. }
  23. #content {
  24. width: 100%;
  25. }
  26. body.sidebar-first #content {
  27. width: 80%;
  28. left: 20%; /* LTR */
  29. }
  30. body.sidebar-second #content {
  31. width: 80%;
  32. }
  33. body.two-sidebars #content {
  34. width: 60%;
  35. left: 20%;
  36. }
  37. #sidebar-first {
  38. width: 20%;
  39. left: -80%; /* LTR */
  40. }
  41. body.two-sidebars #sidebar-first {
  42. left: -60%; /* LTR */
  43. }
  44. #sidebar-second {
  45. float: right; /* LTR */
  46. width: 20%;
  47. }
  48. .section {
  49. margin: 10px;
  50. }