diff --git a/main/_front/src/html/header.html b/main/_front/src/html/header.html index 4767959..9d7e95c 100644 --- a/main/_front/src/html/header.html +++ b/main/_front/src/html/header.html @@ -1,89 +1,58 @@ - + - - Шапка сайта + + + Document - - - - - - - - - - - - - - - - - - - - - +
-
- - +
diff --git a/main/_front/src/scss/_header.scss b/main/_front/src/scss/_header.scss index 7f87670..f32ec94 100644 --- a/main/_front/src/scss/_header.scss +++ b/main/_front/src/scss/_header.scss @@ -1,58 +1,46 @@ -.header-inner -{ - display: flex; - justify-content: space-between; - align-items: center; -} -.header -{ - padding-top: 7.5px ; - padding-bottom: 7.5px; - border-bottom: 1px #D8D8D8 solid; +@import "../vars"; + +.header { + padding: 15px 0; + border-bottom: 1px solid $secondary-hover; } -.nav -{ + +.header__inner { display: flex; + justify-content: space-between; align-items: center; - font-size: 18px; - font-weight: 400; } -.header-logo -{ + +.header__logo { display: flex; - justify-content: space-between; + column-gap: 30px; align-items: center; -} -.name -{ - font-size: 28px; - font-weight: 400; - color:#712CF9; - text-decoration: none; - vertical-align: middle; - margin: 15px; -} -.logo -{ - fill: #712CF9; cursor: pointer; } -.link -{ - color: #636363; - text-decoration: none; - opacity: 1; - vertical-align: middle; - margin: 15px; -} -.icon -{ - margin-left: 15px; + +.header__title { + font-size: 28px; + color: $primary; } -.link:hover, .name:hover,.logo:hover,.icon:hover -{ - fill:#712CF9; - color: #712CF9; - transition: fill 0.2s ease, color 0.2s ease; +.header__nav { + display: flex; + column-gap: 20px; + align-items: center; } + +.header__link { + font-size: 18px; + color: #636363; + transition: color .2s ease; + &:hover, &.active { + color: $primary; + & svg { + fill: $primary; + } + } + & svg { + fill: #636363; + transition: fill .2s ease; + } +} \ No newline at end of file