diff --git a/_img/hover.xcf b/_img/hover.xcf new file mode 100644 index 0000000..7c08dce Binary files /dev/null and b/_img/hover.xcf differ diff --git a/_includes/default_navbar.njk b/_includes/default_navbar.njk new file mode 100644 index 0000000..d3ecab9 --- /dev/null +++ b/_includes/default_navbar.njk @@ -0,0 +1,14 @@ + + diff --git a/_includes/topmost_navbar.njk b/_includes/topmost_navbar.njk deleted file mode 100644 index 790067f..0000000 --- a/_includes/topmost_navbar.njk +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/_layouts/base.njk b/_layouts/base.njk index cd98921..632fab0 100644 --- a/_layouts/base.njk +++ b/_layouts/base.njk @@ -1,5 +1,6 @@ --- lastfm: false +navbar: "default_navbar.njk" --- @@ -12,8 +13,14 @@ lastfm: false

yukinets

 +
- {% include "topmost_navbar.njk" %} + + {% include navbar %}
@@ -31,4 +38,4 @@ lastfm: false {% endif %} - \ No newline at end of file + diff --git a/css/main.scss b/css/main.scss index 7794bb6..58213e0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -22,9 +22,12 @@ body { .header-wrapper { display: flex; align-items: flex-start; - gap: 16px; + gap: 0px; + height: fit-content; + flex-direction: row; .header { - display: block; + display: flex; + flex-direction: column; h1 { display: none; height: 0; @@ -39,37 +42,57 @@ body { } .header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); } } - .navbar-wrapper { display: flex; align-items: flex-start; - margin-top: 8px; + margin: 8px 0px 2px 0px; + width: 100%; - ul { + .navbar-content { display: flex; - flex-direction: row; - flex-wrap: wrap; - list-style: none; - padding: 0; - li { + flex-direction: column; + width: 100%; + + ul { display: flex; - margin: 2px; - a { - padding: 0.2em 0.5em; - border: 1px solid mp.$border; + flex-direction: row; + flex-wrap: wrap; + list-style: none; + padding: 0 4px; + li { + display: flex; + margin: 2px; + a { + padding: 0.2em 0.5em; + border: 1px solid mp.$border; - background: mp.$bg; - background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%); + background: mp.$bg; + background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%); - color: mp.$text; - font-family: fonts.$ll; - font-weight: normal; - font-size: 1em; - text-decoration: none; - /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/ + color: mp.$text; + font-family: fonts.$ll; + font-weight: normal; + font-size: 1em; + text-decoration: none; + /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/ + + &:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); } + } + --hover-image: url('/img/default_hover.jpg'); + &#home:hover ~ #nav-hover { --hover-image: url('/img/home_hover.jpg'); } + &#about:hover ~ #nav-hover { --hover-image: url('/img/about_hover.jpg'); } + &#blog:hover ~ #nav-hover { --hover-image: url('/img/blog_hover.jpg'); } + &#reviews:hover ~ #nav-hover { --hover-image: url('/img/reviews_hover.jpg'); } + &#links:hover ~ #nav-hover { --hover-image: url('/img/links_hover.jpg'); } + &#contact:hover ~ #nav-hover { --hover-image: url('/img/contact_hover.jpg'); } + } + #nav-hover { + width: 100%; + height: 104px; + max-height: 103px; + background: mp.$bg; + background-image: var(--hover-image, none); } - - a:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); } } } } @@ -150,6 +173,7 @@ body { .recent-posts { width: 190px; ul { + list-style: none; padding: 0 0 4px 0; list-style: none; text-align: center; @@ -168,3 +192,4 @@ footer p { font-size: 0.7em; text-align: right; } + diff --git a/img/default_hover.jpg b/img/default_hover.jpg new file mode 100644 index 0000000..85d20e7 Binary files /dev/null and b/img/default_hover.jpg differ diff --git a/img/home_hover.jpg b/img/home_hover.jpg new file mode 100644 index 0000000..6771ffc Binary files /dev/null and b/img/home_hover.jpg differ