<!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>