66 lines
1.3 KiB
Sass
66 lines
1.3 KiB
Sass
|
||
// Grid
|
||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||
@mixin container
|
||
margin: 0 auto
|
||
position: relative
|
||
max-width: 110rem
|
||
padding: 0 2.0rem;
|
||
width: 100%
|
||
|
||
.grid
|
||
@include container
|
||
|
||
$main-width: 70%
|
||
$aside-width: 96% - $main-width
|
||
|
||
& &__main
|
||
width: $main-width
|
||
float: left
|
||
position: relative
|
||
|
||
& &__aside
|
||
width: $aside-width
|
||
// background-color: $color-bright
|
||
float: right
|
||
position: relative
|
||
|
||
display: flex
|
||
flex-direction: column
|
||
justify-content: space-around
|
||
|
||
&::after
|
||
@include clear
|
||
|
||
// Small devices (landscape phones, 576px and up)
|
||
@media (max-width: $small-devices)
|
||
.grid
|
||
& &__aside
|
||
flex-direction: column !important
|
||
// Medium devices (tablets, 768px and up)
|
||
@media (max-width: $medium-devices)
|
||
pass
|
||
// Large devices (desktops, 992px and up)
|
||
@media (max-width: $large-devices)
|
||
.grid
|
||
& &__main
|
||
width: 100%
|
||
float: none
|
||
|
||
& &__aside
|
||
width: 100%
|
||
float: none
|
||
flex-direction: row
|
||
&--tablet-column
|
||
flex-direction: column
|
||
&--reverse-order
|
||
transform: scaleY(-1)
|
||
& &__main--reverse-order
|
||
transform: scaleY(-1)
|
||
& &__aside--reverse-order
|
||
transform: scaleY(-1)
|
||
// Extra large devices (large desktops, 1200px and up)
|
||
@media (max-width: $x-large-devices)
|
||
pass
|
||
|
||
|