61 lines
1.3 KiB
Sass
61 lines
1.3 KiB
Sass
// layout/_main.sass
|
|
|
|
@use '../abstracts' as *
|
|
@use '../base' as *
|
|
|
|
// Main page wrapper: Centered flex
|
|
#page .container
|
|
display: flex
|
|
padding: 0
|
|
justify-content: center
|
|
align-items: flex-start
|
|
padding-top: space('lg')
|
|
|
|
// Article content: Fixed width, no shrink
|
|
article
|
|
width: 1140px
|
|
flex-shrink: 0
|
|
padding: 3rem
|
|
margin: 0
|
|
background-color: $bg-dark
|
|
border: 1px solid $bg-darker
|
|
|
|
ul#leftnav
|
|
width: 320px
|
|
flex-shrink: 0
|
|
list-style: none
|
|
padding: 0
|
|
margin: 0 space('xl') 0 0 // Right margin preserved (overrides the 0 for other sides)
|
|
background-color: $bg-dark
|
|
border: 1px solid $bg-darker
|
|
|
|
#leftnav li
|
|
border-bottom: 1px solid color('border-light')
|
|
|
|
&:last-child
|
|
border-bottom: none
|
|
|
|
#leftnav a
|
|
display: block
|
|
padding: space('sm') space('md') // Consistent spacing
|
|
text-decoration: none
|
|
color: $text-light // Theme text
|
|
|
|
&:hover, &:focus
|
|
background-color: rgba($accent-light, 0.1) // Green hover tint
|
|
color: $accent-light // Accent on hover
|
|
border-radius: 4px
|
|
|
|
// Responsive: Stack on mobile (add to themes/ for media queries)
|
|
@media (max-width: 1280px) // Your xl breakpoint
|
|
#page .container
|
|
flex-direction: column
|
|
align-items: center
|
|
|
|
article, #leftnav
|
|
width: 100%
|
|
max-width: 900px
|
|
margin: space('md') 0
|
|
|
|
#leftnav
|
|
margin-right: 0 |