From d54afa7b2e89987b42c6f41485944c32e2827cc0 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Thu, 11 Dec 2025 20:41:43 +1000 Subject: [PATCH] BEM naming --- src/components/mixins.pug | 24 +++++++++++----------- src/pages/index.pug | 21 ++++++++----------- src/styles/index.styl | 43 ++++++++++++++++----------------------- 3 files changed, 38 insertions(+), 50 deletions(-) diff --git a/src/components/mixins.pug b/src/components/mixins.pug index 0cf3622..198b2ef 100644 --- a/src/components/mixins.pug +++ b/src/components/mixins.pug @@ -1,7 +1,7 @@ include data.pug - // Данные для меню навигации - const menuItems = { + const navbarItems = { Home: './index.html', Embedded: './embeded_details.html', OpenCV: './opencv_details.html', @@ -47,17 +47,17 @@ include data.pug { src: require('../images/sqesp32.png'), alt: 'STM32'} ] -mixin menuItem(selectedItem) - nav.menu - each menuUrl,menuName in menuItems - if menuName == selectedItem - a.menu__link(href=menuUrl) - .menu__item.menu__item_selected #{menuName} +mixin navbarMixin(selectedItem) + .navbar + each navbarUrl,navbarName in navbarItems + if navbarName == selectedItem + a.navbar__link__wrapper(href=navbarUrl) + .navbar__item.navbar__item_selected #{navbarName} else - a.menu__link(href=menuUrl) - .menu__item #{menuName} + a.navbar__link__wrapper(href=navbarUrl) + .navbar__item #{navbarName} -mixin cards() +mixin infoCardsMinxin() each cardData in smallCards .small-card .small-card__content @@ -67,6 +67,6 @@ mixin cards() .small-card__image img(src=cardData.image alt=cardData.imageAlt) -mixin gallery() +mixin galleryMixin() each img in galleryImages - img.hero-images__item(src=img.src alt=img.alt) \ No newline at end of file + img.gallery__image(src=img.src alt=img.alt) \ No newline at end of file diff --git a/src/pages/index.pug b/src/pages/index.pug index 3d80280..87cb33d 100644 --- a/src/pages/index.pug +++ b/src/pages/index.pug @@ -22,33 +22,30 @@ html(lang="en") title Portfolio body - +menuItem("Home") + +navbarMixin("Home") - .hero-images - +gallery() + .gallery + +galleryMixin() - main.main - .main__content - // Информационный блок A + .main-container + .main-container__content article.info-block h2.info-block__header #{infoBlockA.header} - .info-block__container.info-block__container_layout_a + .info-block__container.info-block__container_layout-a p.info-block__text #{infoBlockA.text} .info-block__details p.info-block__description #{infoBlockA.description} a.info-block__link(href="#") More info img.info-block__image(src=infoBlockA.img alt=infoBlockA.imgAlt) - // Информационный блок B article.info-block h2.info-block__header #{infoBlockB.header} - .info-block__container.info-block__container_layout_b + .info-block__container.info-block__container_layout-b p.info-block__text #{infoBlockB.text} img.info-block__image(src=infoBlockB.img alt=infoBlockB.imgAlt) .info-block__details p.info-block__description #{infoBlockB.description} a.info-block__link(href="#") More info - // Боковая панель - aside.sidebar - +cards() + .sidebar + +infoCardsMinxin() diff --git a/src/styles/index.styl b/src/styles/index.styl index ebf5eff..1f2331d 100644 --- a/src/styles/index.styl +++ b/src/styles/index.styl @@ -1,5 +1,4 @@ -// БЭМ блок: Меню навигации -.menu +.navbar border-top double thick silver border-bottom double thick silver font-size 0 @@ -8,7 +7,7 @@ grid-template-rows 1fr justify-items start - &__link + &__link__wrapper color black text-decoration none @@ -31,14 +30,13 @@ border-left double thin silver border-right double thin silver -// БЭМ блок: Hero изображения -.hero-images +.gallery display flex flex-direction row width 90% margin auto - &__item + &__image margin auto width 100% border thin solid black @@ -46,16 +44,12 @@ &:nth-child(2n+1) margin-top 10px -// БЭМ блок: Основной контейнер -.main +.main-container display grid grid-template-columns 3fr 1fr grid-template-rows 1fr - &__content - // Стили для основного контента -// БЭМ блок: Информационный блок .info-block border solid thin black padding 2vw @@ -67,12 +61,12 @@ text-align center &__container - &_layout_a + &_layout-a display grid grid-template-columns 3fr 3fr 2fr grid-template-rows 1fr - &_layout_b + &_layout-b display grid grid-template-columns 4fr 7fr 4fr grid-template-rows 1fr @@ -88,18 +82,15 @@ 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 @@ -114,9 +105,6 @@ font-weight bold text-align right - &__text - // Базовые стили для текста - &__link display block text-align right @@ -127,14 +115,17 @@ width 100% margin-left:10px -// Медиа-запросы @media screen and (max-width: 1000px) .small-card display flex flex-direction column + .sidebar + margin 0 + width:100% + @media screen and (max-width: 800px) - .menu + .navbar grid-template-columns 1fr 1fr grid-template-rows 1fr 1fr 1fr justify-items center @@ -145,19 +136,19 @@ border-left none border-right none - .hero-images + .gallery display inline-flex flex-direction column width 100% - &__item + &__image width 100% height 100% &:nth-child(2n+1) margin-top 0px - .main + .main-container display flex flex-direction column