2023-10-03 19:47:30 +00:00
|
|
|
|
<!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" />
|
2024-03-08 20:19:53 +00:00
|
|
|
|
<title>Media Diary</title>
|
2023-10-03 19:47:30 +00:00
|
|
|
|
<style>
|
|
|
|
|
|
body {
|
|
|
|
|
|
max-width: 80ch;
|
|
|
|
|
|
margin: 3rem auto;
|
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
|
font-size: 20px;
|
2024-03-08 20:19:53 +00:00
|
|
|
|
padding: 2rem;
|
2023-10-03 19:47:30 +00:00
|
|
|
|
}
|
|
|
|
|
|
pre {
|
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
|
}
|
|
|
|
|
|
h1, h2 {
|
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
|
|
|
font-size: 3rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
}
|
2024-03-08 20:19:53 +00:00
|
|
|
|
.reading h2:before { content: '🎲📚 '; }
|
|
|
|
|
|
.listening h2:before { content: '🎵 '; }
|
|
|
|
|
|
.watching h2:before { content: '🍿 '; }
|
|
|
|
|
|
.playing h2:before { content: '👾 '; }
|
|
|
|
|
|
.podcast h2:before { content: '🎧 '; }
|
2023-10-03 19:47:30 +00:00
|
|
|
|
nav a {
|
|
|
|
|
|
color: red;
|
|
|
|
|
|
}
|
2024-03-08 20:19:53 +00:00
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-10-03 19:47:30 +00:00
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<header>
|
|
|
|
|
|
<nav>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Filter by:
|
2024-03-08 20:19:53 +00:00
|
|
|
|
<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>
|
2023-10-03 19:47:30 +00:00
|
|
|
|
</p>
|
|
|
|
|
|
</nav>
|
2024-03-08 20:19:53 +00:00
|
|
|
|
<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>
|
2023-10-03 19:47:30 +00:00
|
|
|
|
<header>
|
|
|
|
|
|
<main>
|
|
|
|
|
|
{{#data}}
|
|
|
|
|
|
<article class={{type}}>
|
2024-03-08 20:19:53 +00:00
|
|
|
|
<h2 id="{{id}}">{{title}} <small><a href="#{{id}}">#</a></small></h2>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<small>
|
|
|
|
|
|
<date>
|
|
|
|
|
|
{{created}}
|
|
|
|
|
|
</date>
|
|
|
|
|
|
{{#episode}}
|
|
|
|
|
|
<span> | Episode: {{.}}</span>
|
|
|
|
|
|
{{/episode}}
|
|
|
|
|
|
</small>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
{{{body}}}
|
2023-10-03 19:47:30 +00:00
|
|
|
|
</article>
|
|
|
|
|
|
{{/data}}
|
|
|
|
|
|
</main>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// clicky links
|
|
|
|
|
|
const filterListening = document.querySelector('#filterListening');
|
2024-03-08 20:19:53 +00:00
|
|
|
|
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');
|
2023-10-03 19:47:30 +00:00
|
|
|
|
|
|
|
|
|
|
// dom nodes
|
|
|
|
|
|
const listening = document.querySelectorAll('.listening')
|
2024-03-08 20:19:53 +00:00
|
|
|
|
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'
|
|
|
|
|
|
);
|
2023-10-03 19:47:30 +00:00
|
|
|
|
|
|
|
|
|
|
// 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))
|
2024-03-08 20:19:53 +00:00
|
|
|
|
filterReading.addEventListener('click', hideandshow(reading))
|
|
|
|
|
|
filterWatching.addEventListener('click', hideandshow(watching))
|
|
|
|
|
|
filterAll.addEventListener('click', hideandshow(all))
|
2023-10-03 19:47:30 +00:00
|
|
|
|
</script>
|
