168 lines
3.7 KiB
Stylus
168 lines
3.7 KiB
Stylus
// БЭМ блок: Меню навигации
|
||
.menu
|
||
border-top double thick silver
|
||
border-bottom double thick silver
|
||
font-size 0
|
||
display grid
|
||
grid-template-columns repeat(7, min-content)
|
||
grid-template-rows 1fr
|
||
justify-items start
|
||
|
||
&__link
|
||
color black
|
||
text-decoration none
|
||
|
||
&__item
|
||
display inline-block
|
||
width max-content
|
||
height 3em
|
||
line-height 3em
|
||
text-align center
|
||
vertical-align middle
|
||
padding 0 10px
|
||
margin 0 10px
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
font-size medium
|
||
|
||
&_selected
|
||
color green
|
||
font-weight bold
|
||
border-left double thin silver
|
||
border-right double thin silver
|
||
|
||
// БЭМ блок: Hero изображения
|
||
.hero-images
|
||
display flex
|
||
flex-direction row
|
||
width 90%
|
||
margin auto
|
||
|
||
&__item
|
||
margin auto
|
||
width 100%
|
||
border thin solid black
|
||
|
||
&:nth-child(2n+1)
|
||
margin-top 10px
|
||
|
||
// БЭМ блок: Основной контейнер
|
||
.main
|
||
display grid
|
||
grid-template-columns 3fr 1fr
|
||
grid-template-rows 1fr
|
||
|
||
&__content
|
||
// Стили для основного контента
|
||
|
||
// БЭМ блок: Информационный блок
|
||
.info-block
|
||
border solid thin black
|
||
padding 2vw
|
||
margin 1vw 0
|
||
|
||
&__header
|
||
display block
|
||
font-weight bold
|
||
text-align center
|
||
|
||
&__container
|
||
&_layout_a
|
||
display grid
|
||
grid-template-columns 3fr 3fr 2fr
|
||
grid-template-rows 1fr
|
||
|
||
&_layout_b
|
||
display grid
|
||
grid-template-columns 4fr 7fr 4fr
|
||
grid-template-rows 1fr
|
||
|
||
& > *
|
||
margin 2vw
|
||
|
||
&__text, &__description
|
||
text-align justify
|
||
|
||
&__image
|
||
margin auto
|
||
width 100%
|
||
|
||
&__link
|
||
// Стили для ссылок
|
||
color inherit
|
||
|
||
&__details
|
||
// Стили для деталей
|
||
|
||
// БЭМ блок: Боковая панель
|
||
.sidebar
|
||
border-left thin solid black
|
||
margin 30px 0 0 50px
|
||
|
||
// БЭМ блок: Маленькая карточка
|
||
.small-card
|
||
margin 20px 10px 0
|
||
display grid
|
||
grid-template-columns 1fr 1fr
|
||
grid-template-rows auto
|
||
|
||
&__content
|
||
text-align justify
|
||
|
||
&__header
|
||
display block
|
||
font-weight bold
|
||
text-align right
|
||
|
||
&__text
|
||
// Базовые стили для текста
|
||
|
||
&__link
|
||
display block
|
||
text-align right
|
||
color inherit
|
||
|
||
&__image
|
||
& img
|
||
width 100%
|
||
margin-left:10px
|
||
|
||
// Медиа-запросы
|
||
@media screen and (max-width: 1000px)
|
||
.small-card
|
||
display flex
|
||
flex-direction column
|
||
|
||
@media screen and (max-width: 800px)
|
||
.menu
|
||
grid-template-columns 1fr 1fr
|
||
grid-template-rows 1fr 1fr 1fr
|
||
justify-items center
|
||
|
||
&__item
|
||
&_selected
|
||
border-bottom double thick silver
|
||
border-left none
|
||
border-right none
|
||
|
||
.hero-images
|
||
display inline-flex
|
||
flex-direction column
|
||
width 100%
|
||
|
||
&__item
|
||
width 100%
|
||
height 100%
|
||
|
||
&:nth-child(2n+1)
|
||
margin-top 0px
|
||
|
||
.main
|
||
display flex
|
||
flex-direction column
|
||
|
||
.info-block
|
||
&__container
|
||
&_layout_a, &_layout_b
|
||
display flex
|
||
flex-direction column |