website/_src/pages/home.html

---
title: "Home"
date: 2000-01-01
icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z"
---
<section>
	{% for articles in collections.articles %}
	<article class="note">{{articles.content}}</article>
	{% endfor %}
</section>
<section id="collection">
	<hr>
	<ul class="games">
		{% for item in games.items %}
		<li>
			<a href="{{item.url}}">
				<h3>{{item.title}}</h3>
				<img src="{{item.cover}}" alt="{{item.alt}}">
			</a>
		</li>
		{% endfor %}
	</ul>
	<hr>
	<ul class="music">
		{% for item in music.items %}
		<li>
			<a href="{{item.url}}">
				<h3>{{item.title}}</h3>
				<img src="{{item.cover}}" alt="{{item.alt}}">
			</a>
		</li>
		{% endfor %}
	</ul>
	<hr>
</section>
<section>
	<div id="changelog">
		<div class="window">
			<div aria-hidden="true" class="title-bar">
				<div class="title-bar-text"><img src="/assets/img/theme/citrus/bunny.png">Changelog</div>
				<div class="title-bar-controls">
					<button id="Minimize"></button>
					<button id="Maximize"></button>
					<button id="Close"></button>
				</div>
			</div>
			<div class="window-body">
				<iframe aria-label="Changelog" src="/update/index.html"></iframe>
			</div>
		</div>
	</div>
	<div id="buttons">
		<div class="window">
			<div aria-hidden="true" class="title-bar">
				<div class="title-bar-text"><img src="/assets/img/theme/citrus/bunny.png">Buttons</div>
				<div class="title-bar-controls">
					<button id="Minimize"></button>
					<button id="Maximize"></button>
					<button id="Close"></button>
				</div>
			</div>
			<div class="window-body">
				<nav class="buttons">
					<ul>
						<fieldset>
							<legend>My buttons!</legend>
							{% for item in 88x31-mine.items %}
							<li>
								<a href="{{item.url}}" title="{{item.name}}"><img {% if item.id %}id="{{item.id}}" {%
										endif %} src="{{item.button}}" alt="{{item.alt}}"></a>
							</li>
							{% endfor %}
						</fieldset>
					</ul>
					<ul>
						<fieldset>
							<legend>Others</legend>
							{% for item in 88x31-others.items %}
							<li>
								<a href="{{item.url}}" title="{{item.name}}"><img {% if item.id %}id="{{item.id}}" {%
										endif %} src="{{item.button}}" alt="{{item.alt}}"></a>
							</li>
							{% endfor %}
						</fieldset>
					</ul>
					<ul>
						<fieldset>
							<legend>Also check out</legend>
							{% for item in 88x31-outgoing.items %}
							<li>
								<a href="{{item.url}}" title="{{item.name}}"><img {% if item.id %}id="{{item.id}}" {%
										endif %} src="{{item.button}}" alt="{{item.alt}}"></a>
							</li>
							{% endfor %}
							<script>
								let pipe = document.getElementById("meow");
								pipe.addEventListener("mouseover", func, true);
								function func() {
									pipe.src = "/assets/img/button/braixdragon-cat2.gif";
								}
								let audio = document.createElement("audio");
								audio.src = "/assets/Destruction_Metal_Pole_L_Wave_2_0_0.wav";
								document.body.appendChild(audio);
								pipe.addEventListener("mouseover", function () {
									setTimeout(() => {
										audio.play();
									}, 1700);
								}, { once: true });
							</script>
							<script>let fox = document.getElementById("fox");
								let music = document.createElement("audio");
								music.src = "/assets/fox.ogg";
								music.loop = true;
								document.body.appendChild(music);
								fox.onmouseover = () => {
									music.play();
								}
								fox.onmouseout = () => {
									music.pause();
									music.currentTime = 0;
								}</script>
						</fieldset>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</section>