123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- // Layout
- // ------
- // Using a negative margin technique, made possible with Bourbon Neat, the page
- // is loaded in this order:
- // 1. Header
- // 2. Content
- // 3. Navigation menus
- // 4. Sidebar Left
- // 5. Sideabr Right
- //
- // Layout rules.
- // (Disclaimer: do not change if you're not sure you know what you're doing.)
- .container
- @include outer-container
- width: auto
- #content
- .no-sidebar &
- // 100% width for small screens. No definitions required.
- // Same logic for medium screens. No definitions required.
- // Same logic for large screens. No definitions required.
- .one-sidebar.sidebar-second &
- // 100% width for small screens. No definitions required.
- // Span this div 6 columns wide for medium screens.
- @include media($medium-screen-up)
- @include span-columns(6)
- // Span this div 8 columns wide for large screens.
- @include media($large-screen-up)
- @include span-columns(8)
- .one-sidebar.sidebar-first &
- // 100% width for small screens. No definitions required.
- // Span this div 6 columns wide for medium screens.
- @include media($medium-screen-up)
- @include span-columns(6)
- @include shift(2)
- // Span this div 9 columns wide for large screens.
- @include media($large-screen-up)
- @include span-columns(9)
- @include shift(3)
- .two-sidebars &
- // 100% width for small screens. No definitions required.
- // Span this div 4 columns wide for medium screens.
- @include media($medium-screen-up)
- @include span-columns(4)
- @include shift(2)
- // Span this div 5 columns wide for large screens.
- @include media($large-screen-up)
- @include span-columns(5)
- @include shift(3)
- #sidebar-first
- // 100% width for small screens. No definitions required.
- // Span this div 2 columns wide for medium screens.
- @include media($medium-screen-up)
- @include span-columns(2)
- // Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
- @include shift(-6)
- .one-sidebar.sidebar-first &
- @include shift(-8)
- @include media($large-screen-up)
- // Span this div 3 columns wide for large screens.
- @include span-columns(3)
- // Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
- @include shift(-8)
- .one-sidebar.sidebar-first &
- @include shift(-12)
- #sidebar-second
- // 100% width for small screens. No definitions required.
- // Span this div 2 columns wide for medium screens.
- @include media($medium-screen-up)
- @include span-columns(2)
- @include shift(0)
- @include media($large-screen-up)
- // Span this div 4 columns wide for large screens.
- @include span-columns(4)
- @include shift(0)
- #footer
- float: none
- clear: both
- // Region Colors. Delete when starting a new theme.
- #header, #footer,
- #sidebar-first,
- #sidebar-second,
- #navigation
- background: rgba(#aaa, 0.2)
- // Layout Helpers
- #header,
- #footer,
- .mission,
- .breadcrumb,
- .node
- clear: both
|