updating styles

src/styles/index.styl

@@ -0,0 +1,259 @@
+// Variables
+$color-bg = #F0F8FF
+$color-text = black
+$color-primary = green
+$color-border = silver
+$color-footer-bg = #f8f9fa
+
+$border-thin = 1px solid black
+$border-double = double 4px silver
+$border-double-thick = double thick silver
+
+$spacing-sm = 10px
+$spacing-md = 20px
+$spacing-lg = 30px
+$spacing-xl = 50px
+
+$breakpoint-mobile = 800px
+$breakpoint-tablet = 1000px
+
+// Mixins
+flex-center()
+  display flex
+  align-items center
+  justify-content center
+
+text-justify()
+  text-align justify
+
+border-block()
+  border $border-thin
+  padding 2vw
+  margin 1vw 0
+
+// Base
+*
+  box-sizing border-box
+  margin 0
+  padding 0
+
+.page
+  font-family Arial, sans-serif
+  background-color $color-bg
+  color $color-text
+
+// Navigation (БЭМ)
+.nav
+  border-top $border-double-thick
+  border-bottom $border-double-thick
+  
+  &__list
+    display grid
+    grid-template-columns repeat(7, min-content)
+    grid-template-rows 1fr
+    justify-items start
+    list-style none
+    font-size 0
+    
+    @media screen and (max-width: $breakpoint-mobile)
+      grid-template-columns 1fr 1fr
+      grid-template-rows 1fr 1fr 1fr
+      justify-items center
+  
+  &__item
+    display inline-block
+  
+  &__link
+    display block
+    width max-content
+    height 3em
+    line-height 3em
+    text-align center
+    padding 0 $spacing-sm
+    margin 0 $spacing-sm
+    color $color-text
+    text-decoration none
+    font-size medium
+    overflow hidden
+    text-overflow ellipsis
+    
+    &--active
+      color $color-primary
+      font-weight bold
+      border-left $border-double
+      border-right $border-double
+      
+      @media screen and (max-width: $breakpoint-mobile)
+        border-left none
+        border-right none
+        border-bottom $border-double-thick
+
+// Gallery (БЭМ)
+.gallery
+  display flex
+  flex-direction row
+  width 90%
+  margin auto
+  gap 0
+  
+  @media screen and (max-width: $breakpoint-mobile)
+    flex-direction column
+    width 100%
+  
+  &__item
+    flex 1
+    margin auto
+    
+  &__image
+    width 100%
+    height auto
+    border $border-thin
+    
+    &:nth-child(odd)
+      margin-top $spacing-sm
+      
+      @media screen and (max-width: $breakpoint-mobile)
+        margin-top 0
+
+// Main Layout (БЭМ)
+.main
+  display grid
+  grid-template-columns 3fr 1fr
+  grid-template-rows 1fr
+  gap 0
+  
+  @media screen and (max-width: $breakpoint-mobile)
+    display flex
+    flex-direction column
+  
+  &__content
+    padding-right 0
+  
+  &__sidebar
+    border-left $border-thin
+    margin $spacing-lg 0 0 $spacing-xl
+    padding-left $spacing-md
+    
+    @media screen and (max-width: $breakpoint-mobile)
+      border-left none
+      margin $spacing-lg 0 0 0
+      padding-left 0
+
+// Content Block (БЭМ)
+.content-block
+  border-block()
+  
+  &__header
+    text-align center
+    margin-bottom 1vw
+  
+  &__title
+    font-weight bold
+    font-size 1.2em
+  
+  &__body
+    &--layout-a
+      display grid
+      grid-template-columns 3fr 3fr 2fr
+      grid-template-rows 1fr
+      
+      @media screen and (max-width: $breakpoint-mobile)
+        display flex
+        flex-direction column
+    
+    &--layout-b
+      display grid
+      grid-template-columns 4fr 7fr 4fr
+      grid-template-rows 1fr
+      
+      @media screen and (max-width: $breakpoint-mobile)
+        display flex
+        flex-direction column
+  
+  &__column
+    margin 2vw
+    
+    &--image
+      flex-center()
+    
+    &--image-center
+      flex-center()
+      grid-column 2
+  
+  &__text
+    text-justify()
+  
+  &__image
+    width 100%
+    height auto
+  
+  &__link
+    display block
+    text-align right
+    margin-top $spacing-sm
+    color $color-text
+    text-decoration none
+    font-size 0.9em
+    
+    &:hover
+      text-decoration underline
+
+// Sidebar Card (БЭМ)
+.sidebar-card
+  display grid
+  grid-template-columns 1fr 1fr
+  grid-template-rows auto
+  margin $spacing-md $spacing-sm 0
+  gap $spacing-sm
+  
+  @media screen and (max-width: $breakpoint-tablet)
+    display flex
+    flex-direction column
+  
+  &__content
+    display flex
+    flex-direction column
+    justify-content space-between
+  
+  &__title
+    font-weight bold
+    text-align right
+    margin-bottom $spacing-sm
+  
+  &__text
+    text-justify()
+    font-size 0.9em
+    margin-bottom $spacing-sm
+  
+  &__link
+    display block
+    text-align right
+    color $color-text
+    text-decoration none
+    font-size 0.85em
+    
+    &:hover
+      text-decoration underline
+  
+  &__image-wrapper
+    overflow hidden
+  
+  &__image
+    width 100%
+    height auto
+    display block
+    transition transform 0.3s ease
+    
+    &:hover
+      transform scale(1.05)
+
+// Footer (БЭМ)
+.footer
+  background-color $color-footer-bg
+  padding 1em 2em
+  margin-top $spacing-lg
+  display flex
+  gap 2em
+  
+  &__text
+    font-size 1.1em