146 lines
4.3 KiB
Plaintext
146 lines
4.3 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||
<link rel="alternate" type="application/rss+xml" href="https://tilde.town/~dozens/consume/feed.xml" title="dozens consumes" />
|
||
<title>Media Diary</title>
|
||
<style>
|
||
body {
|
||
max-width: 80ch;
|
||
margin: 3rem auto;
|
||
line-height: 1.8;
|
||
font-size: 20px;
|
||
padding: 2rem;
|
||
}
|
||
pre {
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
}
|
||
h1, h2 {
|
||
font-family: sans-serif;
|
||
}
|
||
h1 {
|
||
font-size: 3rem;
|
||
}
|
||
h2 {
|
||
font-size: 2rem;
|
||
}
|
||
.reading h2:before { content: '🎲📚 '; }
|
||
.listening h2:before { content: '🎵 '; }
|
||
.watching h2:before { content: '🍿 '; }
|
||
.playing h2:before { content: '👾 '; }
|
||
.podcast h2:before { content: '🎧 '; }
|
||
nav a {
|
||
color: red;
|
||
}
|
||
h2, h3 {
|
||
position: relative;
|
||
}
|
||
h2 a, h3 a {
|
||
position: absolute;
|
||
left: -1.5rem;
|
||
text-decoration: none;
|
||
opacity: 0.2;
|
||
line-height: 2;
|
||
}
|
||
h2:hover a, h3:hover a {
|
||
opacity: 1;
|
||
}
|
||
header .links {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
@media screen and (max-width: 600px) {
|
||
header .links {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<nav>
|
||
<p>
|
||
Filter by:
|
||
<a id="filterAll" href="#">👌 All</a> |
|
||
<a id="filterWatching" href="#">🍿 Watching</a> |
|
||
<a id="filterListening" href="#">🎵 Listening</a> |
|
||
<a id="filterPlaying" href="#">👾 Playing</a> |
|
||
<a id="filterReading" href="#">🎲📚 Gamebooks</a> <abbr title="Small and indie rpg rulebooks that aren't on Goodreads">ℹ</abbr> |
|
||
<a id="filterPodcast" href="#">🎧 Podcasts</a>
|
||
</p>
|
||
</nav>
|
||
<h1>My Media Diary Of Everything I Consume 🍽️😋</h1>
|
||
<div class="links">
|
||
<p><a href="https://www.goodreads.com/user/show/409485-chrisman">except for books</a></p>
|
||
<p><a href="https://git.tilde.town/dozens/consump">made with consump</a></p>
|
||
<p>
|
||
webring:
|
||
<a href="https://tilde.town/~dozens/webring/dozens/index.html?name=consume&dir=prev">👈</a>
|
||
<a href="https://tilde.town/~dozens/webring/dozens/index.html">☝️</a>
|
||
<a href="https://tilde.town/~dozens/webring/dozens/index.html?name=consume&dir=next">👉</a>
|
||
</p>
|
||
</div>
|
||
<header>
|
||
<main>
|
||
{{#data}}
|
||
<article class={{type}}>
|
||
<h2 id="{{id}}">{{title}} <small><a href="#{{id}}">#</a></small></h2>
|
||
<p>
|
||
<small>
|
||
<date>
|
||
{{created}}
|
||
</date>
|
||
{{#episode}}
|
||
<span> | Episode: {{.}}</span>
|
||
{{/episode}}
|
||
</small>
|
||
</p>
|
||
{{{body}}}
|
||
</article>
|
||
{{/data}}
|
||
</main>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
<script>
|
||
// clicky links
|
||
const filterListening = document.querySelector('#filterListening');
|
||
const filterPlaying = document.querySelector('#filterPlaying');
|
||
const filterPodcast = document.querySelector('#filterPodcast');
|
||
const filterReading = document.querySelector('#filterReading');
|
||
const filterWatching = document.querySelector('#filterWatching');
|
||
const filterAll = document.querySelector('#filterAll');
|
||
|
||
// dom nodes
|
||
const listening = document.querySelectorAll('.listening')
|
||
const playing = document.querySelectorAll('.playing')
|
||
const podcast = document.querySelectorAll('.podcast')
|
||
const reading = document.querySelectorAll('.reading')
|
||
const watching = document.querySelectorAll('.watching')
|
||
const all = document.querySelectorAll(
|
||
'.watching, .reading, .listening, .playing, .podcast'
|
||
);
|
||
|
||
// event listeners
|
||
function hideandshow(fn) {
|
||
return function(e) {
|
||
e.preventDefault()
|
||
all.forEach(x => {
|
||
x.style.display = 'none';
|
||
})
|
||
fn.forEach(x => {
|
||
x.style.display = 'block';
|
||
})
|
||
}
|
||
}
|
||
filterListening.addEventListener('click', hideandshow(listening))
|
||
filterPlaying.addEventListener('click', hideandshow(playing))
|
||
filterPodcast.addEventListener('click', hideandshow(podcast))
|
||
filterReading.addEventListener('click', hideandshow(reading))
|
||
filterWatching.addEventListener('click', hideandshow(watching))
|
||
filterAll.addEventListener('click', hideandshow(all))
|
||
</script>
|