From 183c8008ab3cb4c892c3c98d8a0e3304a73441db Mon Sep 17 00:00:00 2001 From: bnd1238 Date: Tue, 5 Nov 2024 18:49:21 +0300 Subject: [PATCH 1/3] Add header --- main/_front/src/html/header.html | 91 +++++++++++++++++++++++++++++++ main/_front/src/scss/_header.scss | 58 ++++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 main/_front/src/html/header.html create mode 100644 main/_front/src/scss/_header.scss diff --git a/main/_front/src/html/header.html b/main/_front/src/html/header.html new file mode 100644 index 0000000..4767959 --- /dev/null +++ b/main/_front/src/html/header.html @@ -0,0 +1,91 @@ + + + + + + Шапка сайта + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+
+ + \ No newline at end of file diff --git a/main/_front/src/scss/_header.scss b/main/_front/src/scss/_header.scss new file mode 100644 index 0000000..7f87670 --- /dev/null +++ b/main/_front/src/scss/_header.scss @@ -0,0 +1,58 @@ +.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; +} +.nav +{ + display: flex; + align-items: center; + font-size: 18px; + font-weight: 400; +} +.header-logo +{ + display: flex; + justify-content: space-between; + 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; +} + +.link:hover, .name:hover,.logo:hover,.icon:hover +{ + fill:#712CF9; + color: #712CF9; + transition: fill 0.2s ease, color 0.2s ease; +} From cc5c255b8c6435aea4128bae54958b89df184345 Mon Sep 17 00:00:00 2001 From: bnd1238 Date: Thu, 7 Nov 2024 13:11:03 +0300 Subject: [PATCH 2/3] update header --- main/_front/src/html/header.html | 117 +++++++++++------------------- main/_front/src/scss/_header.scss | 82 +++++++++------------ 2 files changed, 78 insertions(+), 121 deletions(-) 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 From ee181d4b77942375566000cce1e10c871a84844f Mon Sep 17 00:00:00 2001 From: necitboss Date: Thu, 7 Nov 2024 19:21:03 +0300 Subject: [PATCH 3/3] header bug fixed --- main/_front/src/img/logo.svg | 34 +++++++++++++++++++ main/_front/src/scss/{ => elems}/_header.scss | 4 +++ 2 files changed, 38 insertions(+) create mode 100644 main/_front/src/img/logo.svg rename main/_front/src/scss/{ => elems}/_header.scss (93%) diff --git a/main/_front/src/img/logo.svg b/main/_front/src/img/logo.svg new file mode 100644 index 0000000..309e9ab --- /dev/null +++ b/main/_front/src/img/logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + diff --git a/main/_front/src/scss/_header.scss b/main/_front/src/scss/elems/_header.scss similarity index 93% rename from main/_front/src/scss/_header.scss rename to main/_front/src/scss/elems/_header.scss index f32ec94..ff287ce 100644 --- a/main/_front/src/scss/_header.scss +++ b/main/_front/src/scss/elems/_header.scss @@ -16,6 +16,10 @@ column-gap: 30px; align-items: center; cursor: pointer; + img { + width: 50px; + height: 50px; + } } .header__title {