Skip to content
Snippets Groups Projects
_layout.sass 706 B
Newer Older
Hugo Trentesaux's avatar
Hugo Trentesaux committed
// breakpoints
$breakpoint-small: 800px
$breakpoint-medium: 1600px

    
html
    background-color: #EEE
body
    background-color: #FFF
main
    min-height: calc( 100vh - 150px )
Hugo Trentesaux's avatar
Hugo Trentesaux committed

// body
body
    margin: auto
    min-height: 100vh
    
// small screen
Hugo Trentesaux's avatar
Hugo Trentesaux committed
@media (max-width: $breakpoint-small)
    body
        width: 95vw
Hugo Trentesaux's avatar
Hugo Trentesaux committed
        width: 100%

// medium screen
@media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium)
    body
        width: 80vw
Hugo Trentesaux's avatar
Hugo Trentesaux committed
        width: 80%

// large screen
@media (min-width: $breakpoint-medium)
    body
        width: 65vw
        width: 66%
    .w3-margin-mobile
        margin: 16px
    .w3-padding-mobile
        padding: 8px 16px