add hover image to home (and a default one)
This commit is contained in:
parent
50e1ed1a4e
commit
371e308852
GPG key ID:
0C98E6FF04EC3915
7 changed files with 72 additions and 37 deletions
BIN
_img/hover.xcf
Normal file
BIN
_img/hover.xcf
Normal file
Binary file not shown.
14
_includes/default_navbar.njk
Normal file
14
_includes/default_navbar.njk
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<nav class="navbar-wrapper">
|
||||
<div class="navbar-content">
|
||||
<ul>
|
||||
<li id="home" data-hover-image="/img/home_hover.jpg"><a href="/">home</a></li>
|
||||
<li id="about" data-hover-image="/img/about_hover.jpg"><a href="/about">about</a></li>
|
||||
<li id="blog" data-hover-image="/img/blog_hover.jpg"><a href="/blog">blog</a></li>
|
||||
<li id="reviews" data-hover-image="/img/reviews_hover.jpg"><a href="/reviews">reviews</a></li>
|
||||
<li id="links" data-hover-image="/img/links_hover.jpg"><a href="/links">links</a></li>
|
||||
<li id="contact" data-hover-image="/img/contact_hover.jpg"><a href="/contact">contact</a></li>
|
||||
<li id="nav-hover" aria-hidden="true"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<nav class="navbar-wrapper">
|
||||
<ul>
|
||||
<li><a href="/">home</a></li>
|
||||
<li><a href="/about">about</a></li>
|
||||
<li><a href="/blog">blog</a></li>
|
||||
<li><a href="/reviews">reviews</a></li>
|
||||
<li><a href="/links">links</a></li>
|
||||
<li><a href="/contact">contact</a></li>
|
||||
</ul>
|
||||
<div id="nav-hover" class="box"></div>
|
||||
</nav>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
lastfm: false
|
||||
navbar: "default_navbar.njk"
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
|
@ -12,8 +13,14 @@ lastfm: false
|
|||
<div class="header">
|
||||
<h1>yukinets</h1>
|
||||
<a href="/"><div class="header-banner" title="{{ meta.sitename }}"></div></a>
|
||||
<!--<div class="motd">
|
||||
<marquee behavior="scroll" direction="left">
|
||||
<p>{{ meta.motd }}</p>
|
||||
</marquee>
|
||||
</div>-->
|
||||
</div>
|
||||
{% include "topmost_navbar.njk" %}
|
||||
|
||||
{% include navbar %}
|
||||
</div>
|
||||
|
||||
<div class="base-content-wrapper">
|
||||
|
|
@ -31,4 +38,4 @@ lastfm: false
|
|||
<script src="/js/lastfm.js"></script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
img/default_hover.jpg
Normal file
BIN
img/default_hover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
img/home_hover.jpg
Normal file
BIN
img/home_hover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Loading…
Add table
Reference in a new issue