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 lastfm: false
navbar: "default_navbar.njk"
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@ -12,8 +13,14 @@ lastfm: false
<div class="header"> <div class="header">
<h1>yukinets</h1> <h1>yukinets</h1>
<a href="/"><div class="header-banner" title="{{ meta.sitename }}"></div></a> <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> </div>
{% include "topmost_navbar.njk" %}
{% include navbar %}
</div> </div>
<div class="base-content-wrapper"> <div class="base-content-wrapper">
@ -22,7 +29,7 @@ lastfm: false
<footer> <footer>
<marquee behavior="scroll" direction="left"> <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> </marquee>
{% include "footer.njk" %} {% include "footer.njk" %}
</footer> </footer>
@ -31,4 +38,4 @@ lastfm: false
<script src="/js/lastfm.js"></script> <script src="/js/lastfm.js"></script>
{% endif %} {% endif %}
</body> </body>
</html> </html>

13
_layouts/home.njk
View file

@ -4,20 +4,12 @@ title: home
lastfm: true lastfm: true
--- ---
<div class="welcome-aside-left"> <div class="welcome-aside-left">
<div class="now-playing-wrapper box"> <div id="listening"></div>
<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 class="buttons-wrapper box"> <div class="buttons-wrapper box">
<h2>please visit...</h3> <h2>please visit...</h3>
<div class="buttons"> <div class="buttons">
{% for button in 88x31.buttons.people.slice(0, 5) %} {% 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") %} {% if button.image.startsWith("http") %}
<img src="{{ button.image }}" alt="{{ button.name }}"> <img src="{{ button.image }}" alt="{{ button.name }}">
{% else %} {% else %}
@ -43,4 +35,5 @@ lastfm: true
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<!--<img src="/img/home_rightside.jpg" id="rightside">-->
</div> </div>

124
css/main.scss
View file

@ -22,9 +22,12 @@ body {
.header-wrapper { .header-wrapper {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 16px; gap: 0px;
height: fit-content;
flex-direction: row;
.header { .header {
display: block; display: flex;
flex-direction: column;
h1 { h1 {
display: none; display: none;
height: 0; height: 0;
@ -39,37 +42,61 @@ body {
} }
.header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); } .header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); }
} }
.navbar-wrapper { .navbar-wrapper {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-top: 8px; margin: 8px 0px 2px 0px;
width: 100%;
ul { .navbar-content {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: wrap; width: 100%;
list-style: none;
padding: 0; ul {
li {
display: flex; display: flex;
margin: 2px; flex-direction: row;
a { flex-wrap: wrap;
padding: 0.2em 0.5em; list-style: none;
border: 1px solid mp.$border; padding: 0 4px;
li {
display: flex;
margin: 2px;
a {
padding: 0.2em 0.5em;
border: 1px solid mp.$border;
background: mp.$bg; background: mp.$bg;
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%); background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
color: mp.$text; color: mp.$text;
font-family: fonts.$ll; font-family: fonts.$ll;
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: 1em;
text-decoration: none; text-decoration: none;
/*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/ /*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 { .now-playing-wrapper {
width: 190px; width: 190px;
#listening {
h2 { margin-bottom: 0px; }
a { text-decoration: none; }
#trackInfo {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-evenly; max-height: 64px;
overflow: hidden;
img { img {
order: 1; height: 100%;
max-width: 36px; margin: 0px 0px 0px 0px;
padding: 4px;
} }
h3 { #trackInfoText {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; display: flex;
font-size: 0.8em; align-items: flex-start;
padding: 0px 0px 0px 4px; 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 { &:hover {
font-size: 0.7em; background: hsl(0, 65%, 5%);
padding: 0px 0px 2px 4px; max-height: fit-content;
height: 100%;
} }
} }
} }
@ -146,10 +187,14 @@ body {
.welcome-aside-right { .welcome-aside-right {
width: max-content; width: max-content;
display: flex;
flex-direction: column;
.recent-posts { .recent-posts {
width: 190px; width: 190px;
ul { ul {
list-style: none;
padding: 0 0 4px 0; padding: 0 0 4px 0;
list-style: none; list-style: none;
text-align: center; 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; font-size: 0.7em;
text-align: right; 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'] // ARTIST: json.track.artist['#text']
document.getElementById("listening").innerHTML = ` document.getElementById("listening").innerHTML = `
<img src="${json.track.image[1]['#text']}"> <div class="now-playing-wrapper box" title="listening to...">
<div id="trackInfo"> <!--<h2>listening to:</h2>-->
<h3 id="trackName">${json.track.name}</h3> <a href="https://fm.yuki.k4w411.net/" target="_blank">
<p id="artistName">${json.track.artist['#text']}</p> <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> </div>
` `
}; };