yuki/yuki.k4w411.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: yuki:e79123c0ca75452e6f667658047238ccf4be1e29
Branches Tags
yuki:main
...
compare: yuki:a963a54808eab8e1db88ab381bfd4e175ef0dfe9
Branches Tags
yuki:main

10 commits
e79123c0ca ... a963a54808

Author SHA1 Message Date
yuki
a963a54808
yotsuki 2025-10-12 09:51:46 -03:00
yuki
4add26a229
add misc image templates 2025-10-12 09:51:41 -03:00
yuki
f35d523009
trim unnecessary data 2025-10-12 09:00:59 -03:00
yuki
9f22e547ae
another tweak 2025-10-12 08:14:26 -03:00
yuki
39154c1759
tweak lastfm box 2025-10-12 08:07:32 -03:00
yuki
f9cb750c17
add temporary navbar hover 2025-10-12 07:10:55 -03:00
yuki
35bcfe9567
move hovers into nav folder 2025-10-12 06:14:23 -03:00
yuki
371e308852
add hover image to home (and a default one) 2025-10-12 05:57:19 -03:00
yuki
50e1ed1a4e
open links in new tab 2025-10-11 18:54:35 -03:00
yuki
856cff9ee3
fix lastfm 2025-10-11 17:45:51 -03:00
14 changed files with 126 additions and 63 deletions
Show stats Expand all files Collapse all files

BIN
_img/home_leftside_ad.xcf Normal file
View file

Binary file not shown.

BIN
_img/home_rightside.xcf Normal file
View file

Binary file not shown.

BIN
_img/hover.xcf Normal file
View file

Binary file not shown.

14
_includes/default_navbar.njk Normal file
View file

@ -0,0 +1,14 @@
<nav class="navbar-wrapper">
<div class="navbar-content">
<ul>
<li id="home"><a href="/">home</a></li>
<li id="about"><a href="/about">about</a></li>
<li id="blog"><a href="/blog">blog</a></li>
<li id="reviews"><a href="/reviews">reviews</a></li>
<li id="links"><a href="/links">links</a></li>
<li id="contact"><a href="/contact">contact</a></li>
<li id="nav-hover" aria-hidden="true"></li>
</ul>
</div>
</nav>

10
_includes/topmost_navbar.njk
View file

@ -1,10 +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>
</nav>

13
_layouts/base.njk
View file

@ -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">
@ -22,7 +29,7 @@ lastfm: false
<footer>
<marquee behavior="scroll" direction="left">
<a href="https://www.youtube.com/embed/w1dXpAJ1qfA"><img src="/img/Witch-on-broom.gif" alt=""></a>
<a href="https://www.youtube.com/embed/w1dXpAJ1qfA" target="_blank"><img src="/img/Witch-on-broom.gif" alt=""></a>
</marquee>
{% include "footer.njk" %}
</footer>
@ -31,4 +38,4 @@ lastfm: false
<script src="/js/lastfm.js"></script>
{% endif %}
</body>
</html>
</html>

13
_layouts/home.njk
View file

@ -4,20 +4,12 @@ title: home
lastfm: true
---
<div class="welcome-aside-left">
<div class="now-playing-wrapper box">
<h2>last played</h2>
<div id="listening"></div>
<div class="noscript">
<noscript>
<h3 style="padding: 0px 0px 4px 0px;">javascript is disabled...</h2>
</noscript>
</div>
</div>
<div id="listening"></div>
<div class="buttons-wrapper box">
<h2>please visit...</h3>
<div class="buttons">
{% for button in 88x31.buttons.people.slice(0, 5) %}
<a href="{{ button.link }}" title="{{ button.name }}">
<a href="{{ button.link }}" target="_blank" title="{{ button.name }}">
{% if button.image.startsWith("http") %}
<img src="{{ button.image }}" alt="{{ button.name }}">
{% else %}
@ -43,4 +35,5 @@ lastfm: true
{% endfor %}
</ul>
</div>
<!--<img src="/img/home_rightside.jpg" id="rightside">-->
</div>

124
css/main.scss
View file

@ -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,61 @@ 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/nav/default_hover.jpg');
/* TODO: finish each navbar image
&#home:hover ~ #nav-hover { --hover-image: url('/img/nav/home_hover.jpg'); }
&#about:hover ~ #nav-hover { --hover-image: url('/img/nav/about_hover.jpg'); }
&#blog:hover ~ #nav-hover { --hover-image: url('/img/nav/blog_hover.jpg'); }
&#reviews:hover ~ #nav-hover { --hover-image: url('/img/nav/reviews_hover.jpg'); }
&#links:hover ~ #nav-hover { --hover-image: url('/img/nav/links_hover.jpg'); }
&#contact:hover ~ #nav-hover { --hover-image: url('/img/nav/contact_hover.jpg'); }
*/
}
#nav-hover {
width: 100%;
height: 104px;
max-height: 103px;
background: mp.$bg;
background-image: var(--hover-image, none);
/* temporary until i finish navbar images */
&:hover { --hover-image: url('/img/nav/temp_hover.jpg'); }
}
a:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); }
}
}
}
@ -99,23 +126,37 @@ body {
.now-playing-wrapper {
width: 190px;
#listening {
h2 { margin-bottom: 0px; }
a { text-decoration: none; }
#trackInfo {
display: flex;
align-items: flex-start;
justify-content: space-evenly;
max-height: 64px;
overflow: hidden;
img {
order: 1;
max-width: 36px;
padding: 4px;
height: 100%;
margin: 0px 0px 0px 0px;
}
h3 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 0.8em;
padding: 0px 0px 0px 4px;
#trackInfoText {
display: flex;
align-items: flex-start;
flex-direction: column;
h3 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 0.8em;
padding: 0px 0px 0px 4px;
}
p {
font-size: 0.7em;
padding: 0px 0px 0px 4px;
}
}
p {
font-size: 0.7em;
padding: 0px 0px 2px 4px;
&:hover {
background: hsl(0, 65%, 5%);
max-height: fit-content;
height: 100%;
}
}
}
@ -146,10 +187,14 @@ body {
.welcome-aside-right {
width: max-content;
display: flex;
flex-direction: column;
.recent-posts {
width: 190px;
ul {
list-style: none;
padding: 0 0 4px 0;
list-style: none;
text-align: center;
@ -160,6 +205,12 @@ body {
}
}
}
/* TODO: rightside img
#rightside {
padding: 0px;
margin: 0px;
}
*/
}
}
@ -168,3 +219,4 @@ footer p {
font-size: 0.7em;
text-align: right;
}

BIN
img/nav/about_hover.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/nav/default_hover.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
img/nav/home_hover.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
img/nav/temp_hover.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
img/yotsuki.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 846 B

15
js/lastfm.js
View file

@ -23,10 +23,17 @@ const getTrack = async () => {
// ARTIST: json.track.artist['#text']
document.getElementById("listening").innerHTML = `
<img src="${json.track.image[1]['#text']}">
<div id="trackInfo">
<h3 id="trackName">${json.track.name}</h3>
<p id="artistName">${json.track.artist['#text']}</p>
<div class="now-playing-wrapper box" title="listening to...">
<!--<h2>listening to:</h2>-->
<a href="https://fm.yuki.k4w411.net/" target="_blank">
<div id="trackInfo">
<img src="${json.track.image[1]['#text']}">
<div id="trackInfoText">
<h3 id="trackName">${json.track.name}</h3>
<p id="artistName">by ${json.track.artist['#text']}</p>
</div>
</div>
</a>
</div>
`
};