Compare commits
No commits in common. "a963a54808eab8e1db88ab381bfd4e175ef0dfe9" and "e79123c0ca75452e6f667658047238ccf4be1e29" have entirely different histories.
a963a54808
...
e79123c0ca
14 changed files with 63 additions and 126 deletions
Binary file not shown.
Binary file not shown.
BIN
_img/hover.xcf
BIN
_img/hover.xcf
Binary file not shown.
|
|
@ -1,14 +0,0 @@
|
||||||
<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
Normal file
10
_includes/topmost_navbar.njk
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<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>
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
lastfm: false
|
lastfm: false
|
||||||
navbar: "default_navbar.njk"
|
|
||||||
---
|
---
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
@ -13,14 +12,8 @@ navbar: "default_navbar.njk"
|
||||||
<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">
|
||||||
|
|
@ -29,7 +22,7 @@ navbar: "default_navbar.njk"
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<marquee behavior="scroll" direction="left">
|
<marquee behavior="scroll" direction="left">
|
||||||
<a href="https://www.youtube.com/embed/w1dXpAJ1qfA" target="_blank"><img src="/img/Witch-on-broom.gif" alt=""></a>
|
<a href="https://www.youtube.com/embed/w1dXpAJ1qfA"><img src="/img/Witch-on-broom.gif" alt=""></a>
|
||||||
</marquee>
|
</marquee>
|
||||||
{% include "footer.njk" %}
|
{% include "footer.njk" %}
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,20 @@ title: home
|
||||||
lastfm: true
|
lastfm: true
|
||||||
---
|
---
|
||||||
<div class="welcome-aside-left">
|
<div class="welcome-aside-left">
|
||||||
<div id="listening"></div>
|
<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 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 }}" target="_blank" title="{{ button.name }}">
|
<a href="{{ button.link }}" 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 %}
|
||||||
|
|
@ -35,5 +43,4 @@ lastfm: true
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!--<img src="/img/home_rightside.jpg" id="rightside">-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
124
css/main.scss
124
css/main.scss
|
|
@ -22,12 +22,9 @@ body {
|
||||||
.header-wrapper {
|
.header-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 0px;
|
gap: 16px;
|
||||||
height: fit-content;
|
|
||||||
flex-direction: row;
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: block;
|
||||||
flex-direction: column;
|
|
||||||
h1 {
|
h1 {
|
||||||
display: none;
|
display: none;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
|
@ -42,61 +39,37 @@ 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: 8px 0px 2px 0px;
|
margin-top: 8px;
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.navbar-content {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
width: 100%;
|
flex-wrap: wrap;
|
||||||
|
list-style: none;
|
||||||
ul {
|
padding: 0;
|
||||||
|
li {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
margin: 2px;
|
||||||
flex-wrap: wrap;
|
a {
|
||||||
list-style: none;
|
padding: 0.2em 0.5em;
|
||||||
padding: 0 4px;
|
border: 1px solid mp.$border;
|
||||||
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%);
|
|
||||||
|
|
||||||
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: mp.$bg;
|
||||||
background-image: var(--hover-image, none);
|
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
|
||||||
/* temporary until i finish navbar images */
|
|
||||||
&:hover { --hover-image: url('/img/nav/temp_hover.jpg'); }
|
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;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -126,37 +99,23 @@ 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;
|
||||||
max-height: 64px;
|
justify-content: space-evenly;
|
||||||
overflow: hidden;
|
|
||||||
img {
|
img {
|
||||||
height: 100%;
|
order: 1;
|
||||||
margin: 0px 0px 0px 0px;
|
max-width: 36px;
|
||||||
|
padding: 4px;
|
||||||
}
|
}
|
||||||
#trackInfoText {
|
h3 {
|
||||||
display: flex;
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||||
align-items: flex-start;
|
font-size: 0.8em;
|
||||||
flex-direction: column;
|
padding: 0px 0px 0px 4px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&:hover {
|
p {
|
||||||
background: hsl(0, 65%, 5%);
|
font-size: 0.7em;
|
||||||
max-height: fit-content;
|
padding: 0px 0px 2px 4px;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -187,14 +146,10 @@ 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;
|
||||||
|
|
@ -205,12 +160,6 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* TODO: rightside img
|
|
||||||
#rightside {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -219,4 +168,3 @@ footer p {
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
BIN
img/yotsuki.png
BIN
img/yotsuki.png
Binary file not shown.
|
Before Width: | Height: | Size: 846 B |
15
js/lastfm.js
15
js/lastfm.js
|
|
@ -23,17 +23,10 @@ const getTrack = async () => {
|
||||||
// ARTIST: json.track.artist['#text']
|
// ARTIST: json.track.artist['#text']
|
||||||
|
|
||||||
document.getElementById("listening").innerHTML = `
|
document.getElementById("listening").innerHTML = `
|
||||||
<div class="now-playing-wrapper box" title="listening to...">
|
<img src="${json.track.image[1]['#text']}">
|
||||||
<!--<h2>listening to:</h2>-->
|
<div id="trackInfo">
|
||||||
<a href="https://fm.yuki.k4w411.net/" target="_blank">
|
<h3 id="trackName">${json.track.name}</h3>
|
||||||
<div id="trackInfo">
|
<p id="artistName">${json.track.artist['#text']}</p>
|
||||||
<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>
|
||||||
`
|
`
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue